HTML基础知识-学习笔记
1、Html——超文本标记语言 HyperText Markup Language
概念：一个页面（网页）就是一篇文档，用于定义文档的内容结构（标题、图片、文字、段落等）。
1.1 html文档格式：.html 或 .htm
一个完整的文件由 index（文件名）.（分隔符）html（ 扩展名）组成。
1.2 Html基本模板书写：内容在body里面进行编辑；
<!DOCTYPE html>
<html lang="en">
<head>
<!--文档头，对当前页面的描述-->
<meta charset="UTF-8">
<!--指示页面，使用字符编码集UTF-8解析页面-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--既可以做标签也可以做属性-->
<title>Document</title>
</head>
<body>
<!--文档体，网页中所有可视内容全部放置在body中-->
</body><!DOCTYPE html>：定义文档类型，让浏览器用标准模式去解析（如不用就会使用怪异模式）。
↓
document-文档，type-类型
1.3 Html注释格式：<!-- -->
Html注释作用：用于描述代码功能 （浏览器解析时会进行忽略，开发者和维护人员可看）。
1.4 Html元素：是html文档的重要组成部分，一个html文档由大量元素组成
例：<h1>（开始标记）基础练习（元素内容）</h1>（结束标记）
拓展：操作h1-h6
h元素的数字越小，在页面上显示效果字越大
h元素的数字越大，在页面上显示效果字越小
a元素：
<a href="www.baidu.com" target="_self">立即加入</a>
<!-- 用户体验
target页面打开方式
_self当前窗口打开新页面
_blank新建一个窗口打开
-->
<a href="./page2.html" target="_blank">page2</a>
<a href="page3.html" target="_self">page3</a>
<!--锚点链接
操作步骤
1、添加a标签
2、添加跳转链接
3、给跳转标签添加id属性值
4、a标签添加href的值
跳转标签添加添加id属性值,前面加# -->
<a href="#maodian"></a>
<div id="maodian"></div>
<!--功能链接:mailto:邮箱地址、tel:电话号码-->
<a href="mailto:xxxx@outlook.com">给我发送邮件</a>
<a href="tel:xxx xxxx xxxx">给我打电话</a>a为标签名、元素名、标记名，这是一个超链接，href：属性名，＂www.baidu.com＂为属性值； href=＂www.baidu.com＂为属性：表示为元素添加额外的信息，用户点击后可跳转；立即加入：为元素内容，要在页面上显示的内容 。
标记名、属性、元素内容共同决定了一个元素的显示内容和行为。
空元素:没有元素内容、也没有结束标记。也称之为自闭合元素；
空元素的书写方式：
<标记名属性> or <标记名属性/>
src：提取图片位置，图片URL位置；
alt：图片替代文字，当图片URL位置不正确的时候，显示文字。
引用文本：
q标签： 小段引用；适用场景：名人名言； 自带样式：“ ”。
blockquote标签：大段引用；适用场景：引用整个文章或段落；自带样式：左侧缩进2字符。
cite元素： 引用参考文献；自带样式：斜体；既能当元素又能当属性，属性：表示引用源的地址。
（注：如果段落用cite，如果加强一段中的某几个字用i。）
abbr元素： 对缩写词的引用；适用场景：缩写词或专业术语；自带样式：下划线虚线。
强调文本：
strong标签-重要文本、b标签-突出显示。
——加粗文本(普通浏览器无区别，阅读浏览器strong标签会加重读音)
em标签-强调的文本、i标签-区别对待的文本。
——斜体(普通浏览器无区别，阅读浏览器em标签会加重读音)
无语意元素：
div： 表示页面中的一块区域，适用场景：划分区域；
span： 仅用于给一小段文本添加样式；
br： 空元素，换行；
空白折叠：一个空格、回车或多个空格、回车都会合并为一个空格、回车；↓
pre元素： 预格式化元素，会复制html代码到页面当中展示（保留文字在源代码中的格式）。
hr元素： 分割线。
实体字符：
书写格式：&npsp；“&”开始 ，“；”结束。在页面上实现特殊字符的。
1.5 元素的层次结构：一个元素的内容中可以包含其他元素，形成嵌套的层次结构，两个元素间不能相互嵌套；
若A元素直接包含B：则A为B的父元素，B为A的子元素
若两个元素有同一个父元素：它们互为兄弟元素
若A直接或间接包含B：A是B的祖先元素，B是A的后代元素
1.6 HTML语义化；
语义化结构元素（好处：使结构更清晰，易分辨1.更好实现CEO（搜索引擎优化）2.可被特殊设备读取）
header： 用于表示页面或某个区域的头部；
nav： 用于表示导航栏；
aside： 用于表示跟周围主题相关的附加信息；（如果是广告放在离body结束标签最近的位置）
article：用于表示文章或其他可独立页面存在的内容；
section：用于表示一个整体的一部分主题；
footer：用于表示页面或某个区域的脚注；
1.7 绝对路径和相对路径；
绝对路径：协议 : // 域名 / 目录
——访问站外资源时；（http://www.baidu.com/xxx）
——访问站内资源时，如以上传到服务器，用绝对路径引用时可省略协议和域名。(/xxx)
相对路径：. / 路径
——只能用于访问站内资源.（./xxx、../xxx、../../xxx）
——同级目录引用相对路径，可以省略 ". / "
页:
[1]