目录
0.HTML自己学习网址
在线帮助文档：https://www.w3school.com.cn/
查看全部标签地址：https://www.w3school.com.cn/tags/index.asp
1.什么是HTML
2.HTML的作用
3.HTML版本
4.h5和h4的区别
4.1 简化的语法
h5语法更加简单。
4.2 新的canvas标记代替flash
4.3 新的header与footer标记
4.4 新的section与article标记
4.5 新的audio与video标记
5.HTML的标准结构
开始写代码：
HTML语法不严格：
6.IDE介绍
我们使用的是HbuilderX。
7.HbuilderX介绍
新建项目：
8.HTML基本结构
8.1 HTML文档基本结构
- 注释：ctrl+shift+斜杠 <!-- -->
- 和浏览器之间的配置信息需要写到head中。
- <meta charset='utf-8'> 告诉浏览器按照utf-8(中文编码)的编码解析该网页。
- <title>nice</title> 网页的名字叫nice。
- <body>hello 张梦姣</body> 展示给用户的内容。
- 【总之一句话，想告诉浏览的放入head中，想告诉用户的放到body中】
8.2 head中常用标签
- <标签中的属性 属性名='值'>
- 设置网页的解析字符：<meta charset='utf-8'>
- 提升网页的搜索效率的标签：
- 设置网页的关键字：<meta name='keywords' content='关键字1,关键字2'/>
- 设置网页内容的描述：<meta name='description' content='。。。'>
- 设置网页的作者：<meta name='author' content='。。。'>
- 设置n秒后自动跳到指定界面：
<meta http-equiv='refresh' content='5;http://www.baidu.com'/>
8.3 body中常用标签
- 标题标签hn[1-6]：<h1>。。。</h1>数字越大,等级越小（粗细 黑度 大小)；自动换行。
- 对齐方式：align='center'/'left'/'right'
- 分割线：<hr/> ==》单标签
- 属性大小：<hr size='400px' width="400px"/> size指垂直像素大小,width指水平。
- 对齐方式：align=‘left'/'right'/'center'
- 颜色[英文,RGB(),RGBA()透明度,#B0B0B0]：color=’red'
- 段落标签：<p>。。。</p> 不会自动换行；两个p标签之间有段间距。
- 属性换行标签：<br/> eg:<p>我<br />爱<br />你</p> ;
br*50再按下tab键一下子50个<br/>标签- 一个空格：
<p> 我爱你！<br /> 我想你！<br /> 我喜欢你！<br /></p>
- 预文本标签【了解，不建议用】：<pre>。。。</pre> 作用会按照我们自己写的格式原封不动的输出到浏览器 识别我们的动作，比如手动换行，而不是像p标签那样需要添加一个<br/>。
因为该标签太灵活了，所以我们开发人员不使用该标签。
8.4 格式化标签
这些小标签都不会自动换行。需要在外面手动加换行标签<br/>。
这些标签可以组合 嵌套使用。
w3school在线文档：https://www.w3school.com.cn/
文档地址：https://www.w3school.com.cn/html/html_formatting.asp
- 加粗标签：<b>。。。</b> 或者 <strong>。。。</strong>
- 变大变小标签：<big>。。。</big> 和 <small>。。。</small>
- 斜体标签：<i>。。。</i> 或者<em>。。。</em>
- 区别：i标签不能加属性，em可以
- 下划线标签：<ins>。。。</ins>
- 删除线标签：<del>。。。/del>
- 下角标标签：log<sub>10</sub>(100)==2<br />
- 上角标标签：e<sup>2</sup>
- 字体属性：<font 一堆属性值>。。。</font>==》 已经过时，以后用span标签
- 大小：size='6'
- 颜色：color='。。。'
- 风格样式：face='仿宋'/'幼圆'/'楷体'
- eg：
<font size='6' color='blue' face='楷体'>HTML好简单</font><br />
8.5 字符实体
字符实体查询地址： https://www.w3school.com.cn/html/html_entities.asp
9.超链接和多媒体标签
9.1 超链接标签a
<a href="http://www.bjsxt.com">北京尚学堂</a>
超链接作用：
- 进行页面之间的跳转。<a href='http://www.baidu.com' target='_blank'>百度</a>
- 进行锚点功能：可以快速的跳转到页面中的某一个位置。
- 同一个页面中的锚点：<a href='#bottom' name='top'>跳转到本页底部</a>
- 不同页面中的锚点：<a href='自定义.html#bottom'>外链接页面</a>
9.1.1 基本使用
9.1.2 设置锚点
9.2 图片标签img
img标签也不会自动换行；img标签可以结合超链接标签组合使用。
属性值：
- src：引入图片的路径{本地路径，网络路径（必须在联网状态下才可以加载出来）}。
- width/height：如果只给定其中一个属性，另外一个属性会进行等比例缩放；若都给，那各自设置。
- alt：图片加载失败时候显示的内容。
- title：鼠标悬停显示的文字
<!DOCTYPE html>
<html>
<body>
<hr/>
<h3 align='center'>图片</h3>
<!--
img标签也不会自动换行
src='引入图片的路径{本地路径，网络路径（必须在联网状态下才可以加载出来}'
-->
<img src="img/前端.png" width="400" alt='失败了' title="前端图片呀">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F8%2F5453005f74be2.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667192199&t=fa244b5414ca761f278a55a331ce86af" width="400px"> <!-- {网络路径} -->
<!-- 鼠标点击图片跳转链接 -->
<br>
<a href="http://www.baidu.com"><img src="img/百度.png" alt="百度.png加载失败了" width="400px" title="百度">/></a>
<hr />
</body>
</html>
9.3 音频标签audio和视频标签video
audio属性值：
- controls='controls'或者只写一个controls:音频播放控制栏，必须设置，否则没效果。
- loop：单曲循环
- autoplay：自动播放【谷歌不支持此属性】
- muted：默认静音
如果当前的属性值和名称是一样的，就可以只写一个就行。
video属性值：
- src：引入地址
- controls：播放控制栏
- width：宽度 height：高度
- loop：循环播放
- muted：静音播放
- autoplay：自动播放
- poster：视频播放前加载的图片
<html>
<body>
<hr />
<h3 align='center'>音频标签audio</h3>
<audio src="img/花之塔吉他版.mp3" controls='controls' loop></audio> <!-- controls：音频播放控制栏；loop：循环播放；autoplay:自动播放；muted:默认静音 -->
<h3 align='center'>视频标签video</h3>
<video src="img/花之塔吉他版.mp4" controls loop width="500" poster="img/花之塔.png"></video>
</body>
</html>10.列表标签
三大类：
- 有序列表‘(Ordered list)：ol
- 无序列表：ul
- 自定义列表：dl
10.1 有序列表ol
ol属性值：
- 指定序号类型：type='1 a A i I'
<ol type="i"> <li>张梦姣</li> <li>张梦姣</li> <li>张梦姣</li> </ol>
10.2 无序列表ul
ul属性值：
- type='circle'：空心圆
- type='dics'：实心圆【默认】
- type='square'：正方形
10.3 自定义列表dl
特点：
- 列表前面没有指定的标识
- 存放在dd中的内容会自动缩进
10.4 列表嵌套
有序ol和无序列表ul的使用场景：滑动门，导航栏，菜单展示...
自定义列表dl：
- dt：一般存放图片
- dd：一般存放文字
<dl>
<!-- dt存放图片，dd存放文字 -->
<dt>
<img width="450" src="https://img13.360buyimg.com/n7/jfs/t1/176264/30/24075/106271/62b41560Ea424f1b9/013168c3ed002d93.jpg" alt="手机图片加载失败" title="X13PRO">
</dt>
<dd>
<p>
<font size='6'><font color='red'>¥579.00</font>
<i><del><font color='gray'>¥779.00</font></del></i></font>
</p>
<p>新品多亲(QIN) F22 Pro防沉迷学生手机小爱同学初高中生<br>戒网瘾电话4G全网通智能触屏按键机4+64g铁灰色</p>
<p></p>
</dd>
</dl>
效果图：
11.表格标签table
11.1 表格特点
表格在数据展示方面非常简单，并且表现优秀，通过与CSS的结合，可以让数据变得更加美观和整齐。
table表格的基本语法：
- tr：代表的是行
- td/th：列
- th：标题列，自动加粗和居中
- td：普通列
table属性值：【后设置的覆盖先设置的】
- border：必须添加此属性才能显示表格。border='2px'
- 表格大小：可以设置到table后，也可以设置在tr和th后面【更灵活】
- width='300px' height='400px'
- 如果直接加到table上这个时候每一个单元格的大小会根据内容进行划分
- tr行高、th列宽：更灵活，分别设置
- 背景颜色：bgcolor=‘bisque'/'yellowgreen'/...
- 位置设置：align='center'/'left'/'right'
- 表格整体居中：属性align加到table后
- 单元格内容剧中：属性align加到tr或th后
- 单元格外框和内框的距离【外边距】：cellspacing='10px' 【只能加到table后】
- 内容和单元格内框的距离【内边距】：cellpadding=’5px'
简单展示如下：
快捷方式：>
table>tr>td 然后tab键 ==》一行一列
table>tr*4>th*3 然后tab键 ==》四行三列
11.2 thead tbody tfoot th
头 身体 脚：头和脚一样，身体很长。
好处：便于批量处理，这三个标签本身没有意义，只是为了把当前表格进行划分。
11.3 单元格合并
重要属性：
- rowspan=‘2’：合并2行
- colspan=‘3’：合并3列
- 一句话要点：合并哪些单元格，就在第一单元格前面加属性，并同时删去被合并的其他单元格，注意单元格宽和高。
727
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
