大三放寒假了，准备把前端基础的知识点重新学习一遍。这个是慕课网前端工程师2020版的学习笔记，仅供自己学习记录。
一. HTML 语法与基础标签
前端开发主要技术介绍
- HTML5： 搭建网页结构的语言，增加了很多的移动端的支持，简单好学。
- CSS3： 样式表，美化网页的语言，增加了很多动画，过渡等新特性，要记的单词非常多，不过非常有意思。
- JavaScript：前端开发工程师最重要的“看家语言”，JS 功底的好坏，决定了职业高度，学习的时候需要下苦功夫。
- Vue.js / React.js: 从 2016 年前后开始流行的前端框架，采用模块化开发，数据驱动，声明式编程，只要前期“马步扎稳”，后面“武功招式”随便学。
HTTP 协议
- HTP协议（Hypertext Transfer Protocol, 超文本传输协议）是互联网数据传输的常见协议。
- 一次 HTTP 事勿是由“HTTP请求”和“HTTP响应”构成。
- 网址前的 http:// 就表示用 http 协议请求页面。
认识 HTML5 骨架
1 |
|
<!DOCTYPE html> 文档类型声明 DTD
<html></html> <head></head> <body></body> 标签对儿
文档类型声明 DTD
- HTML 文件第一行必须是 DTD(Document Type Definition, 文档类型声明)
- 不写 DTD 会引发浏览器的一些兼容问题。
- 不同版本的 HTML 有不同的 DTD 写法。
不同版本的 HTML 的 DTD
| HTML版本 | DTD写法 |
|---|---|
| HTML5 | |
| HTML4.01严格版 | |
| HTML4.01过渡版 | |
| HTML4.01框架版 |
W3C 组织
W3C（The World Wide Web Consortium，万维网联合会）是万维网的主要国际标准组织。该联盟成立于1994年，负责定制 web 标准，主要是 HTML 和 CSS。
认识 和 标签对儿
和 标签都是写在 标签里面的。 标签对儿是网页的配置，不要认为时网页的头部。 标签对儿中写网页的内容，包括网页的头部，主要内容，页脚等各个部分。字符集设置
meta 是元标签，表示网页的基础配置，charset 表示字符集， UTF-8 是一种字符集。
两种字符集介绍
UTF-8 和 gb2312
| 字符集 | 涵盖字符 | 1个汉字字节数 | 适用场景 |
|---|---|---|---|
| UTF-8 | 涵盖全球所有国家，民族的文字和大量图形字符。 | 3 | 制作有非汉字文字的网页 |
| gb2312 | 收录所有汉字字符（包含简体，繁体）和英语，少量韩文，日语和少量图形字符 | 2 | 制作只有汉语和英语的网页，由于1个汉字仅占2字节，网页文件尺寸明显减少。 |
更改网页的字符集
更改网页字符集的时候，不仅仅要更改 <meta charst="UTF-8">里面的 charset 属性值，还要更改该网页的字符编码设置。不然会造成乱码。
title 标签
title设置出现的位置
< title>网页的标题
title 的用途
title 是搜索引擎收录网站时显示的标题，为了吸引用户点击，应该合理的设置 title。
网页关键词和页面描述
合理设置网页的关键词和页面描述，也是SEO的重要手段。
SEO (Search Engine Optimization, 搜索引擎优化)利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名，让网站在搜索引|擎的结果中内占据领先地位，获得品牌收益。
网页关键词和页面描述
使用 meta 标签设置网页关键词和描述，name 属性非常关键,用来设置meta的具体功能
1 | <meta name=" Keywords" content=" 慕课网，imooc， JAVA， 前端,Python，大数据"> |
认识标签对儿
标签通常成对儿出现
< p>不负韶华，只争朝夕
.其中
起始标签
是结束标签不同功能的标签有不同的功能
p标签表示段落
不负韶华， 只争朝夕
h1标签表示一级标题
不负韶华，只争朝夕
标签可以给文字设置不同的“语义”
单标签
有的标签不是成对儿的，而是只有起始标签,称为单标签
在HTML4代， 单标签必须写-一个结尾的反斜杠，HTML5不用写
标题标签
h系列标签表示”标题”语义，h是headline的意思
| 标签 | 语义 |
|---|---|
| h1 | 一级标题 |
| h2 | 二级标题 |
| h3 | 三级标题 |
| h4 | 四级标题 |
| h5 | 五级标题 |
| h6 | 六级标题 |
标题标签
搜索引擎非常看重
标签的内容，应该将重点内容放到中，比如网页的logo等
◆
标签- 般只能放置-一个，否则会被搜索引擎视为作弊提示:实际开发中,也会出现多个
标签的情况,只是不推荐
段落标签
◆
标签表示段落标签， p是英语paragraph的意思◆任何段落都要放到
标签中， 因为HTML中即使代码换行了，页面显示效果也不会换行，必须写到中◆
</ p>标签中不能嵌套h系列标签和其他p标签
◆div是英语division”分割”的缩写，顾名思义,
标签对用来将相关的内容组合到一起，以和其他内容分割，使文档结构更清晰比如，网页的头部要放到- -个
标签对中，轮播图也要放到一个标签对中，文章内容也要放到- -个标签对中◆
是最常见的HTML标签,因为它可以结合CSS使用，实现网页的布局，这种布局形式叫做”DIV+CSS”◆
像是一 个容器，什么都可以容纳，因此工程师也习惯称呼为“盒子”空白折叠现象
文字和文字之间的多个空格、换行会被折叠成一个空格。标签“内壁”和文字之间的空格会被忽略
转义字符
常见转义字符(字符实体) :
| 转义字符 | 意义 |
|---|---|
| < ; | 小于号 |
| > ; | 大于号 |
|   ; | 空格（不会被折叠） |
| © ; | 版权符号© |
HTML 注释
在 html 中使用 注释。在 IDE 中也可以使用 ctrl + / 进行注释。
div的常见类名
| 区域 | 类名 |
|---|---|
| 页头 | header |
| logo | logo |
| 导航条 | nav |
| 横幅 | banner |
| 内容区域 | content |
| 页脚 | footer |
二. 列表标签
0.三种列表
| 标签 | 语义 |
|---|---|
| 无序列表 | |
| 有序列表 | |
| 定义列表 |
无序列表是“没有刻意顺序”的列表
1. <ul> 和 <li> 标签
无序列表使用
<ul></ul>标签，每个列表项都是<li></li>标签1
2
3
4
5
6
7<!--unorderd list-->
<ul>
<!--list item-->
<li>面包</li>
<li>牛奶</li>
<li>鸡蛋</li>
</ul>无序列表是一个父子组合标签，上阵父子兵，不能单独出现。
1
2
3
4
5
6
7<!--父标签-->
<ul>
<!--子标签-->
<li>面包</li>
<li>牛奶</li>
<li>鸡蛋</li>
</ul>当 HTML 标签写成嵌套，必须注意代码的缩进（Tab键）
1
2
3
4
5<ul>
<li>面包</li>
<li>牛奶</li>
<li>鸡蛋</li>
</ul>
<li> 不能单独使用
<li>标签不能单独使用，它必须放到<ul>或者<ol>中使用
<ul> 的子标签只能是<li>
HTML 规定，
<ul>的子标签只能是<li>, 绝对不能出现其他任何标签。1
2
3
4
5
6
7<ul>
<!--这种写法是错误的。-->
<h3>购物清单</h3>
<li>面包</li>
<li>牛奶</li>
<li>鸡蛋</li>
</ul>
<li> 中可以放任何标签
<li>标签是容器，内部可以放任何其他标签。1
2
3
4
5
6
7<ul>
<li>面包</li>
<li>牛奶
<p>要脱脂奶粉还是全脂奶粉？</p>
</li>
<li>鸡蛋</li>
</ul>
列表的嵌套
一定要记住：
- li 不能散着放
- ul 的子标签只能是 li
- li 里面可以放任何东西
无序列表的 type 属性
无序列表有 type 属性，可以定义前导符号的样式，但是在 HTML5 中已经被废弃，建议使用 CSS 替代
| 值 | 描述 |
|---|---|
| disc | 默认值，实心圆。 |
| circle | 空心圆 |
| square | 实心方块 |
2. <ol> 标签和 <li> 标签
有序列表使用<ol></ol> 标签，每个列表项都是 <li></li> 标签
1 | <!--ordered list 有序列表--> |
<ol> 标签注意事项
<li>标签不能散着放，它必须是<ol>标签或者<ul>标签的子标签。<ol>的子标签只能是<li>标签。<li>标签中可以放任何东西。
<ol> 标签的 type 属性
<ol> 标签可以设置 type 属性，用来设置编号的类型
| type属性值 | 意义 |
|---|---|
| a | 表示小写英文字母编号 |
| A | 表示大写英文字母编号 |
| i | 表示小写罗马数字编号 |
| I | 表示大写罗马数字编号 |
| 1 | 表示数字编号(默认) |
<ol> 标签的 start 属性
start属性值必须是一个整数，指定了列表编号的起始值。此属性值应为阿拉伯数字，尽管列表条目的编号类型
type属性可能指定为罗马数字编号等其他类型的编号。1
2
3<ol type="A" start="5">
<li>小米</li>
</ol>
<ol> 标签的 reversed 属性
reversed属性指定列表中的条目是否倒序排列的。reversed属性不需要值，只需要写 reversed 单词即可，这是 HTML5 的全新特性。1
2
3<ol reversed>
<li>小米</li>
</ol>
3. 定义列表
需要逐条给出定义描述的列表，就是定义列表。
<dl>是定义列表标签，内容交替出现<dt>,<dd>标签。
定义列表的示例代码
1 | <!-- definition list 定义列表 --> |
哪里应该使用定义列表
- 使用什么标签，不应该看样式，而是应该看语义。
- 只要语义上有“解释说明”含义的文字，且为列表形态，应该使用定义列表。
三. 多媒体与语义化标签
0.目录
- 图片与超链接标签
- 图片标签
- 超级链接
- 音频和视频
- 大纲与语义化标签
1. 图片标签
<img> 标签用来在网页中插入图片
1 | <img src="images/gugong.jpg"> |
<img> 标签的 alt 属性
alt属性是alternate 替代品的缩写，它是对图像的文本描述，不是强制性的<img src="images/gugong.jpg" alt="故宫角楼">如果由于某种原因无法加载图像，浏览器会在首页上显示
alt属性中的备用文本。供视力不方便的朋友使用的网页朗读器，也会朗读
alt中的文本。
<img> 标签的 width，height属性
width，height属性分别设置宽度和高度，单位是像素，但是不需要写单位。
<img src="images/gugong.jpg" alt="故宫角楼" width="300">如果省略其中的一个属性，则表示按照原始比例缩放图片。
网页上支持的图片格式
| 格式 | 说明 |
|---|---|
| .bmp | windows 画图软件默认保存的格式，位图 |
| .gif | 支持动画（比如表情包） |
| .jpeg(.jpg) | 有损压缩图片，用于照片 |
| .png | 便携式网络图像，用于 logo，背景图形等，支持透明和半透明 |
| .svg | 矢量图片 |
| .webp | 最新的压缩算法非常优秀的图片格式。 |
2. 超级链接
超级链接是将网页和网页连接到一起的方法，是互联网成“网”的原因。
<a> 标签
Author：John Doe
原文链接：http://example.com/2020/12/05/2020-12-04-HTML5-basic/
发表日期：December 5th 2020, 12:00:00 am
更新日期：December 10th 2020, 9:05:15 pm
版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可
-
Next PostCSS3基础(第一周内容)
-
Previous Post秦风·无衣