HTML是一种超文本标记语言（HyperText Markup Language），是一种用于创建网页的标准标记语言。可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
首先是HTML的基本结构，head标签里面用于设置标题栏（title）以及插入一些脚本（script）,样式文件（CSS）和meta信息。body标签存放HTML的主体内容。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>下面介绍HTML的几个常用标签（由于标签显示与浏览器有冲突，所以涉及的标签均未写尖括号）
1、标题标签
共有六级标题用h1~6来表示：
<body>
<h1>这是一级标签</h1>
<h2>这是二级标签</h2>
<h3>这是三级标签</h3>
<h4>这是四级标签</h4>
<h5>这是五级标签</h5>
<h6>这是六级标签</h6>
</body>
2、段落（p）、换行（br）、分割线（hr）、斜体（em）、加粗（strong）
段落标签默认情况下会有一定的边距，可以进行设置
<body>
<p><em>这是第一行</em><br/><strong>这是第二行</strong></p><hr/>
</body>
3、注释和特殊符号（后面都要带分号，还是由于冲突省略）
空格（ ）、大于号（>）、小于号（<）、引号（"）、版权符号@（©）、注释（请参考代码，快捷键单行：ctrl+/，多行：ctrl+shift+/）
<body>
<!--这是一个注释-->
<p>祝 大 家 五 一 节 快 乐 ！</p>
<p>©"wk"</p>
<p><2017/4/29></p>
</body>
4、图像标签（img）
src属性指定图片所在位置，相对路径或绝对路径均可（这里指的是当前html文件的路径），返回上级目录可使用../
alt用于指定图片的替换文本
工程中创建一个img目录，放入一个图片。
<p>我是小明</p>
<img src="img/xiaoming.jpg" alt="正在加载"/>
然后将html文件放入test文件夹中
<p>我是一个苹果</p>
<img src="../img/apple.jpg" alt="正在加载" width="200" height="200"/>
4、超链接标签（a）
href指定URL，target指定目标窗口位置（当前或新建），并指定点击对象（文本图像或网址）
/test下创建一个second.html文件作为跳转界面。
<a href="second.html" target="_blank">传送门</a>
点击后跳转到……
5、锚链接
类似于超链接，跳转到某一具体位置（当前网页或其他网页），首先要创建跳转标记，即设置name属性，通过#name创建跳转链接
<a href="second.html#mark" target="_blank">传送门</a>在second.html中创建锚点
<a name="mark">你好！我的名字叫纳什男爵</a>跳转后可直接定位到second.xml中的指定位置处。
6、列表
（1）有序列表（ol）
li标签指定列表项
type属性还可指定为A或a作为列表序号
<ol type="数字">周列表
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
</ol>
（2）无序列表（ul）
square指前面的小方块，dics为实心圆（默认值），circle为空心圆
<ul type="square">劳动节
<li>五月一号</li>
<li>五月二号</li>
<li>五月三号</li>
</ul>
（3）自定义列表（dl）
dt标签可指定不同类型列表项，dd指定列表项
<dl>
<dt>羊族</dt>
<dd>喜羊羊</dd>
<dd>美羊羊</dd>
<dd>懒羊羊</dd>
<dt>狼族</dt>
<dd>灰太狼</dd>
<dd>红太狼</dd>
</dl>
7、表格（table）
tr指定行，td指定单元格
boder属性指定表格边界大小，align指定表格对齐方式（默认left），colspan和rowspan分别指定单元格跨列或跨行数
<table border="1" align="left">
<tr><td colspan="3">成绩表</td></tr>
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>98</td>
</tr >
<tr>
<td>数学</td>
<td>100</td>
</tr> <tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>99</td>
</tr >
<tr>
<td>数学</td>
<td>99</td>
</tr>
</table>
8、表单（form）
登录表或信息表等，action指定发送表单数据的地址，method指定发送方式（post和get），在input标签中的type属性选择类型，text指文本框，password密码框，checkbox复选框等等
<form action="second.html" method="post">
<p>QQ2050登录界面</p>
<p>姓名：<input name="name" type="text"/></p>
<p>密码：<input name="password" type="password" maxlength="8"/></p>
<p>开启声音<input type="checkbox" checked="checked"/></p>
<p>自动登录<input type="checkbox"/></p>
<p>记住密码<input type="checkbox"/></p>
<input type="submit" value="登录"/>
</form>
9、列表框（select）
option标签为选项，size属性指定显示行数
<select name="月份" size="1">
<option value="January">一月</option>
<option value="February">二月</option>
<option value="March">三月</option>
<option value="April">四月</option>
<option value="May">五月</option>
<option value="June">六月</option>
<option value="July">七月</option>
<option value="August">八月</option>
<option value="September">九月</option>
<option value="October">十月</option>
<option value="November">十一月</option>
<option value="December">十二月</option>
</select>
10、多行文本域（textarea）
cols属性设置最大显示列数，rows属性设置最大显示行数
<textarea name="文本域" cols="30" rows="10"></textarea>
扫一扫
948
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
