1.<meta>标签表示还没有结束的值，他的属性定义了与文档相关联的名称和值。
网页里面添加效果：
1.给文字增加超链接：标签里面有一个href属性负责指定新页面的地址
链接文字
设置超链接窗口的打开方式：(target目标的意思)
链接文字
target值：目标页面的打开方式
_blank：创建新窗口打开新页面
_parent:在上一级窗口打开，常在分帧的框架页面中使用
_top在游览器的整个窗口打开，将会忽略所有的框架结构
其中_parent和_top方式用于框架页面。
如： 百度
定义超链接的提示信息：(title)可以当鼠标指向链接时会指明链接的信息
<a href=“链接地址”title=“提示信息”>链接文字
网页中的锚点
锚点的链接文字
注意：id的命名不能使用1.2.3等数字开头，要使用英文开头。
链接到锚点：
用于链接锚点的文字
设置锚点和用于链接锚点的文字不在同一页面。
用于链接锚点的文字
网页里添加表单：
1.表单标签：
name属性：…
action属性：…
method属性：…
target属性：…
autocomplete属性：…(自动完成功能）
表格type的属性
text：文字段落
password：密码域，输入的数据用*表示
radio：单选按钮
Checkbox：复选项
button：普通按钮
submit：提交按钮
reset：重置按钮，将重置表单数据，以便重新输入
image：图像域，也陈图像提交按钮
file：文件域
文字字段：
将input元素的type属性的属性值设置为text，就可以创建一个普通文本框。(input意思是输入，value用于定义文本框的默认值，placeholder用于描述输入字段预期的提示信息，该提示会在输入字段为空时显示，并在字段获得焦点时消失)
<input type=“text” name ="控件名称"size=控件长度 maxlength=最多字符数
value=“文字字段的默认取值”autocompete=“off”placeholder=“字符设定值”>
密码域(possword):显示*
单选按钮（radio）：单选按钮代表相互排斥的作用，必须要设置value的值。
复选框（checkbox）：允许一组选项中选择多种
普通按钮（button）:onclick参数是设置当鼠标按下按键时进行的处理。
提交按钮（submit）：比较特殊的按钮，不需要参数onclick
重置按钮（reset）：清除
图像域（image）：创造特殊效果的按钮，通常作为图像的提交按钮。
文件域（film）:用户游览计算机的某个文件，并将其上传。
使用select元素创建表单控件：下拉菜单
输入内的控件一般以标签开始,说明该控件需要用户的输入；而菜单类则以标签开始，表示用户需要选择(英文意思是挑选）
选项显示内容
<option value="选项值"selected=“selected”>选项显示内容
…
滚动菜单:multiple
文本域
留言:
css常用的：（1） font-size：文字大小 px：像素 rem=px italic：斜体的 color：文字颜色 font-weight：文字加粗 normal：正常的字体，相当于数字值400。 bold：粗体700 bolder：相当于父标签更重的值。lighter：相当于父标签更轻的值。 （2）font-style:文字风格 normal:正常文字 italic：斜体 oblique：偏斜体
font-family:字体名称
（3）line-height:行高数值 通常用px
font：文字风格 小型大写字母 加粗 大小/行高 字体；
（4）text-align：文本对齐。 left左对齐，right右对齐，center居中，justify两端对齐
text-indent：段落首行缩进。
text-decoration：文本修饰。underline下划线。overline上划线。line-through贯穿线。none文字无修饰符
（5）width：宽 px
height：高 px 。 auto表示自动
background:背景颜色
· border：边框
· padding：填充
· margin：边界 与padding相似
· margin-bottom：下边距
· margin-top：上边距
· margin-left：左边距
· margin-right：右边距
定位方式：position（位置）：static：无定位位置
· absolute：绝对定位
· relative ：相对定位
· fixer:固定定位
(6)display:关键词
· none隐藏对象
· block：指对象为快元素
· inline:指定对象为内联元素
· inline-block：指定对象为内联快元素
· list-item：列表元素
（7）float：关键字
· none：设置对象不浮动
· left：设置对象浮动在左边
· right：设置浮动对象在右边
（8）clear：关键词
· none：不清除浮动状态
· both：清除浮动状态
· left：清除左边的浮动状态
· right：清除右边的浮动状态
（9）box-sizing：关键词
· content-box：设置标签为标准模型，相当于标签的默认效果
· border-box：设置为怪异盒模型。
<p class="correct">不能为空。否则无效。所以使用空格“ ”作为内容。并设置行高为0，使标签无高度，不影响页面效果。
（10）background-color:背景颜色。transparent：默认值，不设置颜色
background-image：图片路径。url（img/test.jpg）
background-repeat：背景平铺
· repeat-x：背景横向平铺
· repeat-y：背景纵向平铺
· no-repeat：不平铺
background-position：背景位置
background-size:背景大小
·auto：真实大小
· cover：背景图像等比缩放到完全覆盖容器
·contain：背景图像始终在容器内
background-attachment：背景的相对位置
·fixed：背景图像相对于窗体固定，网页滚动时，图片不会随标签一起移动
·scroll：.....图片会随标签一起移动。标签内部滚动时，不会随标签内容滚动
· local：......图片随标签内容一起移动。
css颜色渐变：
linear-gradient（）：线性渐变色
·to left：设置渐变为从右到左，相当于270deg
·to right：设置渐变从左到右，相当于90deg
·to top：设置渐变从下到上，相当于0deg
·to bottom：设置渐变从上到下，相当于180deg
radial-gradient（）：径向渐变色
·closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边
·closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角
·farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边
·farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角
如果只写一个，第二个默认为center。
·不设置“渐变半径”将默认取值为farthest-corner
·不设置“渐变形状”，“渐变半径”只填写一个半径值，“渐变形状”取值为circle，其余情况都取值ellipse。
·不设置“at圆心坐标”，则默认取值为center。
repeating-linear-gradient()：重复的线性渐变
repeating-radial-gradient()：重复的径向渐变
背景属性的补充：
·background-origin：背景图片的显示范围（参数：border-box|padding-box|content-box）
·background-clip：背景颜色和图片的裁剪范围（参数：同上）
使用css设置列表格式，超链接效果
列表标签：
list-style-type：标记样式
·dise：实心圆（默认）。
·circle：空心圆
·square：实心方块
·decimal：阿拉伯数字
·lower-roman：小写罗马数字
·upper-roman：大写罗马数字
·lower-alpha：小写英文字母
·upper-alpha：大写英文字母
·none：不使用项目符号
图片标记：list-style-image
语法：list-style-image：url（图片路径）
url（）：与设置背景图片类似，在（）中填入图片路径，使用图片代替标记符号，也可填写none代表不设置图片。
说明：设置了该属性后，list-style-type属性将无效。选取的图片无法缩放大小，所以请选择与文字行高近似的图片。
标记位置：list-style-position
·outside：标记放置在<li>标签外，不占用网页空间（默认）
·inside：标记放置在<li>标签以内，且与文本环绕排列。
标记的综合设置：list-style：标记样式 标记位置 标记图片。参数的位置不能改变，否则设置无效
列表标签的标签类型：
<li>标签的排列特性近似于<div>等块元素标签，但它自带标记内容，属于“列表元素（list-item）”。
<ul>标签不属于“列表元素”，而是块元素标签，特点是自带左填充的间距，用于放置<li>标签的标记。
四种伪类选择符：
选择符link：当前选择符中未被访问过的标签
选择符visited：当前选择符已被访问过的标签
选择符hover：当前选择符中被鼠标悬停的标签
选择符active：当前选择符中被鼠标点住的标签
不设置的伪类状态可使用一般的选择符a{ }代替，代表超链接的默认使用效果。
a{ color:#blue;} /*未访问和鼠标悬停默认采用该设置*/
a:visited{ color: #999; }/*已被访问的链接样式*/
a:active{ color: #f00; ) /*被鼠标点住的链接样式*/
使用css边框设置表格格式：
边框样式：border：边框样式 宽度 颜色：
·none|hibben：无边框
·dotted：点状边框
·dashed：虚线边框
·solid：实线边框
·double：双线边框，边框宽度需大于3px，否则效果不明显
·groove：3D凹槽边框，宽度需大于2px
·ridge：3D凸槽边框，宽度需大于2px
·inset：3D凹边边框,宽度需大于2px
·outset：3D凸槽边框，宽度需大于2px
标签轮廓的样式设置：
（1）圆角边框：border-radius：圆角的半径（1~4个参数）
border-radius：水平方向四个角的半径 / 垂直方向四个角的半径
·只填写一个参数，将用于全部的四个角
·填写全部四个参数，将按上左，上右，下右，下左的顺序作用于四个角
·填写两个参数，第一个用于上左，下右，第二个用于上右，下左。
·如果提供三个，第一个用于上左，第二个用于上右，下左，第三个用于下右。
（2）标签阴影：box-shadow：阴影的水平位置 垂直位置 模糊范围 阴影尺寸 阴影颜色inset
·水平位置，垂直位置：阴影默认与标签区域重叠，这两个参数可控制阴影向右和向下平移的距离，可填写负数使阴影反向平移
·模糊范围：阴影默认边界为实线，设置可使用阴影模糊，也起到放大阴影范围的作用
·阴影尺寸：阴影默认大小与标签相同，设置可调整阴影大小，可填写负数
·阴影颜色：控制阴影的颜色
·inset：决定阴影显示的位置，不填写时阴影显示在标签外，填写inset阴影在标签内部产生。
（3）轮廓：outline：边框样式 宽度 颜色；
outline效果与border相同，区别在于outline不占用网页空间，outline可与border同时使用，outline的效果在border的外层，但添加圆角效果时 outline始终保持矩形。
表格标签的样式设置：
（1）单元格间距：border-spacing：横向间距 纵向间距 px，%
（2）相邻边框合并：border-collapse
·separate：边框独立（默认）
·collapse：相邻边被合并
（3）表格布局方式：table-layout
取值范围：auto（默认）|fixed
使用伪类选择符“child”选择指定位置的标签：
（1）伪类选择符：E：first-child
在当前选择对象（E）中，选择处于标签层第1个标签
（2）伪类选择符：E：last-child
在当前选择对象（E）中，选择处于标签层最后1个标签
（3）伪类选择符：E：nth-child（x）
在当前选择对象（E）中，选择处于标签层第x个的标签（x为填写的数值）
（4）伪类选择符：E：nth-last-child（x）
在当前选择对象（E）中，选择处于标签层倒数第x个的标签。
（5）伪类选择符：E：only-child
在当前选择对象（E）中，在标签层中是唯一一个的标签。
·“home”模块的“实训场地”超链接设置圆角与边框效果，当鼠标接触时背景变为白色。
·“portfolio”模块的图片展示部分添加边框和圆角
·“team”模块的头像图片设置为圆形并添加边框，由于头像图片原本为宽高相等的矩形，现在只需要将圆角设置为50%，图片标签便显示为圆形
·回到“about”模块的表格部分，需要去除表格中单元格的间距，为偶数行设置背景颜色。所有单元格设置左对齐和下边框等设置，但第一行的下边框宽度较大，可使用“child伪类选择器”独立设置，同样将第一列的单元格设置为居中对齐
调整对齐的基准方式：
vertical-align 取值范围：关键词 |数值
·baseline：以文字的底端为基准进行对齐（默认）
·sub：垂直对齐文本的下标
·super：垂直对齐文本的上标
·top：以标签顶端进行对齐
·middle：以标签中间进行对齐
·bottom：以标签底端进行对齐
数值：以px或%为单位，之间调整标签在水平方向上的偏移，可设置负数
表格标签的焦点状态：
当一个表弟标签被鼠标点击后进行输入等操作时，可以称该标签处于“焦点”状态，通过伪类“focus”可以个该状态下的标签设置特殊样式效果，类似于“hover”
（1）“@font-face”文件加载到网页中：
·“@font-face{ }”属于固定的语法结构，表示在网页中定义一种新的 字体。
·“font- family”：字体名称。用于设置该字体的名称
·“src：url（“字体路径”）”通过设置的路径加载字体文件
（2）字体图标的使用和伪对象选择器：before和：after
网页中加载了字体文件后，便可让标签使用该字体，但由于字体图标不属于文字数据，无法直接写为文字显示，需要使用特定的编码代表图标
E：before{
content： “内容”；
其他属性.......
}
说明：
·1.：before：在标签内开头部分插入一个新的标签，该标签属于内联标签，文字内容是属性“content：“内容””所设置的文字，如果要设置该标签的其他属性，可在选择器：before内直接添加
·2.：after：是将新标签插入到当前标签的末尾部分
·3.：字体图标的编码以“content：“\编码”；”的格式添加到伪对象选择器中，并设置当前使用的字体为图标字体，便可被正确识别并显示。
在“services”模板的标题前加入图标标签，由于该模块已设置成文字居中，只需要统一设置图标的大小和颜色
…
计算机科学与技术
…
…
“contact”模块也是类似方法设置 .
css(层叠样式表）是控制标签样式的样式代码，所有标签都可添加css用于控制他们的样式效果。
1.css的添加方法：
（1）嵌入式：将css样式代码写在标签之间，并且需要使用标签包括。
(2)外联式：将css的样式代码写到一个独立的文本文件中，并修改文件的扩展名为.css，在网页文件的<head>部分通过<link>标签引用到网页中使用，格式如下：
css样式文件.css
div{ font-size: 16px; color: #F9F; }
选择符2{样式效果… }
网页文件.html
2.css选择符：
css选择符用于指定样式设置对应的目标，css选择符写法多样，可针对同种标签进行统一设置，也可针对指定标签进行设置。
（1）类选择符：“·”
（2）ID选择符：“id名称”
（3）包含选择符
（4）结合选择符
（5）分组选择符
（6）选择符：*{ font-size:16px;}所有标签的文字大小。
