目录
（1）标题标签：h1-h6数字越小文字会越大，这个标签会占一整行
（4）段落标签：这个标签既有换行的功能，又有对行距调整的功能
（3）em标签：将标签内的内容倾斜，带有语义，也就是当读这个标签中的内容的时候，会带有语气
（4）strong标签：将标签内的内容加粗，带有语义，也就是当读这个标签中的内容的时候，会带有语气
一、HTML基础
1.什么是HTML
（1）HTML全称为超文本标记语言，是一种标记语言，它是由一堆标签组成的。
（2）超文本：就是超越文本的一些东西，如：图片，音频，视频等等。
（3）标记语言：通过一组标签来对内容进行描述。
- 标签分为：
- 成对出现的标签：<关键字></关键字>
- 单个出现的标签：<关键字/>
- 注意：成对出现的标签中间可以写文字或媒体信息，但是单个出现的标签不可以
2.常用标签
（1）标题标签：h1-h6数字越小文字会越大，这个标签会占一整行
- 格式：<h3>文本信息</h3>
-
<h3>横渠四句</h3>
（2）加粗标签：<b></b>
<b>--张载</b>（3）换行标签：<br/>
为天地立心，为生民立命，为往圣继绝学，为万世开太平。<br/>（4）段落标签：这个标签既有换行的功能，又有对行距调整的功能
- 格式：<p></p>
-
<p>为天地立心，为生民立命，为往圣继绝学，为万世开太平。</p>
（5）倾斜标签：将标签中的内容倾斜
- 格式：<i></i>
-
<i>--张载</i>
（6）水平线：显示一条水平线
- 格式：<hr/>
-
为天地立心，为生民立命，为往圣继绝学，为万世开太平。 <hr/> 为天地立心，为生民立命，为往圣继绝学，为万世开太平。
（7）标签的嵌套
<b><i>--张载</i></b>（8）HTML的注释：<!--要注释的内容-->
<meta charset="utf-8" /> <!-- 用来描述网页的属性：当前网页的编码格式 -->3.HTML标准格式
（1）<!DOCTYPE html>：文档的描述，代表此文档使用的是html5技术
（2）<html></html>：根标签
（3）<head></head>：头标签，这里放的是对网页的一些描述信息及外连接
- head里面的标签有：meta，js，link
（4）<body></body>：体标签，这里放到东西都会在网页上显示
- body里面的标签有：b，p，h3，img等等
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>4.标签扩展
（1）meta标签：
- 格式：<meta/>
- 属性：
- <meta name="keywords"/>：keywords代表关键字，用于浏览器的分类，也就是用来解释这个网站是干什么的，帮助在搜索引擎中分类收录的
-
<meta name="keywords" content="新浪,新浪网,SINA,sina,sina.com.cn,新浪首页,门户,资讯" /> - <meta name="description"/>：description用来描述当前网页的主体内容涉及范围，帮助在搜索引擎中分类收录的
-
<meta name="description" content="新浪网为全球用户24小时提供全面及时的中文资讯，内容覆盖国内外突发新闻事件、体坛赛事、娱乐时尚、产业资讯、实用信息等，设有新闻、体育、娱乐、财经、科技、房产、汽车等30多个内容频道，同时开设博客、视频、论坛等自由互动交流空间。" />
（2）font标签：
- 格式：<font></font>
- 属性：
- <font color="red"></font>：color用来改变字体颜色
-
<font color="red">产品、服务、运营、集成能力</font>
（3）em标签：将标签内的内容倾斜，带有语义，也就是当读这个标签中的内容的时候，会带有语气
- 格式：<em></em>
-
<em>新业务</em>
（4）strong标签：将标签内的内容加粗，带有语义，也就是当读这个标签中的内容的时候，会带有语气
- 格式：<strong></strong>
-
<strong>集成能力</strong>
（5）img标签：图片标签
- 格式：<img/>
- 属性：
- width：图片的宽度
- height：图片的高度
- src：图片的所在路径
- ./代表当前目录，这个./可以省略不写
- ../代表上一层目录
-
<img src="../img/bb/3.png" /> - ../../代表上上一层目录
-
<img src="../../img/1.png" />
- alt：加载图片失败时提示的内容
- 注意：width和height如果只写一个，那么另一个会按图片的宽高比自动缩放
- 案例：
-
<img src="img/1.png" width="500px" height="500px" alt="图片不存在" /> <!-- px代表像素 -->
（6）a标签：链接标签
- 格式：<a></a>
- 属性：
- href：存放链接地址，也就是URL
-
<a href="http://www.baidu.com" >百度</a> - target：限制点击链接后网页出现的形式
- _blank：在新的窗口打开链接
-
<a href="http://www.baidu.com" target="_blank">百度</a> - _self：在当前窗口打开链接（默认）
-
<a href="http://www.sina.com.cn" target="_self">新浪</a> - _parent：在当前页面的父窗口打开
-
<a href="http://www.taobao.com" target="_parent">淘宝</a>
- 图片链接：就是在a标签中嵌套一个img标签
-
<a href="https://www.autohome.com.cn" target="_blank"> <img src="./img/1.png" width="100px" alt="图片加载中" /> </a>
二、HTML进阶
1.列表标签
（1）无序列表
- 格式：\<ul>\<li>\</li>\</ul>
- 其中ul是外层标签，li是内层子标签，一个ul标签中可以有多个li标签
- 快捷方式：
- 如创建2个：ul>li*2，写完之后按tab键
- 案例：
-
<ul> <li>内蒙古</li> <li>杭州</li> <li>苏州</li> </ul>
（2）有序列表
- 格式：\<ol>\<li>\</li>\</ol>
- 其中ol是外层标签，li是内层子标签，一个ol标签中可以有多个li标签
- 快捷方式：
- 如创建3个：ol>li*3，写完之后按tab键
- 案例：
-
<ol> <li>北京</li> <li>上海</li> <li>广州</li> <li>深圳</li> </ol> - 列表超链接：就是在子标签中放入一个超链接
-
<ol> <li><a href="http://www.baidu.com">百度</a></li> <li><a href="http://www.taobao.com">淘宝</a></li> <li><a href="http://www.qq.com">腾讯</a></li> <li><a href="http://www.jd.com">京东</a></li> </ol>
2.分层标签
（1）格式：<dt><dl></dl><dd></dd><dd></dd></dt>
（2）其中dt是外层标签，dl是内层父标签，dd是内层子标签；在一个dt标签中，一个dl父标签会对应多个dd子标签，可以有多个dl标签和dd标签的对应关系
（3）案例：
<dt>
<dl>水果</dl>
<dd>香蕉</dd>
<dd>草莓</dd>
<dd>葡萄</dd>
<dl>技能</dl>
<dd>Java</dd>
<dd>HTML</dd>
</dt>3.音频标签
（1）方法一：使用embed标签
- 格式：<embed></embed>
- 属性：
- 音频地址：src="url"
- 音频播放器的高度：height="100px"
- 音频播放器的宽度：width="100px"
- 案例：
-
<!-- 引入音频播放器 --> <embed src="audio/白月光和朱砂痣.mp3" height="100px" width="500px"></embed>
（2）方法二：使用audio标签
- 格式：<audio></audio>
- 属性：
- 音频地址：src="url"
- 音频控制器：controls="controls"
- 自动播放：autoplay="autoplay"
- 注意：audio标签中如果没有controls属性的话，就不会显示控制器，controls属性和autoplay属性的值都是固定的
- 案例：
-
<audio src="audio/白月光和朱砂痣.mp3" controls="controls" autoplay="autoplay"></audio>
4.视频标签
（1）方法一：使用embed标签
- 格式：\<embed>\</embed>
- 属性：
- 视频地址：src="url"
- 视频播放器的高度：height="100px"
- 视频播放器的宽度：width="100px"
- 案例：
-
<embed src="video/歆甜-岁岁常欢愉，年年皆胜意(超清).mp4" height="100px" width="500px"></embed>
（2）方法二：使用video标签
- 格式：<video></video>
- 属性：
- 宽度：width="100px"
- 高度：height="100px"
- 控制器：controls="controls"
- 子标签source
- 格式：<source></source>
- 属性：
- 文件地址：src="url"
- 文件类型：type="video/mp4"
- 案例：
-
<!-- 视频支持mp4/ogg/webm/swf格式 --> <video height="400px" width="300px" controls="controls"> <source src="video/画离弦.mp4" type="video/mp4"></source> <source src="movie.ogg" type="video/ogg"></source> <source src="movie.webm" type="video/webm"></source> <!-- 下面是支持flash格式的视频 --> <object data="movie.mp4" width="320" height="240"> <embed src="movie.swf" width="320" height="240"></embed> </object> </video>
5.表格标签
（1）格式：<table><tr><td></td></tr></table>
（2）<table></table>标签是表格标签，属性如下：
- 表格的高度：height
- 表格的宽度：width
- 表格的边界线条的宽度：border
- 表格的背景颜色：bgcolor
- 表格的背景图片：background
- 表格的对齐方式：align
（3）<tr></tr>标签是行标签，属性如下：
- 一行中每个单元格中的元素的对齐方式：align
- 设置一行中每个单元的背景色：bgcolor
（4）<td></td>标签是列标签，属性如下：
- 控制单个单元中的元素的对齐方式：align
- 合并列单元格：colspan
- 注意：
- 在合并完单元格后要将被合并的单元格删除
- 列合并是从左到右，不能反过来
- 注意：
- 合并行单元格：rowspan
- 注意：
- 在合并完单元格后要将被合并的单元格删除
- 行合并是从上到下，不能反过来
- 注意：
- 设置单个单元格的背景色：bgcolor
- 设置单个单元格的背景图片：background
（5）案例：
<table border="1px" height="200px" width="300px" align="center" background="img/1.png">
<!-- 合并要求：
1.行合并->从上到下
2.列合并->从左到右 -->
<tr align="center" > <!-- 表格的行标签 -->
<td colspan="3" background="img/2.png">11</td> <!-- 表格的列标签 -->
<td rowspan="4">14</td>
</tr>
<tr align="center" bgcolor="red"> <!-- 表格的行标签 -->
<td colspan="2">21</td> <!-- 表格的列标签 -->
<td bgcolor="white">23</td>
</tr>
<tr align="center"> <!-- 表格的行标签 -->
<td>31</td> <!-- 表格的列标签 -->
<td>32</td>
<td rowspan="2">33</td>
</tr>
<tr align="center"> <!-- 表格的行标签 -->
<td>41</td> <!-- 表格的列标签 -->
<td>
<a href="http://www.baidu.com">百度</a>
</td>
</tr>
</table>6.表格的嵌套
（1）案例：
<table border="1px" height="400px" width="500px" align="center">
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td rowspan="3" colspan="2">
<!-- 表格中嵌套一个表格 -->
<table border="1px" width="100px" height="100px" align="center">
<tr>
<td>6</td>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
<td>6</td>
</tr>
</table>
</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td>34</td>
</tr>
<tr>
<td>41</td>
<td>44</td>
</tr>
<tr>
<td>51</td>
<td>52</td>
<td>53</td>
<td>54</td>
</tr>
</table>7.表单标签
（1）格式：<form><input /></form>
（2）form是表单标签，属性为：
- 表单提交的地址：action
- 表示表单提交的数据到的目的地
- 表单提交的方式：method
- get方式：get提交的数据会出现在地址栏中，一般针对没有安全要求的数据，提交的数据量是有限的，一般1M左右，默认的提交方式是get
- post方式：post提交的数据不会出现在地址栏中，一般针对有一点安全要求的数据，数据会出现在请求体中，提交的数据量没有限制，可以是无限的，一般上传文件使用这种方式
（3）input是输入框标签，属性为：
- 输入框的类型：type，下列为type的值
- 文本类型：text
- 提交按钮：submit
- 密码类型：password
- 单选类型：radio
- 多个单选类型的标签中name属性的值必须一样；
- 如果要将某个单选设置为默认，需要在这个单选所属的input标签中加入checked属性；
- 因为单选是没办法输入内容的，所以需要将你要提交的内容放到value属性中；
- 上传文件类型：file
- 日期类型：date
- 隐藏类型：hidden
- 隐藏域中要提交的内容不会在网页上显示；
- 多选类型：checkbox
- 多个多选类型的标签中name属性的值必须一样；
- 如果要将一个或多个多选选项设置为默认，需要在这个选项所属的input标签中加入checked属性；
- 因为多选是没办法输入内容的，所以需要将你要提交的内容放到value属性中；
- 按钮：
- submit：提交按钮
- button：普通按钮
- 普通按钮是用来配合事件使用的
- reset：重置按钮
- 案例：
-
<form> <input type="submit" value="提交" /> <!-- 提交按钮 --> <input type="button" value="普通按钮" /> <input type="reset" value="重置" /> </form>
- 输入框的值：value
- 注意：有些输入框类型是不需要写value的，比如：文本，密码等等；而有些输入框是需要写value的，比如：单选，多选等等；value是向表单中设置值的，如果将文本，密码这样输入类型的输入框写上value的话，会在输入框中显示一个默认值；
- 输入框的key：name
- 注意：通过name可以获取value中保存的数据，或者是输入框中输入的数据，如果没有这个name，那么就不会提交当前输入框中的数据；
- 输入框内显示提示信息：placeholder
- 将某个单选设置为默认：checked="checked"
- 注意：checked的值是固定的
（4）select是下拉列表标签：
- 格式：<form><select><option></option></select></form>
- select标签的属性：
- name：通过name属性的值可以获取到option子标签的value属性中保存的值，name代表select标签的key
- option是select标签的子标签，代表下拉列表中的选项
- option子标签的属性：
- value：代表这个子标签要提交的值
（5）案例：
<h3>表单学习</h3> <hr />
<!-- 表单标签；method="get"：表单的提交方法，如果不写，默认是get
get提交数据的方式：get提交的数据会出现在地址栏中，一般针对没有安全要求的数据，提交的数据量是有限的，一般1M左右，数据量的大小是根据浏览器的类型决定的
post提交数据的方式：post提交的数据不会出现在地址栏中，一般针对有一点安全要求的数据，数据会出现在请求体中，提交的数据量没有限制，可以是无限的，一般上传文件使用这种方式
action：表示表单提交的数据到的目的地
-->
<form action="#" method="get">
用户名：<input type="text" name="wd" placeholder="请输入不少于6个字符" /> <br />
<!-- 输入框标签
name属性中的值是表单提交指定的key，这个name属性一定要有，否则不会提交当前输入框中的数据
-->
用户密码：<input type="password" name="pwd1" placeholder="请输入不少于8个字符" /> <br />
确认密码：<input type="password" name="pwd2" placeholder="请输入不少于8个字符" />
<br />
性别：<br />
男<input type="radio" name="sex" value="男" checked="checked" />
女<input type="radio" name="sex" value="女"/><br />
<select name="city">
<option value="beijin">北京</option>
<option value="shanghai">上海</option>
</select> <br />
上传文件：<input type="file" name="photo" /><br />
出生年月日：<input type="date" name="birthday" /><br />
<input type="hidden" name="abc" value="不可告人的数据" /> <!-- 只用来提交数据，不会显示在网页上 -->
<br />
爱好：<br />
足球<input type="checkbox" name="hobby" value="足球" checked="checked" />
篮球<input type="checkbox" name="hobby" value="篮球" checked="checked" />
乒乓球<input type="checkbox" name="hobby" value="乒乓球" />
<br />
<input type="submit" value="提交" /> <!-- 按钮 -->
</form>8. 框架标签
（1）格式：<frameset><frame /></frameset>
- 注意：
- 使用了frameset就必须将body删掉，否则页面会有问题，也就是要用frameset去代替body；
- frameset标签可以嵌套使用，如果分了多个区域，那么需要对这多个区域中的每个区域进行单独操作；如：分了2个区域之后，如果想要将这两个区分别再次分区，那么需要写两个frameset标签，如果只是想分其中一个，那么只要写一个frameset标签就可以了。frameset只是用来分区的，想要向分好的区域中放入内容，需要使用frame子标签；
（2）属性：
- cols：分列，多个列使用逗号隔开，可以使用*来代替全部区域，如果前面已经使用了一些区域，那么*代替的就是剩余的全部区域；
- 分列就是竖的分
- rows：分行，多个行使用逗号隔开，可以使用*来代替全部区域，如果前面已经使用了一些区域，那么*代替的就是剩余的全部区域；
- 分行就是横的分
（3）子标签frame
- 格式：<frame />
- frame标签是用来将一个写好的html文件放入到已经分好的区域中
- 属性：
- src：引入的html文件路径
- name：指定框架的名称
- target：跳转到页面
（4）案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>后台管理页面中</title>
</head>
<frameset cols="30%,*">
<frameset rows="30%,*">
<frame src="top.html" />
<frame src="bottom.html" />
</frameset>
<frame src="main.html" name="main" />
</frameset>
</html>
扫一扫
1075
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
