1 文档声明
-
格式 ：
<!DOCTYPE html> -
放在HTML文件的首行
- 告诉浏览器是HTML5界面
- 让浏览器用HTML5的标准解析该文档
- 不能省略，否则会影响兼容性
2 html元素
-
lang
-
帮助语音合成工具确定使用发音
-
帮助翻译工具确定使用的翻译原则
-
常用
- lang="en" ,表示HTML文档是英文
- lang="zh-CN" ,表示HTML文档是中文
-
-
head
- 文档的标题 \ 引用的文档样 \脚本等
- 整个页面的配置
-
title
- 网页的标题
-
meta
- 字符编码，让网页精准显示文字
- 不设置或设置错误会导致乱码
- 一般只用utf-8编码
-
body
- 浏览器窗口看到的
- 网页的具体内容和结构
-
html
- 根元素：所有其他元素是该元素的后代
3 常用元素
-
h
- 重要文字做标题（head）
- h1~h6：h1级别最高，h6级别最低
-
p
- 文本的一个段落
- 多个段落之间有间距
- tip ：禁止显示歧义提示（防止在段落里面有中文字符的时候提示歧义）
-
img
-
显示图片（将一份图像嵌入文档）、可替换元素
-
常见属性
-
src（source）：必须的，包含想嵌入的图片文件路径
-
绝对路径：（基本不用）
- 不建议使用网址的图片路径，还是得下载到本地，最终部署到服务器
-
相对路径：（方便部署到服务器）
- 一个点：代表当前文件夹，可省略
- 两个点：代表上级文件夹
- 路径分隔符号：/
-
-
alt（不强制）：
- 当图片加载不成功，显示这段文本
- 屏幕阅读器将会描述给阅读器的使用者，让其知道图像含义
-
-
-
a
-
超链接，用于打开另一个新网页
-
常见属性（双标签元素）
-
href：指定打开的网址，可以是线上的，也可以是本地的(相对/绝对路径)
-
target：其属性指定在何处显示连接的资源
- _self：默认值，在当前窗口打开url
- _blank：在一个新窗口打开Url
- _parent：在父窗口打开url（跟self结果一样）
- _top：在顶层窗口打开url
-
-
描点链接：写在代码里面
-
a与img结合使用：写在代码里面
-
把
嵌套在里
-
-
a的其他应用
- 下载一个文件：让浏览器下载、
- 发邮件等
-
-
iframe（不常用）
- 有些网站可以嵌入
- 有些网站不可以：网页的network中的X iframe 为sameorign
- iframe与a：
-
div（division）
- 分开，分配
- 多个div元素包裹的内容会在不同行显示
- 作为一个大容器，代表一个整体
- 把网页分割成多个独立的部分
-
span
- 跨域，涵盖
- 多个span元素包裹的内容会在同一行显示
- 默认情况下，与普通文本无区别
- 可用于区分特殊文本和普通文本
4 不常用元素
- strong：内容加粗、强调【同理，css也可以做到】
- i ：内容倾斜
- code ：显示代码【跟编程相关的网站可能会用到】
- br ：换行，但开发中不用这个，而是div
5 HTML全局属性
-
看那个文档网站
-
常用
- id：文档中唯一的标识符
- class：元素类名，允许css，javascrict访问
- style：给元素添加内联样式
- title：呈现给用户（用户鼠标放在此处呈现小字提示）
6 URL统一资源定位符
-
格式：
- 协议类型：//服务器地址：端口号/文件路径？查询#片段Id
-
俗称 网络地址，可以是一个html页面、一个Css文档、一幅图像等等，参照平常浏览器上网打开过的页面
-
与URI区别：
- UPI：统一字眼标志符，用于标识Web技术使用的逻辑或物理资源
- URL是URI的一个子集
7 SEO搜索引擎优化
通过了解搜索引擎的云锁规则来调整网站，以及提高网站在有关搜索引擎的排名方式
8 字符实体
- 当需要显示
<>以及空格等等特殊字符实体给用户时，防止文档解析产生歧义，需要用专门的格式让机器识别，格式如下，两个符号之间的是要显示的字符实体，有对应的字母 - 比如空格对应
9 元素的语义化+案例分析
- 用正确的元素做正确的事情
- 理论上，所有的HTML元素，通过设置样式，都能实现相同的事情
- 但是，不方便代码维护不利于开发者之间沟通，不利于语音合成工具正确识别网页元素的用途，不利于SEO
下面将结合实际网站的HTML结构，对比非语义化标签的差异
（1）百度网站：
百度网站使用了一些语义化标签，如<header>、<nav>、<article>、<section>等。例如，百度首页的顶部导航栏使用<nav>标签，而文章页面则使用<article>标签。此外，百度网站还使用了语义化标题标签，如<h1>、<h2>、<h3>等。
（2）京东网站：
京东网站使用了大量的非语义化标签，如<div>、<span>等。例如，京东首页的顶部导航栏使用<div>标签，而文章页面则使用<div>和<span>标签。此外，京东网站还使用了大量的CSS样式来控制页面布局和样式。
（3） 知乎网站：
知乎网站使用了大量的语义化标签，如<header>、<nav>、<article>、<section>等。例如，知乎首页的顶部导航栏使用<nav>标签，而文章页面则使用<article>标签。此外，知乎网站还使用了语义化标题标签，如<h1>、<h2>、<h3>等。
（4）豆瓣网站：
豆瓣网站使用了大量的非语义化标签，如<div>、<span>等。例如，豆瓣首页的顶部导航栏使用<div>标签，而文章页面则使用<div>和<span>标签。此外，豆瓣网站还使用了大量的CSS样式来控制页面布局和样式。
通过对比以上四个网站的HTML结构，可以看出语义化标签和非语义化标签的差异。语义化标签有助于提高代码的可读性、可维护性和搜索引擎优化，而非语义化标签则可能会降低代码的可读性和可维护性。因此，在实际开发中，应该尽可能地使用语义化标签来提高代码的质量和可维护性。
