HTML
超文本标记语言 （Hyper Text Markup Language，简称HTML） 俗称网页，该语言所保存的文件名字后缀必须是 文件名.html 或者 文件名.htm。
页面格式
<html>
<head>
子标签
</head>
<body>
子标签
</body>
</html>
head 中的常见标签
<!--这个是注释->
<title>网页标题</title> <!--标签表示是网页的标题-->
<meta charset="字符编码"> <!--告诉浏览器请用这个字符串编码显示网页内容-->
<script></script> <!--用来包含网页的脚本-->
<link> <!--用来包含外部样式表-->
<!--这个是注释->body 中的标签
- 标题标签
<h1></h1> <!--标题标签,这个标签可以到h6，如还有<h2></h2>，以此类推-->
- 段落标签
<p></p> <!--段落标签,单个<p>标签可以表示换行-->
- 换行标签
<br> <!--换行-->
- 分割线标签
<hr> <!--分割线-->
- 特殊文字需要转义显示
< <!--表示大于号-->
> <!--表示小于号-->
© <!--表示版权标志，也就是一个圈里一个c的标志-->
- 超链接标签
<a href="链接地址">链接文字</a> <!--要是中间的内容没写，空有链接，链接是显示不出来的-->
- 图片标签
<img src="图片地址" width="宽度" height="高度"> <!--宽度和高度的单位都是像素，也就说单位是px-->
<!--让图片有链接的功能，以此类推可以知道给一些标签加上链接，如下：-->
<a href="链接地址"> <img src="图片地址"> </a>
- 列表标签
有序列表（可以写很多li标签）：
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
无序列表（可以写很多li标签）：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
如下图，第一个是有序，第二个是无序：
- 表格标签
<table border="表框，一般设置1" width="表宽，可省略">
<thead></thead> <!-- 头 -->
<tbody> <!-- 体 -->
<!-- tr 代表行 -->
<tr>
<!-- td 代表列 -->
<td></td>
<td></td>
</tr>
</tbody>
<tfoot></tfoot> <!-- 脚 -->
</table>例如：
<table width="50%" border="1"> <thead > <tr> <th>序号</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>jack</td> <td>14</td> </tr> <tr> <td>2</td> <td>rose</td> <td>18</td> </tr> <tr> <td>3</td> <td>jim</td> <td>20</td> </tr> </tbody> </table>
如下图：
表格合并单元格，可以使用td 的属性 colspan（合并列）rowspan（合并行），并且<thead>、<tbody>、 <tfoot>你没写出来浏览器会自动纠错，因此就算没写也会正常显示，不过建议写完整啦。
- 表单标签
<!-- 把填写的信息收集起来发送给服务器，有name属性的标签，表单会把信息发送给服务器-->
<!-- 如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息，用get，反之post-->
<form action="发送的网页地址" method="get或post">
<!--内容，经常用来写接收用户的输入-->
</form>
表单配合这两个标签使用会很好看哟：
<fieldset></fieldset> <!--表单外框t--><legend>随便写文字</legend> <!--表单外框上插入的字-->例如：
<form action="http://www.baidu.com" method="post"> <fieldset> <legend>表单</legend> 文本框 <input type="text" name="username"> <br> 密码框 <input type="password" name="password"> <br> 按钮 <input type="button" value="点我"> <br> 单选框 <!-- name 用来给单选框分组 checked 表示默认勾选--> 男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" checked value="女"> <br> 多选框 唱歌 <input type="checkbox" name="hobby" checked value="1"> 跳舞 <input type="checkbox" name="hobby" value="2"> 游戏 <input type="checkbox" name="hobby" value="3"> 睡觉 <input type="checkbox" name="hobby" value="4"> <br> <input type="file"> <br> <input type="date" value="2018-12-30"> <br> <input type="submit" value="提交"> <input type="reset" vlaue="重置"> </fieldset> </form>
如下图，表单的外框插入的字也就是<legend>表单</legend>， <fieldset> </fieldset>表示外框，表单经常配合以下标签使用：
- 文本框
<input type="text" name="随便娶一个名字，不写也行">
例如：
<input type="text" >
如下图：
- 密码框
<input type="password" name="随便娶一个名字，不写也行"> <!--输入的内容显示的是小圆点-->
例如：
<input type="password">
如下图：
- 按钮
<input type="button" value="随便起一个名字"> <!--value表示按钮上要写的文字-->
例如：
<input type="button" value="点我">
如下图：
- 单选框
<!-- name用来给单选框分组，如果两个单选框不写同名name，它们两个框都可以点，这就不是单选框了， checked 表示默认勾选-->
<input type="radio" name="随便起一个" value="可以省略，随便写一个也行">
例如：
男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" checked value="女">
<!-- 一开始默认选的是女，因为checked在女的那边-->
如下图，默认是女，只能选择一个，也就是说灰点只能有一个：
- 多选框
<!-- 这个和单选框一样需要name分组，checked表示默认选上的值-->
<input type="checkbox" name="随便起一个" value="可以省略，随便写一个也行">
例如：
唱歌 <input type="checkbox" name="hobby" checked value="1">
跳舞 <input type="checkbox" name="hobby" value="2">
游戏 <input type="checkbox" name="hobby" value="3">
睡觉 <input type="checkbox" name="hobby" value="4"><!-- 这几个爱好分为一组，都可以选，默认是选唱歌-->
如下图，可以选择多个，默认是唱歌：
- 上传文件的按钮
<input type="file">
如上图样式就是上传文件按钮，选择文件后，后面的文字就会变成文件名以及它对应的扩展名。
- 日期标签
<input type="date" value="默认显示的日期"> <!-- value值表示默认选的日期，可以写别的-->
例如：
<input type="date" value="2018-12-30">
如下图，默认的日期是2018-12-30，你可以任意选择日期
- 提交按钮标签
<input type="submit" value="提交"> <!-- value值表示按钮上写的文字，经常配合表单 使用-->
- 重置按钮标签
<input type="reset" vlaue="重置"> <!-- value值表示按钮上写的文字，经常配合表单 使用-->
- 内嵌另一个页面的标签
<iframe src="网页地址" width="宽度" height="高度"></iframe>
例如：
<iframe src="http://www.baidu.com" width="100%" height="500"></iframe>
如下图：
- 下拉列表
<!--value属性表示标记中value所指定的值,可以通过脚本获取或设置这个值，它是交给后台处理的-->
<!--想让默认的显示值，在该值后面加上selected，这样一开始你没选项目时，就显示该值-->
<select name="可省略">
<option value="" >内容</option>
<option value="">内容</option>
<option value="">内容</option>
<option value="">内容</option>
</select>例如：
<select name="cars">
<option value="volvo" >Volvo</option>
<option value="saab" selected>Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
如下图，一开始箭头旁边的值是Saab。后来选择后才变成volvo的：
总结
html的标签很多，属性也很多，有时候会记不住，这时可以去w3school看看，送上一个链接http://www.w3school.com.cn/
扫一扫
6403
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
