本文是关于Web前端学习的总结，主要涵盖HTML的基本标签，包括图像、链接、特殊字符、注释和列表；CSS的选择器应用，如标签、类、ID、伪类和复合选择器，以及CSS的外观属性、背景、优先级和盒子模型。
web前端的学习总结
HTML
一、HTML的基本骨架语法
HTML是一种超文本标签语言，网页的基础框架基本上都是基于HTML框架。基本框架如下：
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
二、HTML基本标签
HTML既然是标签语言所以需要学习大量的标签，我这里总结我所学的比较重要的标签语法。
1.图像标签
通过此标签可以在网页中插入图片。
<img src=" 图像url"/>
插入图片需要插入路径，这里就需要掌握相对路径和绝对路径。绝对路径指的是文件的完整路径，一般用于网站的外部链接。相对路径如了下表：
| 相对位置 | 如何输入 |
|---|---|
| 同一目录 | 输入要链接的文档 |
| 链接上一目录 | 先输入"…/",再输入目录名 |
| 链接下一目录 | 先输入目录名,再输入"/" |
2.链接标签
链接标签可在网站中插入相应网址。这是一个双标签。可以通过target来控制网页的弹出方式。
<a href="跳转目标" target="目标窗口的弹出方式" />文本或图像</a>
链接标签也可以实现锚点定位，在href中输入id，就可以跳转到有此id的位置,id可为任意字符。
<a href="#id" />文本</a>
<h1 id="id" />文本</h1>
3.特殊字符标签
由于HTML中有许多的图标无法通过现有字符实现，所以就有相对应的代码可以实现，例如一些常用的字符如下表：
| 特殊字符 | 代码 |
|---|---|
| 一个空格 |   |
| 小于号 | < |
| 大于号 | > |
4.注释标签
注释标签一般用来解释代码作用，快捷键为ctrl+/。
<!-- 注释语句 -->
5.列表标签
列表的主要作用是将文本整齐整洁有序的排列，列表又分为无序列表、有序列表和自定义列表。
（1）无序列表
无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法如下：
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
......
</ul>
（2）有序列表
有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，其基本语法如下：
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
......
</ol>
（3）自定义列表
自定义列表常用于对术语或名词的解释和描述，定义列表的列表项没有任何项目符号。其基本语法如下：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
三、HTML表格
表格一般用于页面布局，但是现在基本被DIV+CSS布局方法取代了。
1.表格的常用标签
<table> //表格标签
<caption>表格标题</caption> //表格标题
<thead> //表头部分
<tr> //行标签
<th>表格内容</th> //表头标签
<th>表格内容</th>
<th>表格内容</th>
</tr>
</thead>
<tbody> //表格主体部分
<tr>
<td>表格内容</td> //单元格标签
<td>表格内容</td>
<td>表格内容</td>
</tr>
</tbody>
</table>
2.表格属性
| 属性名 | 含义 |
|---|---|
| border | 设置表格的边框 |
| cellspacing | 设置单元格与单元格边框之间的空白间距 |
| cellpadding | 设置单元格内容与单元格边框之间的空白间距 |
| width | 设置表格的宽度 |
| height | 设置表格的高度 |
| align | 设置表格在网页中的水平对齐方式 |
3.合并单元格
合并单元格分为跨行合并和跨列合并。
跨行合并：rowspan
跨列合并：colspan
合并单元格需要注意将将多个内容合并时，会有多余的东西需要把他删除。例如将三个td合并下一个tr里的td就会多出两个需要删除。
四、HTML表单
表单标签就是用于制作网页中的填信息的表，目的是为了收集用户信息。在HTML中，一个完整的表单通常由表单元素，提示信息和表单域3个部分构成。
1.表单域
在HTML中，form标签用于创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会提交给服务器。form的语法格式如下：
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
2.input控件
input控件用得最多的就是type属性，具体属性如下表：
| 属性值 | 含义 |
|---|---|
| text | 单行文本输入框 |
| password | 密码输入框 |
| radio | 单项按钮 |
| checkbox | 复选框 |
| button | 普通按钮 |
| submit | 提交按钮 |
| reset | 重置按钮 |
| image | 图像形式提交按钮 |
| file | 文件域 |
3.下拉菜单和列表项
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
......
</select>
4.datalist的使用方法
datalist用于标签定义选项列表，与input元素配合使用。这个标签类似于搜索引擎，就是在输入框中输入相应文字可以找到datalist里与之对应的选项。使用方法如下：
学 校：<input type="text" value="输入学校" list="school" />
<datalist id="school">
<option>华东师范大学</option>
<option>华东政法大学</option>
<option>华中科技大学</option>
<option>华南师范大学</option>
<option>华东交通大学</option>
</datalist>
5.表单域
在HTML中，form标签用于创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会提交给服务器。form的语法格式如下：
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
6.fieldset的用处
fieldset的用处主要是用于打包分组表单内的元素，通常与legend一起使用，legend相当于这个包裹或者小组的名称。
<fieldset>
<legend>文本</legend>
表单元素
</fieldset>
CSS
一、CSS的用途与语法
CSS的作用就是网页变得简洁美观，相当于给网页"化妆"，弥补HTML对标签属性控制的不足。
CSS的用法也包括三种样式，第一种是内部样式表，即在头标签中插入CSS，第二种是行内样式表，即在标签中插入CSS，第三种是外部样式表，即另创一个文件专门写CSS，并在HTML中调用。
CSS语法非常简单，其中只包括选择符、样式属性和属性值三部分。例如：
selector {
property:value;property:value;...property:value;}
}
二、选择器
CSS中的选择器是最重要的，想要将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。选择器分为很多种：
1.标签选择器
标签选择器是指用HTML标签名作为选择器，按标签名分类，为页面中某一类标签指定统一的CSS样式。其基本语法如下：
标签名 {属性1：属性值1；属性2：属性值2；属性3：属性值3；}
2.类选择器
类选择器使用"."（使用英文点号）进行标识，后面紧跟类名，类选择器的优势就是可以为元素对象定义单独或相同的样式，基本语法如下：
.类名 {属性1：属性值1；属性2：属性值2；属性3：属性值3；}
<标签 class="类名"></标签>
3.id选择器
id选择器使用"#"进行标识，后面紧跟id名，元素的id值是唯一的，只能对应于文档中某一个具体的元素。其基本语法如下：
#id名 {属性1：属性值1；属性2：属性值2；属性3：属性值3；}
<标签 id="类名"></标签>
4.伪类选择器
（1）链接伪类选择器
| 选择器 | 含义 |
|---|---|
| :link | 为访问的链接的样式 |
| :visited | 已访问的链接的样式 |
| :hover | 鼠标移到链接上的样式 |
| :active | 当我们点击链接的样式，鼠标不要松开 |
（2）结构伪类选择器
| 选择器 | 含义 |
|---|---|
| :first-child | 选取属于其父元素的首个子元素的指定选择器 |
| :last-child | 选取属于其父元素的最后一个子元素的指定选择器 |
| :nth-child(n) | 选取属于其父元素的第N个子元素的指定选择器 |
| :nth-last-child(n) | 从最后一个开始往前数的N个子元素的指定选择器 |
5.复合选择器
（1）交集选择器
交集选择器就是并且，即又得意思，其基本语法如下：
p.one 选择的是类名为.one的段落标签。
（2）并集选择器
并集选择器就是只要用逗号隔开，所有选择器都会执行后面的样式，语法如下：
.one,p,#text {color=“red”} 表示.one和p和#text这三个选择器都会执行红色。
（3）后代选择器
后代选择器就是将多层标签的内部标签选择出来，中间用空格隔开。语法如下：
.one ul li {color=“red”} 表示只选li为红色。
（4）子元素选择器
子元素选择器就是只选择亲儿子，例如一个列表中包含多个列表，那么只会选择第一个列表下的列表。基本语法如下：
.demo > h3 {color=“red”} 表示只选h3。
三、CSS外观属性
| 属性 | 功能 |
|---|---|
| color | 文本颜色rbga(红,蓝,绿,透明度) |
| line-height | 行间距 单位px |
| text-align | 水平对齐方式 |
| text-indent | 首行缩进 |
| letter-spacing | 字间距 |
| word-spacing | 单词间距 |
| work-break | 自动换行 |
| text-shadow | 文字阴影(水平，垂直，模糊，颜色) |
四、CSS背景
| 属性 | 功能 |
|---|---|
| background-color | 背景颜色 |
| background-image | 背景图片地址url()，url() |
| background-repeat | 是否平铺 |
| background-position | 背景位置 |
| background-attachment | 背景是固定还是滚动 |
| background-size | 背景大小 |
五、CSS的优先级
| 选择器的贡献值 | 0，0，0，0 |
|---|---|
| 每个标签的贡献值 | 0，0，0，1 |
| 每个类和伪类的贡献值 | 0，0，1，0 |
| 每个ID的贡献值 | 0，1，0，0 |
| 每个行内样式的贡献值 | 1.，0，0，0 |
| 每个!important 的权重 | 无穷大 |
权重是可以叠加的，如果选择器相同，遵循就近原则。
六、盒子模型
盒子模型就是把HTML页面中的元素看作是一个矩形的盒子。
1.盒子边框（border）
盒子边框的语法：
border:border-width border-style border-color;
border-style的属性如下：
| 属性 | 功能 |
|---|---|
| none | 没有边框忽略所有边框的宽度（默认值） |
| solid | 边框为单实线 |
| dashed | 边框为虚线 |
| dotted | 边框为点线 |
| double | 边框为双实线 |
边框的写法比较自由，并且可以控制四条边的样式，写法为border-方向-属性。
border-collapse 表示合并表格的边框
圆角边框
大部分网站中的边框按钮都是圆角边框，因为圆角比较好看。圆角边框的语法如下：
border-radius:左上角，右上角，右下角，左下角；
border-radius后面跟几个数值的意义是不一样的。
| 数值个数 | 含义 |
|---|---|
| 1个值 | 四个角的弧度都为该值 |
| 2个值 | 左上角和右下角的弧度为该值 |
| 3个值 | 第一个值对应左上角，第二个值代表右上角和左下角，第三个值代表右下角 |
| 4个值 | 四个值对应四个角的弧度 |
2.盒子内边距（padding）
padding 表示盒子内边距，指的是边框与内容的距离。
| 属性 | 含义 |
|---|---|
| padding-top | 上内边距 |
| padding-right | 右内边距 |
| padding-bottom | 下内边距 |
| padding-left | 左内边距 |
和border-radius一样，后面跟几个数值的意义是不一样的。
| 数值个数 | 含义 |
|---|---|
| 1个值 | 上下左右边距 |
| 2个值 | 上下边距 左右边距 |
| 3个值 | 上边距 左右边距 下边距 |
| 4个值 | 上边距 左边距 右边距 下边距 |
5974
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
