1、什么是HTML
Hyper Text Markup Language 直接翻译为：超文本标记语言
2、HTML文件结构
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="..."> <!-- 视口设置，用在移动网页开发中-->
<meta name="Keywords" content="..."> <!--该网页的关键词，用于搜索引擎-->
<meta name="Describe" content="..."> <!--该网页的描述，用于搜索引擎搜索结果的网页描述-->
<title>这里是页面的标题</title>
</head>
<body>
这里是正文部分
</body>
</html>3、字体设置
<font>......</font>作用：规定文本的字体、字体尺寸、字体颜色
例：
<p><font size=26 face="黑体" color="blue">我是尺寸为26、黑体、蓝色的内容</font></p>
<p><font size=26 face="宋体" color="#ff0000">我是尺寸为26、黑体、红色的内容</font></p> #颜色中的#ff0000，前两位表示红色分量，中间两位表示绿色分量，后两位表示蓝色分量在HTML4中，不赞成使用该标签，在HTML5中，不支持该标签,用CSS设置字体
4、段落设置
<P>......</p>
<div>......</div>
<p>HTML是超文本标记语言</P><p>这是另一段</p>
<div>这是最常用的HTML标签， 因为它可以结合CSS使用，实现网页布局，这种布局形式叫“DIV+CSS”</div>段落内依据所在的容器宽度自动换行，浏览器会自动地在段落的前后添加空行，这是<p>和<br>的区别
5、注释标签
<!--......-->编写程序时，给代码的解释或提示，能提高程序代码的可读性，以便于以后的参考、修改
例：
<!--这是注释，是作者对程序代码的解释说明，以增加代码的可读性-->注释不会出现在浏览器中显示，注释出现的频率很高
6、标题标签（h标签）
h标签：<h?>......</h?>
作用：h1-h6，定义标题的六个不同文字大小，依次显示重要性的递减，也就是权重依次递减
例：
<h1>我是<font color="red">1</font>级标题</h1>标题标签尽量靠近在HTML中的<body>标签，以便让搜索引擎最快领略主题
7、在浏览器显示多媒体
7.1、图片img标签
img标签：<img src= "****" />
作用：在浏览器中显示图片
<img src="image/logo.jpg" alt="**" />常用属性：src、alt、height、width
7.2、音频audio标签
audio标签：<audio controls src="音频地址" autoplay loop>
抱歉，您的浏览器不支持audio标签，请升级浏览器
</audio>
audio有两种属性：1、autoplay，声明autoplay属性音频会自动播放。2、loop属性，声明loop属性会循环播放音频。
7.3、视频video标签
video标签：<video controls src="视频地址" autoplay loop>
抱歉，您的浏览器不支持video标签，请升级浏览器
</video>
video也有两种属性：1、autoplay，声明autoplay属性视频会自动播放。2、loop属性，声明loop属性会循环播放视频。
8、a标签
a标签：<a>......</a>
作用：使用超级链接与网络上的另一个文档相连
<a href="page2.html">点击我打开另一个页面</a>
<a href="image/welcome.jpg">点击我打开一张图片</a>
<a href="image/welcome.jpg"><img src="..."></a> <!--点击图片打开网页-->
<a href="index.html" title="跳转至首页" target="blank">点击返回首页</a>
<a href="wenjian.zip">下载文件</a> <!--指向exe、zip、rar等文件格式的链接，将自动成为下载链接-->
<a href="mailto:me@test.com">给小编发邮件</a>
<a href="tel:12306">打电话买火车票</a>超链接可以是一个字，一个词，或者一组词，一幅图像，可以点击这些内容来跳转到新的文档或当前文档的某个部分。
<a>标签的title属性用于设置鼠标悬停文本。
<a>标签的target=“blank”属性用于设置在新标签中打开网页。
指向exe、zip、rar等文件格式的链接，将自动成为下载链接。
8.1、页面内锚点标签<a name="ziti">......</a>
作用：同一个文档中创建指向该锚点（位置）的链接
<a href="#duanluo">段落标签</a>锚点必须先定义再使用
| 区块标签 | 意义 |
| <div> | 普通文档区块分隔 |
| <section> | 文档的区域，语义比div大 |
| <article> | 文档的核心文章内容，会被搜索引擎主要抓取 |
| <aside> | 文档的非必要相关内容，比如广告 |
| <nav> | 导航条 |
| <header> | 页头 |
| <main> | 网页的核心内容 |
| <footer> | 页脚 |
9.2语义化标签
| 标签 | 意义 |
| <b> | 加粗的文字，常用CSS替代 |
| <u> | 加下划线文字，常用CSS替代 |
| <i> | 倾斜文字，常用CSS替代 |
| <strong> | 代表特别重要的文字 |
| <em> | 代表强调文字 |
| <mark> | 代表一段需要被高亮的文字 |
<figure> 元素代表一段独立的内容, 与说明<figcaption>配合使用, 它是一个独立的引用单元，比如建议读者拓展视野的图片等，当这部分转移到附录中或者其他页面时不会影响到主体
10、无序列表
<ul><li>.......</li></ul>
作用：此列项目使用粗体圆点进行标记
<ul>
<li>我的文件</li>
<li>我的图片</li>
</ul><ul>的子标签只能是<li>，不能出现其他任何标签
列表项内部可以使用段落、换行符、图片、链接以及其他列表等
<ul>标签可以设置type属性，建议用CSS替代
| type属性值 | 意义 |
| disc | 实心圆（默认） |
| circle | 空心圆 |
| square | 实心方块 |
11、有序列表
<ol><li>......</li></ol>
作用：列表项目使用数字进行标记
<ol>
<li>我的文件</li>
<li>我的图片</li>
</ol><li>标签不能散着放，他必须是<ol>标签或<ul>标签的子标签
<ol>的子标签只能是<li>标签
列表项内部可以使用段落、换行符、图片、链接以及其他列表等
<ol>标签可以设置type属性，用来设置编号的类型
| type属性值 | 意义 |
| a | 表示小写英文字母编号 |
| A | 表示大写英文字母编号 |
| i | 表示小写罗马数字编号 |
| I | 表示大写罗马数字编号 |
| 1 | 表示数字编号（默认） |
12、定义列表
<dl> <!--定义列表-->
<dt>北京</dt> <!--数据项-->
<dd>我国政治中心、文化中心、国际交往中心、科技创新中心</dd> <!--数据定义（对数据项解释说明）-->
<dt>上海</dt>
<dd>我国国际经济中心、金融、贸易、航运、科技创新中心</dd>
<dt>深圳</dt>
<dd>中国经济特区、全国性经济中心城市和国际化城市</dd>
</dt>
13、小结
| 标签 | 格式 |
| 段落 | <p> |
| 字体 | <font> |
| 标题 | h1-h6 |
| 列表 | ul、ol、li |
| 超链接 | <a href="***">......</a> |
| 锚点 | <a name="ziti">......</a> <a href="#duanluo">段落标签</a> |
| 注释 | <!--......--> |
14、表格
table、tr、td、border、width
作用：用于表格、行、列、宽度、边框的制作
colspan、rowspan
作用：用于将表格内的某些行、列进行合并
<th> 是“标题小格”，可以替代<td>的作用，表示标题小格
<thead>标签定义表头
<tbody>标签定义表核心内容
<tfoot>标签定义表脚，通常是汇总行
cellpadding 属性定义了表格单元的内容和边框之间的空间，已经废弃，使用CSS替代它
cellspacing 属性（使用百分比或像素）定义了两个单元格之间空间的大小，已经废弃，使用CSS替代它
其他标签
| 属性名 | 属性值 | 作用 |
| border | 1 | 设置边框 |
| width | Npx、N% | 表格宽度 |
| bgcolor | 颜色值 | 表格背景 |
| align | left、center、right | 表格在文档中的对齐方式 |
| valign | bottom、middle、top | 三种垂直对齐方式 |
15、表单
表单，用于收集用户信息，进行人机交互操作
表单的创建：<form action="save.php" method="post"></form>
包含元素：文本框、单选按钮、列表框、图片框、复选框等，这些元素统称为“控件”
使用type属性值被设置为text的<input>元素可以创建单行文本框，它是一个单标签:<input type="text">
value属性表示已经填好的值，placeholder属性表示提示文本，将以浅色文字写在文本框中，并不是文本框中的值。disabled属性表示用户不能与元素交互，即“锁死”。
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" name="firstname" placeholder="请输入姓名"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br>
<label>
<input type="radio" name="sex" checked>男</label>
<label>
<input type="radio" name="sex">女</label>
<br>
爱好<br>
<input type="password" name="password" placeholder="password"></label><br>
<!--下拉菜单-->
<div>地址：
<select>
<option value="guangdong">广东</option>
<option value="fujian">福建</option>
<option value="guangxi">广西</option>
</select>
</div>
爱好：
<!--复选框 -->
<label>
<input type="checkbox" name="hobby" value="youyong">游泳</label>
<label>
<input type="checkbox" name="hobby" value="lanqiu">篮球</label>
<label>
<input type="checkbox" name="hobby" value="zuqiu">足球</label>
<label>
<input type="checkbox" name="hobby" value="yumaoqiu">羽毛球</label><br>
<textarea placeholder="说明："></textarea>
<br>
<input type="submit" value="Submit">
</form>
<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>
</body>
</html>
input类型总结
| type属性值 | 按钮种类 |
| text | 单行文本框 |
| radio | 单选按钮 |
| checkbox | 多选按钮 |
| password | 密码框 |
| button | 普通按钮，可以简写为<button></button> |
| submit | 提交按钮 |
| reset | 重置按钮 |
HTML5新增表单控件
| type属性值 | 控件 |
| color | 颜色选择控件 |
| date、time | 日期、时间选择控件 |
| 电子邮件输入控件 | |
| file | 文件选择控件 |
| number | 数字输入控件 |
| range | 拖拽条 |
| search | 搜索框 |
| url | 网址输入控件 |
<datalist>控件：<datalist>控件可以为输入框提供一些备选项，当用户输 入的内容与备选项文字相同时，将会显示智能感应。
控件的常用属性
| 属性 | 作用 |
| name | 指定控件的名称，可重复 |
| id | 指定标签的唯一标识 |
| value | 输入（收集、设置）控件的值 |
| checked | 复选框（单选）组默认被选中的项目 |
| selected | 列表框组默认被选中的项目 |
| src | 图片框的图片来源 |
| onclick | 鼠标单击事件 |
| disabled | 禁用该控件 |
| multiple | 允许多选（适合普通列表框） |
1180
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
