HTML
引言：HTML（超文本标记语言），可以理解为是网页的一个骨架，支撑着整个网页。标签分为双标签和单标签（自闭合标签），HTML中绝大多数都是双标签；在HTML中通过CSS选择器对网页元素进行样式，通过JavaScript进行网页的交互效果。
标签名汇总
1、网页的基本HTML结构：
<!DOCTYPE html>
<html lang=”zh-CN“>
<head>
<meta charset="UTF-8">
<title>.....</title>
</head>
<body>
......
......
</body>
</html>
2、HTML字符编码
-
平时编写代码时，统一采用
UTF-8编码最为稳妥，因为支持大部分国家的文字和字符，被称为万国码。 -
为了让浏览器在渲染
html文件时，不犯错误，可以通过meta标签配合charset属性指定字符编码。<head> <meta charset="UTF-8"/> </head>
3、HTML设置语言
主要作用：让浏览器显示对应的翻译提示、有利于搜索引擎优化。
-
具体写法：
<html lang="zh-CN"> -
常用的语言：
zh-CN：中文-中国大陆（简体中文）zh-TW：中文-中国台湾（繁体中文）en-US：英语-美国en-GB：英语-英国
4、语义化标签
- 概念：用特定的标签，去表达特定的含义。
- 原则：html标签的效果不重要，在网页中标签的语义（侧重标签意思而不是效果）很重要，因为CSS可以调整标签的效果。
- 语义化的好处：
- 代码结构清晰可读性强。
- 有利于SEO（搜索引擎优化）。
- 方便设备解析（屏幕阅读器、盲人阅读器等）。
5、块级元素和行内元素
- 块级元素：独占一行（块级元素中能嵌套块级元素和行内元素）。
- 行内元素：不独占一行，可以堆叠在一行里面（行内元素里面只能嵌套行内元素）。
h1~h6之间不能互相嵌套，p元素中不要写块级元素。
6、跳转到锚点
锚点就是网页中的一个标记点，可以帮助我们定位到指定元素位置。具体使用方式：
-
第一步：设置锚点：
<!-- 第一种方式：a标签配合name属性 --> <a name="test1"></a> <!-- 第二种方式：其他标签配合id属性 --> <h2 id="test2">我是一个位置</h2> -
第二步：跳转锚点：
<!-- 跳转到test1锚点--> <a href="#test1">去test1锚点</a> <!-- 跳到本页面顶部 --> <a href="#">回到顶部</a> <!-- 跳转到其他页面锚点 --> <a href="demo.html#test1">去demo.html页面的test1锚点</a> <!-- 刷新本页面 --> <a href="">刷新本页面</a>
7、网页中的表单
概念：一个包含交互的区域，用于收集用户提供的数据。
| 标签名 | 标签语义 | 常用属性 | 单/双标签 |
|---|---|---|---|
| form | 表单 | action ：用于指定表单的提交地址（后端地址）。target ：用于控制表单提交后，如何打开页面（_self，__blank）。methon：用于控制表单的提交方式（POST、GET） |
双 |
| input | 输入框 | type：设置输入框的类型（text、password、radio、checkbox等...）。name：用于指定提交数据的名字 |
单 |
| button | 按钮 | 提交按钮 | 双 |
8、HTML实体
在 HTML 中我们可以用一种特殊的形式的内容，来表示某个符号，这种特殊形式的内容，就是 HTML 实体。比如小于号 < 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须在 HTML 源码中插入字符实体。常用的字符实体如下：
-
空格： ；小于号：<；大于号：>；元（￥）：¥；版权（coperight）：&cope；乘号：×；除号：divide；
-
完整实体列表，请参考：HTML Standard (whatwg.org)
9、meta 元信息
<!-- 配置字符编码 -->
<meta charset="utf-8">
<!-- 针对 IE 浏览器的兼容性配置 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对移动端的配置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 配置网页关键字 -->
<meta name="keywords" content="8-12个以英文逗号隔开的单词/词语">
<!-- 配置网页描述信息 -->
<meta name="description" content="80字以内的一段话，与网站内容相关">
<!-- 针对搜索引擎爬虫配置 -->
<meta name="robots" content="index、noindex、follow、nofollow、all、none、noarchive、nocache">
<!-- 配置网页作者 -->
<meta name="author" content="tony">
<!-- 配置网页生成工具 -->
<meta name="generator" content="Visual Studio Code">
<!-- 配置定义网页版权信息 -->
<meta name="copyright" content="2023-2027©版权所有">
<!-- 配置网页自动刷新 -->
<meta http-equiv="refresh" content="10;url=http://www.baidu.com">