1. 初始HTML
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
2. 网页基本信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
<!--注释内容
<!DOCTYPE html>声明为 HTML5 文档
<html>元素是 HTML 页面的根元素
<head>元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为utf-8。
<title>元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1>元素定义一个大标题
<p>元素定义一个段落
-->
3. 网页基本标签和属性
标题标签:h1-h6
段落标签:<p></p>
换行标签:<br>
水平线标签:<hr/>
字体样式标签:<strong></strong>、<em></em>、<u></u>
注释和特殊符号: ©><≥≤
| 属性 | 描述 |
|---|---|
| class | 为html元素定义一个或多个类名（classname）(类名从样式文件引入) |
| id | 定义元素的唯一id |
| style | 规定元素的行内样式（inline style） |
| title | 描述了元素的额外信息 (作为工具条使用) |
4. 图像标签
<img src="图片的相对路径" alt="图片没有正常显示时显示此处文字" width="304" height="228">
5. 超链接标签
<a href="url" target="目标窗口位置"></a>
<a href="url" target="_blank"></a>
常用有文本超链接和图片超链接、锚链接（定义name）、功能链接、邮件链接、QQ链接
<!--QQ推广-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1723265689&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:1723265689:53" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
6. 块元素和行元素
块元素：无论内容多少，该元素独占一行。
p、h1-h6
行内元素：内容撑开宽度，左右都是行元素的可以排在一行
a、strong、em
7. 列表标签
<!--有序列表-->
<ol>
<li>Java</li>
<li>Python</li>
</ol>
<!--无序列表-->
<ul>
<li>Java</li>
<li>Python</li>
</ul>
<!--自定义列表-->
<dl>
<dt></dt>
<dd>Java</dd>
<dd>Python</dd>
<dd>Linux</dd>
</dl>
8. 表格标签
表格结构语义标签：
1.<table>：表格根元素。
2.<thead>：表格头。
3.<tbody>：表格体。
4.<tfoot>：表格尾，一般可忽略该结构。
5.<tr>：表格行。
表格内容标签：
1.<th>：表头单元格。
2.<td>：表体单元格。
跨列：colspan
跨行：rowspan
单元格内边距：cellpadding
单元格外边距：cellspacing
col 和 colgroup 用于便捷定义表格指定列的样式。
9. 媒体元素
- video
- audio
<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
10. 页面结构分析
| 元素名 | 描述 |
|---|---|
| header | 头部区域的内容 |
| footer | 底部区域的内容 |
| section | 页面中的一块独立区域 |
| article | 独立的文章内容 |
| aside | 相关内容或应用（侧边栏） |
| nav | 导航类辅助内容 |
11. iframe内联框架
<!--frameborder="0"移除边框-->
<iframe src="demo_iframe.htm" name="hello-iframe" width="200" height="200" frameborder="0"></iframe>
12. 表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)、按钮、文件域、文本域、搜索框、滑块、简单验证等等。
| 属性 | 说明 |
|---|---|
| type | 指定元素的类型：text、password、checkbox、radio、submit、reset、file、hidden、image、button、email、url、number，默认为text。 |
| name | 默认内容 |
| value | 元素的初始值，type为radio时必须指定一个值 |
| size | 指定表单元素的初始宽度。当type为text或password时，表单元素的大小用字符为单位；当type为其他类型时，宽度用像素为单位。 |
| maxlength | 当type为text或password时，输入的最大字符数 |
| checked | 当type为radio或checkbox时，按钮是否被选中 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form action="#" method="post">
<!-- 文本 -->
<p>名字:<input type="text" name="username" placeholder="请输入用户名" required=""></p>
<p>密码:<input type="password" name="password"></p>
<!-- 单选框 -->
<p>单选框:
<input type="radio" value="boy" name="sex" checked>男
<input type="radio" value="girl" name="sex">女
</p>
<!-- 复选框 -->
<p>爱好:
<input type="checkbox" value="sleep" name="hobby" checked>睡觉
<input type="checkbox" value="code" name="hobby">敲代码
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">游戏
</p>
<!-- 按钮 -->
<p>按钮:
<input type="button" name="btn1" value="点击变长">
<input type="image" src="./static/images/bg.jpg">
</p>
<!-- 下拉框 -->
<p>
<select name="省份" id="">
<option value="beijin">北京</option>
<option value="hubei" selected>湖北</option>
<option value="sichuan">四川</option>
</select>
</p>
<!-- 文本域 -->
<p>反馈：
<textarea name="textarea" cols="50" rows="10">
文本内容
</textarea>
</p>
<!-- 文件域 -->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<!-- 邮件验证 -->
<p>邮箱：
<input type="email" name="email">
</p>
<!-- url验证 -->
<p>URL:
<input type="url" name="url">
</p>
<!-- 数字验证 -->
<p>Number:
<input type="number" max="100" min="0" step="1">
</p>
<!-- 滑块 -->
<p>音量：
<input type="range" name="voice" id="" value="" min="0" max="100" step="2" />
</p>
<!-- 搜索框 -->
<p>搜索框：
<input type="search" name="search">
</p>
<!-- 增强鼠标可用性 -->
<p>
<label for="mark">你点我试试</label>
<input type="text" id="mark">
</p>
<p>
<input type="submit" value="提交">
<input type="reset" value="清空表单">
</p>
</form>
</body>
</html>
13. 表单的常用属性和验证
常用属性：
- 隐藏域 hidden
- 只读 readonly
- 禁用 disabled
简单验证：
- placeholder 提示信息
- required 非空判断
- pattern 正则表达式判断