HTML的定义
HTML不是一门编程语言，而是一门标记语言，通过浏览器显示文本、图像、视频或者其他资源，常通过标签实现。
常用HTML标签
标签是HTML的灵魂，标签可分为块级标签和行级标签，块级标签占一块，行级标签占一行，行级标签可以镶嵌在块级标签中，两种标签可以相互转换。
| 标签名 | 作用 | 注释 |
|---|---|---|
| div | 将文档分区 | 块级双 |
| p | 定义一个段落 | 块级双 |
| span | 组合文档的行内元素 | 行级双 |
| h | 设置标题 | 不超过6个，字体随着数字变大而变小 |
| br | 换行符 | 单 |
| a | 插入超链接 | |
| img | 插入图片 | |
| ul | 定义无序列表 | |
| title | 页面的标题 | |
| style | 设置样式，暂时还没学到 | |
| meta | 提供页面元信息，如字体编码，网站描述 | |
| script | 设置脚本，暂时还没学到 | |
| strong | 加粗字体，表强调 | |
| q | 表示引用 |
表格制作
表格table是一个独立的知识点。它由thead、tbody、tfoot组成，主要标签有：
| 标签名 | 作用 |
|---|---|
| table | 表格 |
| caption | 表格名字 |
| thread | 表头，加粗 |
| tbody | 表格内容 |
| tfoot | 表格最后一行 |
| th | 表头的元素 |
| tr | 一行 |
| td | 一列 |
| rowspan | 合并一行表格 |
| colspan | 合并一列表格 |
PS:emmet语法可以智能生成代码块，很方便比如我要生成以下的表格：
ememnt语法为：table[border=1 width=600]>(caption{学生信息表})+(thread>tr>th4)+(tbody>tr3>td4)+(tfoot>tr>td4[colspan=4])
再一个一个填入信息即可。
form表单标签
form标签是块标签，具有的属性有：name（表单名称）、action（向何处发送数据）、method（以何种方式发送表单数据）
作用是创建输入表单，向后台传输数据
| 标签名 | 作用 |
|---|---|
| form | 创建表单 |
| input （注释1） | 创建输入框 |
| password | 属性跟input一样 |
| radio | 单选按钮，要check、name属性 |
| checkbox | 复选框按钮 |
| file | 文件上传按钮 |
| button | 普通按钮，用来调用JS脚本，必须要有value值 |
| image | 图片按钮，用法和按钮一样，有个特殊属性src，用来加载图片，用它替换按钮 |
| submit | 提交表单数据到后台 |
| reset | 将表单内容全部清空 |
| textarea（注释2） | 多行文本框，用来输入大批量的内容 |
| select | 下拉列表框，默认用于单项选择，用option呈现每个选项select在前面加label标签，显示名字，标签的for必须和select的id一致 |
| button | 具有提交功能，可以单独使用，可不写在form元素中，若写在form中，有提交功能 |
注释1：input有以下类型：text，单行文本输入，text属性：placeholder，设置预输入框；
name，命名，用来传值
minlength、maxlength用来设置最少/多几个字符
注释2：常用属性：name、id、cols、rows、placeholder、minlength、require（在这个框内必须输入的意思）
代码例子：
下面展示一些 内联代码片。
<form action="HTTP://baidu.com" name="screty" method="get" >
<input type="text" name="这是什么玩意？" placeholder="默认输入框">
<br>
<input type="password">
<br>
<input type="submit">
<br>
<input type="radio" name="sex">男
<br>
<input type="radio" name="sex">女
<br>
<input type="radio" name="num">1806200111
<br>
<input type="radio" name="num">1806200112
<br>
<input type="checkbox" name="hobby">画画
<input type="checkbox" name="hobby">唱歌
<input type="checkbox" name="hobby">跳舞
<input type="file">
<br>
<input type="button" value="登录">
<br>
<input type="reset" value="取消">
<br>
<textarea name="haha" id="01" cols="30" rows="10" value="这是啥"></textarea>
</form>
代码块
<!--！表声明。表示下面的文档标签将以H5的规范去解析-->
<!DOCTYPE html>
<html lang="en">
<!--头部，主要完成网页相关设置-->
<head>
<!--汉字编码-->
<meta charset="UTF-8">
<!--设置网站搜索关键字-->
<meta name="keywords" content="">
<!--设置网站描述-->
<meta name="descripiton" content="">
<!--标题-->
<title>第一个网页</title>
<!--网站图标-->
<link rel="shortcut icon" href="001.ico" type="image/x-icon">
<style>
/*书写样式的地方*/
</style>
<!--用来引入外部文件-->
<link rel="stylesheet" href="style.css">
</head>
<!--主体，大部分内容在这里呈现-->
<body>
<div>
<!--层次的意思,用于布局-->
</div>
<p>
<!--段落，相当于回车-->
现在还年轻，充满了朝气，是最有创造力的时候，我们应该珍惜时间，让自己变得更好，真正的青春。
</p>
<h1>
<!--标题，字体会逐渐变细，从h1到h6-->
现在还年轻
</h1>
<h2>
充满了朝气
</h2>
<p>
<!--br标签是单标签，表示换行-->
现在还年轻<br />充满了朝气<br />是最有创造力的时候<br />我们应该珍惜时间<br />让自己变得更好<br />真正的青春<br />
</p>
<hr width="100%" size="1px" align="left" color="green"/>
<!--hr是单标签，表示生成一个横线，width表示多长，size多大，align放哪（左，右，居中）-->
<a href="HTTP://baidu.com" title="百度" target="_blank">百度</a>
<!--a标签表示跳转，href表示链接，title是提示内容，target是下一步动作，blank为打开新页面，self为原页面打开-->
<img src="359b033b5bb5c9eaab1eb9eddf39b6003bf3b3cb.jpg" height="400" width="300" alt="小蔓" title="小蔓"/>
<!--img就是图片，src是图片路径，alt表示当图片加载不成功是显示内容，title为显示内容-->
<span>现在还年轻，充满了朝气，是最有创造力的时候，我们应该珍惜时间，让自己变得更好，真正的青春。</span>
<!--span也是用于布局，不过span不会换行-->
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<!--ul/ol表示无序/有序标签，简便打法：ul>li{li$}*3,lu下面跟着li标签，括号里面表示内容，$表示生成序号，另外，ctrl+D，可以瞬间复制选中内容，ctrl+Z为撤销到上一步-->
<p title="属性值1">标签属性</p>
<span>这是
啥玩意</span>
<p>这是 <br>啥玩意</p>
</body>
<!--脚本，表逻辑内容-->
<script></script>
</html>
172
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
