A02-HTML5入门

A02-HTML5入门
目录

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中。
- 告诉浏览器按照utf-8(中文编码)的编码解析该网页。
- nice 网页的名字叫nice。
- hello 张梦姣展示给用户的内容。
- 【总之一句话，想告诉浏览的放入head中，想告诉用户的放到body中】
8.2 head中常用标签
- <标签中的属性属性名='值'>
- 设置网页的解析字符：<meta charset='utf-8'>
- 提升网页的搜索效率的标签：
 设置网页的关键字：
 设置网页内容的描述：
 设置网页的作者：
- 设置n秒后自动跳到指定界面：
8.3 body中常用标签
- 标题标签hn[1-6]：
 。。。
 数字越大,等级越小（粗细黑度大小)；自动换行。
 对齐方式：align='center'/'left'/'right'
- 分割线：
 ==》单标签
 属性大小：
 size指垂直像素大小,width指水平。
 对齐方式：align=‘left'/'right'/'center'
 颜色[英文,RGB(),RGBA()透明度,#B0B0B0]：color=’red'
- 段落标签：
 。。。
 不会自动换行；两个p标签之间有段间距。
 属性换行标签：
 eg:
 我
 爱
 你
 ;
 br*50再按下tab键一下子50个
 标签
 一个空格：
  我爱你！ 我想你！ 我喜欢你！ p>
- 预文本标签【了解，不建议用】：
 。。。
 作用会按照我们自己写的格式原封不动的输出到浏览器识别我们的动作，比如手动换行，而不是像p标签那样需要添加一个
 。
 因为该标签太灵活了，所以我们开发人员不使用该标签。
8.4 格式化标签

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

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

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

文档地址：https://www.w3school.com.cn/html/html_formatting.asp
- 加粗标签：。。。 或者 。。。
- 变大变小标签：。。。和。。。
- 斜体标签：。。。 或者。。。
 区别：i标签不能加属性，em可以
- 下划线标签：。。。
- 删除线标签：~~。。。/del>~~
- 下角标标签：log₁₀(100)==2
- 上角标标签：e²
- 字体属性：。。。==》已经过时，以后用span标签
 大小：size='6'
 颜色：color='。。。'
 风格样式：face='仿宋'/'幼圆'/'楷体'
 eg：
 HTML好简单font> 
8.5 字符实体

字符实体查询地址： https://www.w3school.com.cn/html/html_entities.asp

9.超链接和多媒体标签

9.1 超链接标签a

北京尚学堂
超链接作用：
1. 进行页面之间的跳转。百度
2. 进行锚点功能：可以快速的跳转到页面中的某一个位置。
 同一个页面中的锚点：跳转到本页底部
 不同页面中的锚点：外链接页面
9.1.1 基本使用

9.1.2 设置锚点

9.2 图片标签img
img标签也不会自动换行；img标签可以结合超链接标签组合使用。

属性值：
- src：引入图片的路径{本地路径，网络路径（必须在联网状态下才可以加载出来）}。
- width/height：如果只给定其中一个属性，另外一个属性会进行等比例缩放；若都给，那各自设置。
- alt：图片加载失败时候显示的内容。
- title：鼠标悬停显示的文字
```
html>
<html>
	<body>
		<hr/>
		<h3 align='center'>图片h3>
		
		<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">		
		
		 
		<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'>音频标签audioh3>
		<audio src="img/花之塔吉他版.mp3" controls='controls' loop>audio>	
		<h3 align='center'>视频标签videoh3>
		<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>
		<img width="450" src="https://img13.360buyimg.com/n7/jfs/t1/176264/30/24075/106271/62b41560Ea424f1b9/013168c3ed002d93.jpg" alt="手机图片加载失败" title="X13PRO">
	dt>
	<dd>
		
			¥579.00font>   
			<del>¥779.00font>del>i>font>
		p>
		新品多亲(QIN) F22 Pro防沉迷学生手机小爱同学初高中生 戒网瘾电话4G全网通智能触屏按键机4+64g铁灰色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列
- 一句话要点：合并哪些单元格，就在第一单元格前面加属性，并同时删去被合并的其他单元格，注意单元格宽和高。
相关阅读:
vuepress 二十分钟快速搭建个人博客
 【复杂网络】网络的规律性研究笔记
 利用Python和Selenium编程，实现定时自动检索特定网页，发现特定网页内容发生变化后，向管理员发送提醒邮件（一)
基于计算机视觉的坑洼道路检测和识别-MathorCup A（深度学习版本）
[附源码]java毕业设计火车售票系统论文
 以赛促教，以赛促研 ——计算机科学系举办“火焰杯”软件测试开发选拔赛颁奖仪式
 Jenkins简介及Docker Compose部署
 arm-2d是个啥？初体验！
读书的风景
 linux 使用crontab 创建定时任务
原文地址：https://blog.csdn.net/m0_58086930/article/details/127129225

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 单元格合并