Html学习笔记
注意：网页中HTML主要负责网页的结构，所以我们在使用HTML标签上时，更应该关注于标签的语义而不是它的样式。
文档结构
文档声明
为了声明当前网页使用的版本，例如：<!Doctype HTML>即标识网页为HTML5版本的网页。
头部head
其内容不会在网页中直接出现，主要帮助浏览器和搜索引擎解析网页。
- 其中可用标签
<meta>：用于设置网页的元数据，如网页摘要、字符集、关键字，也可以对网页进行重定向<title></title>：其中内容会显示在浏览器的标题栏，搜索引擎会依据其中内容来判断网页的主要内容
身体body
其中包含文档的所有内容
字符编码
编码
将二进制转换为字符
解码
将字符转换为二进制
字符集
编码和解码应用的规则
- 常见的字符集如下：
- ASCLL
- GB2312
- GBK
- UTF-8(最常用)
乱码
编码和解码所采用的字符集不一致
实体
作用：将一些无法直接书写的特殊符号使用通过实体的方式在网页中展示出来
- 实体的名字
- 空格 —>
- 大于 —>
>
- 空格 —>
标签(只关注它的语义而不关注它的样式)
- A类：块元素（可设置宽高、宽度默认与父级元素相同）
<h1>~<h6>：标题标签<hgroup>：标题组标签<p>：段落标签<blockquote>：长引用<br>：换行<header>：某一区块的头部<footer>：某一区块的底部<main>：网页的主体部分(每个网页中一般都只设置一个)<nav>：网页的导航<aside>：定义article以外的内容且与 article 的内容相关<section>：当上面的标签都无法使用时<div>：无语义，表示一个区块，目前最常使用的布局标签
- A类：行内元素（不可设置宽高、宽高默认包裹其内容）
<em>：表示语音语调的一个加重<strong>：表示对内容的一个强调<q>：短引用<span>：无语义，一般用于选中指定文本<a>：超链接href：规定链接指向的页面的URL#：锚URL，回到本页面的顶部#id值：锚URL，回到本页面指定id位置../xxx/xxx.html：相对URL，指向站点内的某个文件../xxx.html：链接到本页面上一级目录中的指定页面
- B类：替换元素(浏览器根据其标签的元素属性来判断显示具体的内容的元素，且元素一般拥有固定的尺寸)
<iframe>：用于向当前页面中引入一个其他页面<audio>：向页面中引入一个外部的音频文件<video>：向网页中引入一个视频<img>: 向当前页面中引入一个外部图片-
src：指定外部图片的路径 -
width&height：指定图片的宽高，若只指定其中一个属性，那另一个属性会等比例变化 -
alt：用文字替代图片作用，有些浏览器在图片无法加载时显示该描述，搜索引擎也会根据其属性值来识别该图片 -
title：对图片提供格外的补充说明信息，当鼠标移到该图片上时会显示title内容 -
补充：
- 图片的格式
格式名 颜色 透明效果 动图 兼容性 jpeg(jpg) 丰富 不支持 不支持 较好 gif 单一 支持简单透明 支持 较好 png 丰富 支持复杂透明 不支持 较好 webp 丰富 支持复杂透明 支持 较差 - 图片的使用规则：效果一样时，用内存小的；效果不同时，用效果好的
- base64：将图片进行编码，通过字符的形式来引入图片，可以使图片与网页一起加载
-
- B类：非替换元素（html中大多数都是非替换元素，他们直接将内容告诉浏览器，直接显示出来）
注意：
-
在网页中一般使用块元素来进行布局，一般来说块元素什么都能放，但需注意p标签内不能放置块元素；
-
行内元素主要用来包裹文字，一般不用其包裹块元素,但有一例外就是a标签，其中可以放除它自身以外的任一元素；
-
浏览器在解析网页时会自动对网页中不符合规范的内容进行修正。
列表
有序列表
<ol>
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ol>
无序列表
<ul>
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ul>
自定义列表
<dl>
<dt>Coffee</dt> //自定义列表项
<dd>Black hot drink</dd> //自定义列表项的定义
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
注意：
所有列表都可以互相嵌套使用
904
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
