Web前端从入门到精髓

九，跳转链接

从一个页跳转到另外一个页
< a >标签（双标签）
两个重要属性：

heaf属性：链接的地址
target属性：可以改变链接打开的方式，默认情况下：在当前页面打开 _ self ,新窗口打开_ blank
< base >标签（单标签）：作用就是改变链接的默认行为的。

十，跳转锚点

在当前页内进行跳转
两种实现方式：
实现一：#号+id属性
实现二：#号+name属性 （注意name属性加给的是a标签）

十一，特殊符号

概念：编写一些文本时，经常会遇到输入法无法输入的字符，如注册商标、版权符等，还有往一段文字中加入多个空格时，页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符，在HTML中，为这些特殊字符准备了专门的代码。

常见特殊符号表

&+字符
作用：解决冲突。左右尖括号、添加多个空格的实现

十二，无序列表

注：HTML中列表分为三大类：无序列表、有序列表、定义列表

无序列表采用的标签是< ul >、< li >的组合
< ul >、< li >：列表的最外层容器、列表项（符合嵌套的规范）
注：ul和li必须是组合出现的，他们之间是不能有其他标签的。

type属性：改变前面标记的样式（一般都是用CSS去控制）
https://www.w3school.com.cn/tags/att_ul_type.asp

十三，有序列表

有序列表采用< ol >、< li > 的组合
< ol >、< li >：列表的最外层容器、列表项
注：有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表。
type属性：改变前面标记的样式（一般都是用CSS去控制）
https://www.w3school.com.cn/tags/att_ol_type.asp

十四，定义列表

定义列表主要是来描述列表项的，它是由一个标题和一个解释内容组成的一个列表。

定义列表涉及到三个标签：
< dl >：定义列表
< dt >：定义专业术语或名词
< dd >：对名词进行解释和描述

十五，嵌套列表

列表之间可以互相嵌套形成多层级列表。

十六，表格标签

适合在网页当中显示大量数据。

表格所涉及到的相关标签：
< table >：表格的最外层容器
< tr >：定义表格行
< th >：定义表头（通常表格都有个表头，代表具体的分类）
< td >：定义表格单元
< caption >：定义表格标题
注：之间是有嵌套关系的，要符合嵌套规范。

语义化标签：< tHead >、< tBody >、< tFoot >（只是代表语义化，并不会影响网页效果；添加这三个语义化标签是为了使表格更加规范）
标签语义化：更符合HTML的规范。
好处：有利于搜索引擎优化；有利于团队协作等。
注：在一个table当中，tBody是可以出现多次的，但是tHead、tFoot只能出现一次

十七，表格属性

常见的表格属性：
border：表格边框
cellpadding：单元格内的空间
cellspacing：单元格之间的空间
rowspan：合并行
colspan：合并列
align：左右对齐方式
valign：上下对齐方式

align：left、center、right
valign：top、middle、bottom

十七， 表单input标签

表单在页面当中非常常用，比如输入框、复选框、单选框等等。

< form >：表单的最外层容器
< input >：标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。
表单和表格的区别：表格是比较严格的，需要按照嵌套规范的，但是表单是不需要的，表单里面没有太多规范。
input标签（单标签）有一个type属性，决定控件具体的样式

注：checked：在表单一开始就选中选项
disabled：选项不可选中

十八，表单相关标签

< textarea >：多行文本框
< select >、< option >：下拉菜单
注：调节初始选项，要使下面某项成为默认选项，在该项的option后加入selected。

注：size（单选）可以使下拉菜单具体显示几个；
multiple可以多选。
< input type=“file” >：只能选择一个文件。
< input type=“file” multiple >：可以选择多个文件。
< label >：辅助表单，能够让可选择的范围变大，从而提升用户体验。

十九，表格表单结合实列

div（块）：
div全称division，“分割、分区”的意思，< div >标签用来划分一个区域，相当于一块区域容器，可以容纳段落、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在< div >标签中，< div >中还可以嵌套多层< div >,用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。
span（内联）：
用来修饰文字的，div与span都是没有任何默认样式的，需要配合CSS才行。

< div style=“border: 1px gray solid;” >：加边框
< span style=“color:red”>web：加颜色

二十，div和span

div（块）：
div全称division，“分割、分区”的意思，< div >标签用来划分一个区域，相当于一块区域容器，可以容纳段落、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在< div >标签中，< div >中还可以嵌套多层< div >,用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。
span（内联）：
用来修饰文字的，div与span都是没有任何默认样式的，需要配合CSS才行。
< div style=“border: 1px gray solid;” >：加边框
< span style=“color:red”>web：加颜色

二十一，css语法格式 css基本格式

CSS基本格式
格式：选择器{属性1：值1；属性2：值2}
在这里插入图片描述
单位：px - >像素（pixel）、% ->百分比（例：外容器->600px 当前容器50%->300px）
（屏幕的分辨率：横向的像素*纵向的像素）
基本样式：width（宽）、height（高）、background-color（背景色）
CSS注释：/ * CSS注释的内容 * /；或者快捷键：shift+alt+a或ctrl+/

二十二，内联样式与内部样式

内联（行内、行间）样式：在html标签上添加style属性来实现的
内部样式：在< style >标签内添加的样式
注：内部样式的优点，可以复用代码
注释部分为内联样式，未注释部分为内部样式。
区别：内部样式的代码可以复用、符合W3C的规范标准，尽量让结构和样式分开处理。

二十三，外部样式及两种写法

外部样式是通过引入一个单独的CSS文件，name.css

引入外部样式：
< link >标签：link是当前页面与一个外部资源的引入关系。
< link >标签有两个属性：rel：表示引入资源的类型，可通过rel来指定；href：引入外部资源的地址。
llink的rel属性：https://www.w3school.com.cn/tags/att_link_rel.asp

@imput

注：这种方式有很多问题，不建议使用。
link与@imput的区别：https://www.cnblogs.com/my–sunshine/p/6872224.html
1.从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2.加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3.兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
4.DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
5.权重区别(该项有争议，下文将详解)
link引入的样式权重大于@import引入的样式。