0.HTML自己学习网址

1.什么是HTML

2.HTML的作用

3.HTML版本

4.h5和h4的区别

4.1 简化的语法

4.2 新的canvas标记代替flash

4.3 新的header与footer标记

4.4 新的section与article标记

4.5 新的audio与video标记

5.HTML的标准结构

6.IDE介绍

7.HbuilderX介绍

8.HTML基本结构

8.1 HTML文档基本结构

8.2 head中常用标签

8.3 body中常用标签

8.4 格式化标签

8.5 字符实体

9.超链接和多媒体标签

9.1 超链接标签a

9.1.1 基本使用

9.1.2 设置锚点

9.2 图片标签img

9.3 音频标签audio和视频标签video

10.列表标签

10.1 有序列表ol

10.2 无序列表ul

10.3 自定义列表dl

10.4 列表嵌套

11.表格标签table

11.1 表格特点

11.2 thead tbody tfoot th

11.3 单元格合并

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。

安装参考链接：(1条消息) HBuilder安装教程_一个匿名游客的博客-CSDN博客_hbuilder安装教程

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标签之间有段间距。
属性换行标签： eg:我 爱 你 ;
br*50再按下tab键一下子50个 标签
一个空格： 
&nbsp;&nbsp;我爱你！ &nbsp;&nbsp;&nbsp;&nbsp;我想你！ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我喜欢你！ 
预文本标签【了解，不建议用】：<pre>。。。</pre> 作用会按照我们自己写的格式原封不动的输出到浏览器识别我们的动作，比如手动换行，而不是像p标签那样需要添加一个 。
因为该标签太灵活了，所以我们开发人员不使用该标签。

8.4 格式化标签

这些小标签都不会自动换行。需要在外面手动加换行标签 。

这些标签可以组合嵌套使用。

w3school在线文档：https://www.w3school.com.cn/

文档地址：https://www.w3school.com.cn/html/html_formatting.asp

加粗标签：。。。 或者 。。。
变大变小标签：<big>。。。</big> 和 。。。
斜体标签：。。。 或者。。。
区别：i标签不能加属性，em可以
下划线标签：<ins>。。。</ins>
删除线标签：<del>。。。/del>
下角标标签：log10(100)==2 
上角标标签：e2
字体属性：。。。==》已经过时，以后用span标签
大小：size='6'
颜色：color='。。。'
风格样式：face='仿宋'/'幼圆'/'楷体'
eg：
HTML好简单

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'>&yen;579.00</font>&nbsp;&nbsp;&nbsp;<i><del><font color='gray'>&yen;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'

简单展示如下：