这里是目录：
前言
代码小白学习前端，对所学知识的整理回顾，有任何错误欢迎大家指正。
前端的基础HTML、CSS、JavaScript分别代表网页的结构、表现、行为，本文给大家介绍HTML的基础知识。
一、HTML是什么？
Hyper Text Markup Language 超文本标记语言，可以用两个关键词概括重点：标签、结构。（其中超文本指超链接，使用超链接可以从一个页面跳转到另一个页面。）
超文本类型：
- 图片
- 表格
- 标题
- 超链接
基本语法：
- 标签（Markup）
- 属性
- 实体
- 注释
二、创建第一个HTML网页
<!DOCTYPE html>
<!--文档声明<! DOCTYPE html>用来告诉浏览器当前的版本，不区分大小写，放在开头。-->
<!--注释中的内容会被浏览器忽视，不被网页直接显示-->
<!--根标签（一个网页中有且只有一个）< html></ html>,lang属性表示language语言-->
<html lang="en">
<!--head里面的内容是给浏览器搜索引擎看的，不显示在页面中-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>第一个网页哈哈哈，猜猜我会出现在哪里</title>
<!--title标签的内容会作为搜索结果的超链接显示在标题栏-->
</head>
<body>
<h1>1级标题重要！</h1>
<p>段落标签，在这里写一些文字</p>
<a href="#">超链接</a>
<input type="text"/><!--input也是自结束标签-->
<button>按钮啦</button>
<hr><!--hr是一条直线————————————-->
<div><img src="图片路径"><!--img标签是自结束标签，用来展示图片（image）--></div>
<h4>4级标题！</h4>
</body>
</html>三、具体介绍
1.标签
开始标签、结束标签与内容相结合，便是一个完整的元素。
1.1 标签的分类
- 行内元素（inline element）：主要用于包裹文字
· 只会占用自身大小，不会独占一行；
· a b i em strong span 等都是行内元素； - 块元素（block element）：在网页中块元素主要用来对网页进行布局
· 块元素独占一行；
· main h1-h6 p dd ul ol form table div 等都是块元素； - 行内块元素（inline-block element）
- 替换元素（replaced element）
· 可替换元素的展现效果不受CSS影响，它们外观的渲染是独立于CSS的；
·通过修改某个属性值呈现的内容就可以被替换的元素就称为“替换元素”
· img、input、select、button等都是替换元素
· 替换元素兼具行内元素和块元素的特点 - 非替换元素（non-replaced element）
· HTML中大多数标签都是不可替换元素，其内容由CSS渲染并直接呈现给用户；
· div、p、h1-h6、table等均为非替换元素；
1.2 标签的嵌套规则
- 把标签放入其它标签之中被称为标签嵌套
- 在开发中通常使用块元素进行布局，块元素可以包含块元素和行内元素；
- 在开发中行内元素通常来选中文字，为文字设置样式，行内元素可以嵌套行内元素，但不建议嵌套块元素；
- 浏览器在解析页面时，会自动对网页中不符合规范的内容进行修正，比如标签写在了根元素的外部，根元素中出现了除head与body以外的子元素等。
- 特殊情况：
- p元素（块元素）中不能放块元素，浏览器会对网页自动修正；
- 超链接中可以放任何元素，除了它本身（即：超链接中不可以嵌套超链接）
1.3 标签的语法
- 成对标签：
<标签名>标签内容</标签名>
例：< h1></ h1> - 自结束标签：
<标签名>或<标签名/>
例：< br > < hr >
1.4 部分标签介绍
- 标题标签：< h1>~< h6>共六级标题，从h1到h6，重要性逐渐递减。h1在网页中的重要性仅次于title
- em标签用于表示语音，语调的一个加重。
- strong标签表示强调，重要内容。
- blockquote标签表示长引用。
- q标签表示短引用。
- br标签表示界面中的换行。
2.属性
- 可以在开始标签或自结束标签中添加属性来提供附加信息
- 属性语法：
- 属性名="属性值"
- 部分属性名与属性值相同时可以省略，如readonly、checked
- 常见属性：
- id
- class
- title：title属性用来指定标签的标题，鼠标移入元素上方会出现提示文字
3.实体
在HTML中，有些时候我们不能直接书写一些特殊符号，因为他们本身有特殊含义。
- 在HTML中预留了一些字符，这些字符会被浏览器解析为HTML标签
- 要使用这些预留字符，需在HTML中使用实体（转义字符）
- 如在网页中编写的多个空格，默认情况会自动被浏览器解析为一个空格。比如字母两侧的大小于号。
- 实体语法：
- &实体名；
例： - <(<)
- >(>)
- ( )（空格）
- &实体名；
- 实体名称要注意大小写！
4.注释
- 注释不能嵌套！
- 作用:
- 可以通过注释来对代码进行解释说明
- 可以通过注释来注释一些不希望被用户看见的内容
- 养成写注释的好习惯
四、网页的基本结构
1.head部分
1.meta标签
- meta标签用来设置网页的元数据，用来对网页进行各种配置，元数据不是给用户看的
- charset属性：配置网页的字符集，避免出现乱码现象
- SEO 搜索引擎优化：（name指定数据的名称，content指定数据内容）
<meta name="keywords" content="(关键词)"> <meta name="description" content="(页面介绍)"> - description用于指定网站的描述（相当于自我介绍）会显示在搜索引擎的搜索结果中
- keywords可以同时指定多个关键字，关键字间使用逗号隔开。
2.title标签
- title标签中的文字是页面优化最重要的因素，搜索引擎在搜索是最先看到的内容
- 建议将title标签紧贴着head标签编写，这样搜索引擎可以快速检索到标题标签
- 网页中有多个页面时，不同页面的title不应该重复，这样不利于搜索隐藏检索
2.body部分
1.语义化
（1）何为语义化？
HTML中的元素、属性及属性值都拥有某些含义，这就是HTML的语义化（传达内容，而非样式）
（2）语义化的好处：
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
（3）如何做到语义化：
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码，也不使用现成的网页模板
2.常用标签
(1) 内容分区标签`<header></header>` - 表示网页或一个块内容的头部`<main></main> `- 表示网页的主要内容，一个页面只有一个main标签`<footer></footer>` - 表示网页或一个块内容的底部`<aside></aside> `- 表示侧边栏`<nav></nav> `- 表示一个导航`<section></section> `- 表示一个独立区块
(2) 文本标签
- 以上内容区分标签为HTML5新增的语义化标签，但不常用；
- div标签为成对标签，通常用来表示一个独立的区域，无特殊语义；
- 不使用CSS时，div的使用对页面的内容与布局没有任何影响；
- 列表之间可以互相嵌套；
- 网页有三种列表形式：有序列表（ol）、无序列表（ul）、定义列表（dl）【dt表示被定义的内容，dd对被定义的内容进行描述】；
- a标签：
- #：属性值为#，跳转到当前页面的顶部；
- #id：属性值为#+id名，跳转到当前页面指定id的位置；
- target属性：指定打开新链接的位置，_self(默认值，在当前页面打开)，_blank(在新的页面中打开超链接)；
- span标签是行内元素，无特殊语义；
(3) 多媒体标签
- ①图片标签：
- img属性：
- alt：用来指定图片的描述文字；搜索引擎会根据该描述文字来识别图片。
- width和height中如果只改一个，另一个会等比例缩放。
- 图片格式：（使用图片格式原则，保证质量的前提下，图片越小越好）
- jpg 照片色彩丰富，不支持透明效果，不支持动图。一般用来显示照片
- png 支持的色丰富，支持复杂透明，不支持动图。颜色丰富，复杂透明的图片，专为网页而生。
- gif 动画、体积大，支持动图。适用于颜色单一的图片，动图。
- webp 体积更小、兼容性一般，具备其他图片格式的所有优点
- Base64：将图片使用base64进行编码
- img属性：
- ②音视频
在不同浏览器展示可能不同，以后用CSS来展示- audio标签用来向页面中引入一个外部的音频文件< audio src=""></ audio>或< audio controls>可以输入文字说明浏览器是否支持 < source src=""></ audio>
- 音视频文件引入时，默认情况下不允许用户自己控制播放停止
- 属性：
- controls是否允许用户控制播放
autoplay音频文件是否自动播放
loop音乐是否循环播放
- 低级浏览器用< embed src="" type="audio大类型/mp3具体格式" width="" height="">可自动播放音频
- 使用video标签来向网页中引入一个视频
- 使用方式和audio基本一样
- 格式：mp4或webm
3.表格与表单
（1）表格：
- table标签创建一个表格
- table中嵌套tr表示表格中的一行（决定表格行数）
- tr中嵌套td表示表格中的单元格：（决定表格列数）
- td标签中使用colspan属性：横向合并单元格；
- td标签中使用rowspan属性：纵向合并单元格；
（2）长表格：（以下标签均成对出现）
<caption>:设置表格标题；<thead>:表示表格头部，用来放头部的tr；<tbody>:表示表格主要内容；<tfoot>:表示表格底部；<th>:表示表头的单元格；<tr><td>:与普通表格类似；
（3）表单(form)：
- 将用户的信息提交给服务器，使用
<form></form>标签创建一个表单； - 属性：
- action：指定表单提交的服务器地址；
- value：
- 通过input的value属性可以为文本框设置默认值；
- 可通过value属性值修改提交按钮与重置按钮中的文字内容；
- 不需要用户填写的选择框（单选按钮、多选按钮等）必须指定一个value属性，value的属性值会提交给服务器；
- 文本框
- input标签 type="text";
- 将表单的数据提交到服务器必须要为表单项指定一个name属性；
- disabled属性：设置该文本框不可输入任何内容；
- 密码框：type="password";
- 提交按钮：type="submit";
- 重置按钮：type="reset";
- 单选框：type="radio";
- name属性：将单选按钮进行分组，name相同则为同一组按钮，相同name下单选生效；
- checked属性：默认选中该选项；
- 多选框：type="checkbox"；
- value属性代表该选项的名称;
- checked属性：设置默认选中项；
- 更多input类型：
- type="placeholder"：
- 与type="text"中设置value属性的区别是当用户输入文字是placeholder中的默认说明文字自动消失而不需要用户自己删除
- type="email"
- type="range"
- type="number":有min和max属性设置数字范围
- type="file"
- type="date"：可以设置min等
`<textarea></textarea>`设置长文本
- type="placeholder"：
- 下拉列表
- select标签创建下拉列表
- option标签添加列表项
- name属性指定给select标签，value属性指定给option
- selected属性设置默认选项
- button
- 普通按钮：type="button"
<button type="submit">提交按钮<button type="reset">重置按钮<button type="button">按钮
五、相关知识
1.路径
（1）绝对路径：绝对路径是指文件在硬盘上真正存在的路径。绝对路径是指可以从这个路径上查找文件夹，不管是从外部或内部存取。
（2）相对路径：
- 相对于自己的目标文件位置。而相对路径则是与它本身相关的，其它地方的档案和路径，则只能在内部存取。
- 相对路径：./或../开头（./可以省略不写，./表示当前文件所在目录，当前页面就是当前文件）（../表示当前文件所在目录的上一级目录）
（3）相关链接：https://blog.csdn.net/hgd613/article/details/8041662
六、深入学习HTML
（1）HTML的可拓展性
- 自定义标签、自定义属性
- link标签
- 引入CSS样式：<link rel="stylesheet" href="/example.css">
- 指定Favicon：<link rel="icon" href="/favicon.ico">
- 预先加载资源：<link rel="prefetch" href="/image.png">
(2) HTML的标签规范
- 根据语义而不是样式来选择标签与属性；
- 遵循HTML语法和嵌套规则；
- 使用浏览器中的开发者工具（右键：检查）调试查看DOM树
总结
以上是对前端基础的HTML基础部分进行的介绍，有不正之处恳请大家指出，共同学习共同进步。
1239
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
