HTML学习笔记

发表于 | 分类于 | 阅读次数

HTML(Hyper Text Markup Language)，即超文本标记语言，定义了网页的内容。HTML文档也叫做web页面，包含了HTML标签及文本内容。

HTML运行在浏览器上，由浏览器来解析。只有区域才会在浏览器中显示。

HTML链接是通过标签

1
2

<!--more-->

这是一个链接

如果将 target 属性设置为 “_blank”, 链接将在新窗口打开。

1
HTML图像是通过标签```<img>```来定义的。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
```<br/>```标签定义换行。

```<hr/>```标签在HTML页面中创建水平线，可用于分隔内容。

    <!--这是一个注释>
    <h1>这是一个标题</h1>
    <p>这是一个段落</p>
    <hr>


​    
-----
可以添加在头部区域<head>的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

-----
#### HTML CSS
CSS可以通过以下方式添加到HTML中：

1.内联样式：在HTML元素中使用"style"属性。当特殊的样式需要应用到个别元素时，就可以使用内联样式。

如定义style="background-color:green;"    
font-family(字体)，color,font-size(字体大小)，text-align(文字对齐)

2.内部样式表：在HTML文档头部<head>区域使用<style>元素来包含CSS。当单个文件需要特别样式事，可使用内部样式表。

3.外部引用：使用外部CSS文件。当样式需要被应用到很多页面时，可使用外部样式表。

```html
<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

图像由标签定义

要在页面上显示图像，要使用源属性(src，指”source”)，源属性的值是图像的URL地址。alt属性是替换文本属性（无法载入图像时，显示替代性的文本）

表格由标签来定义

1
2
3
4
5
6
7
由<tr>标签定义行，
<th>标签定义表头，
<td>标签定义表格数据。

<thead>,
<tbody>,
t<foot>

列表

1
2
3
无序列表使用<ul>标签
有序列表使用<ol>标签
每个列表项使用<li>标签

区块和内联元素

1
2
3
4
5
6
7
HTML可以通过<div>和<span>将元素组合起来
<div>定义了文档的区域，块级
<span>用来组合文档中的行内元素，内联元素

块级元素在浏览器显示时，通常会以新行来开始（结束）。实例：<h1>,<p>,<ul>,<table>

内联元素在显示时通常不会以新行开始。实例：<b>,<td>,<a>,<img>

表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
表单元素时允许用户在表单中输入内容，
如：文本域、下拉列表、单选框、复选框等
1.文本域
<form>
    First name:<input type="text" name="firstname">
</form>
2.密码字段
<form>
    Password:<input type="password" name="pwd">
</form>
3.单选按钮
<form>
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="female">Female
</form>
4.复选框
<form>
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
    <input type="checkbox" name="vehicle" value="Car">I have a car
</form>
5.提交按钮
<form name="input" action="html_form_action.php" method="get">
    Username:<input type="text" name="user">
    <input type="submit" valur="Submit">
</form>

框架

1
2
3
4
使用框架，可以在同一个浏览器窗口中显示不止一个页面。
<iframe src="demo_iframe.html name="iframe_a></iframe>
<p><a href="http://www.runoob.com
target="iframe_a">RUNOOB.COM</a></p>

脚本

1
2
3
4
JavaScript最常用于图片操作、表单验证以及内容动态更新。

<script>元素既可包含脚本语句，也可通过src属性指向外部脚本文件
<noscript>标签提供无法使用脚本时的替代内容