2HTML5快速入门
一、html骨架介绍：
title标签：
title就是在浏览器选项卡区域显示的文字。
在浏览器打开后：
二、HTML基本语法
标签：
-
标签名必须要书写在一对尖括号<>内部。
-
标签分为单标签和双标签，双标签必须成对出现，有开始标签和结束标签。
单标签<img/>
-
结束标签必须有关闭符号/。
-
根据标签内部存放的内容不同，将不同的标签划分为两个级别。
根据标签的种类区分两个等级，分别是容器级和文本级。
容器级:元素内部除了可以存放文本之外，还可以嵌套标签。
文本级：元素内部只能存放文本或者文本级标签。
|
容器级 |
文本级 |
|
div，ul,li,h1-h6 |
span,img,i |
标签属性：
书写位置：在开始标签或单标签的标签名后面，添加一个空格，空格后面书写属性。
标签之间对空白换行缩进不敏感
在上传代码过程中，为了提高传输速度，可以将代码进行压缩，删除多余空白，目的就是压缩文件的大小。
空白折叠现象：
在普通文字之间，如果有空格、换行、缩进导致的空白，在浏览器中加载时会被折叠成一个空白显示。
如果想在浏览器中正常显示空白，需要：
空格：在代码中书写 ；替换空格。
换行：用br单标签。
三、HTML常见标签：
h1-h6：
书上标签：
<header>定义文档的页眉
<header>
<h1>
深圳职业技术学院
</h1>
<p>发布时间：2022-2-16</p>
<p>深圳职业技术学院是一个美丽的地方</p>
</header>
<nav>
<header>
<nav>
<!--<a>标签的href属性用于指定超链接目标的URL-->
<p><a href="http://www.baidu.com">该文本</a>是一个指向万维网页面的链接</p>
<p><a href="#">本文本</a>是一个指向页面中的锚，表示回到最顶部。如果当前页面中需要滚动的话，这种方式可以直接回到顶部</p>
<p><a href="#$$$">该文本</a>是指向一个不存在的导航地址。根据网页的报错机制，浏览器找不到就不做处理，但从浏览器导航栏可以看到链接已改变</p>
</nav>
</header>
<section>和<article>
<section>
<h2>深信院2018招生简章</h2>
<p>section元素代表文档的内容段落，每一行段落前后都有关联性</p>
</section>
<section>
<h2>深信院2018软件学院招生计划</h2>
<p>关于XXX学院招生</p>
</section>
<footer>定义文档的页脚
<section>
<header>
<h1>Html5基本标签的使用-footer</h1>
</header>
</section>
<section>
<h2>深信院2018 招生简章</h2>
<p>section元素代表文档的内容段落，每一行段落前后都有关联性</p>
</section>
<section>
<h2>深信院2018软件学院招生计划</h2>
<p>关于XXX学院招生</p>
</section>
<p>中文意思是：“footer元素代表了页面内容或者区域内容最底端的展示。一个典型的例子是包含了作者信息、文档链接或者是版权信息等。”</p>
<p>深圳职业技术学院是一个环境优美的地方</p>
<p>深圳职业技术学院<span>是一个环境优美的地方</span></p>
<section >
<footer>
<p>by sziit.cn</p>
</footer>
</section>
注释快捷键：ctrl+/
<a>标签：
作用：在指定位置添加超链接，从而实现对应的跳转。
href属性
相对路径跳转，跳转本地文件
在同一目录下
target属性：
新建一个标签页跳转
（1）title属性
title属性给出链接的说明信息。鼠标悬停在链接上方时，浏览器会将这个属性的值，以提示块的形式显示出来。
<a
href="https://www.example.com/"
title="hello"
>示例</a>。
在<img>中一样适用
（2）list-style属性：
list-style: none; 取消列表默认点
text-decoration:none;也能实现同样效果。取消<a>标签链接的默认下划线
2.锚点的使用
方法一：设置一个空锚点，然后给这个空锚点设置一个name属性值和锚点的href属性是一样的。
href属性里加“#”是跳转锚点的标识。
方法二：id 属性
这种方式就不用<a>标签
布局标签<div>和<span>（盒子）
<span>和<p>
<p>段隔符
<span>：小区域小跨度
<div>：分割跨度大跨度
div是跨度布局分割，span是文字分割
span通常用在小跨度的地方区分
四、列表
<ul>和<li>标签：
-
无序列表：作用定义一个没有顺序的列表结构
ul：无序列表
li：列表项
ul内部嵌套li
ul标签内部只能嵌套li，li标签内部可以嵌套任何标签，甚至是ul标签。
ul和li都是容器级标签
列表项之前的前缀样式是由CSS去控制的。
2.有序列表
ol，li
ol：（order list）有序列表
li:（list item）列表项
使用规则与ul和li一样
应用：
百度新闻网页无序列表
同时按下ctrl+shift+I，或右键->检查
音乐网站排行榜用ol有序列表
3.定义列表
列表结构：标题加内容自定义
组成标签：dl、dt、dd
dl：defintion list表示创建一个自定义列表结构
dt：defintion term,定义主题，表示一个列表的主题
dd：defintion description定义解释项
dl内部存放dt和dd，dt和dd是同级关系。
可以有多个解释项：
<dd>和<dt>都是容器级标签，内部可以存放其他标签
优点：让结构清晰
五、<img>HTML 图像- Alt属性
在 HTML 中，图像由 img 标签定义。
img 是空标签；空标签的含义「只包含属性，没有闭合标签」
在页面上插入图像，需要使用源属性 src ，指 "source"
源属性的值是图像的 URL 地址
<img src="url" alt="一些描述">
alt 属性用来为图像定义一串预备的可替换的文本，替换文本属性的值是用户定义的。
在浏览器无法载入图像时，替换文本属性告诉读者图片中代表的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好地显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
可为图片设置 height（高度） 与 width（宽度）
这俩个属性值默认单位为像素 px
指定图像的高度和宽度是一个很好的习惯，如果图像指定了高度宽度，页面加载时就会保留指定的尺寸，如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。
给图像一个链接。通过给img图像标签一个a标签，可以实现当点击图片时跳转到另一个网页。下面代码实现了点击图片时，跳转到百度主页。
https://jingyan.baidu.com/article/6f2f55a105e321b5b93e6c11.html
src=“/f.jpg”。这种写法的意思是告诉浏览器，在我当前的站点名下，访问此地址，那么就是：http://localhost/f.jpg。
1、*html文件跟*.jpg文件(f盘)在不同目录下：
<img src="file:///f:/*.jpg" width="300" height="120"/>
2、*.html文件跟*.jpg图片在相同目录下：
<img src=".*.jpg" width="300" height="120"/>;
4、如果图片来源于网络，那么写绝对路径：
<img src="http://image.baidu.com/pcindexhot"/width="300" height="120"/>
（二）相对路径和绝对路径:
相对路径：从html文件出发,找到对应图片位置的路径。
如果进入某个文件夹使用'/'，如果出某个文件夹使用'../'
出文件夹：图片在文件外部
html文件在文件夹“file”内，图片在外面
如果要出多级文件夹，就多加'../'，
如 <img src="../../2.jpg">
多一级就多个../
进文件夹
<img src="2-1/3-2/3cc.jpg" width="500" height="420" />
绝对路径：盘符地址和网站地址。
盘符地址工作中不推荐使用这种路径，因为每个人目录不一样。
3.title属性
html5之div标签、img标签、video标签
https://mp.weixin.qq.com/s/oYtLv1lkDcfacC8uHlqdIQ
