html5+css3

标签

标签< meta />:设置页面自动刷新与跳转,例如十秒后跳到百度页面< meta http-equiv=“refresh” content=“10”; url=https://www.baidu.com/"/>
标题标签：< h1>内容< /h1> h1-h6:字号递减。一个界面中只能使用一个h1
段落标签：< p>< /p>:两个段落标签之间有一定的间隔
水平线标签：< hr />:属性：align对齐方式、size:水平线粗细、color:颜色、width:水平线宽带
换行标签：< br />
文本标签：< font >< /font>:属性：face文字字体、size:文字大小、color文字颜色
文本格式化标签：
< strong>< /strong>和< b>< /b>文字粗体、
< ins>< /ins>和< u>< /u>文字加下划线、
< em>< /em>和< i>< /i>文字斜体、
< strong>< /strong>和< b>< /b>、
< del>< /del>和< s>< /s>文字加删除线
文本语义标签：
< mark> < /mark>:在文本中高亮显示字符
< cite>< /cite>:引用：被标注的内容斜体
特殊字符标签：
& nbsp空格符
& lt小于号
& gt大于号
a< sup>& reg;</ sup>：上标
b< sub>& reg;</ sub>：下标
图像标签：< img />属性：
src=“url” 图像的路径
alt=文本 图像不能显示的替换文本
title=文本 鼠标悬停时显示的内容
width=像素 图像宽度
height=像素 图像高度
border=数字 图像边框的宽度
align=left/right/top/middle/bottom 图像对齐方式
绝对路径：在硬盘上的真正路径 如D:…或完整网络地址
相对路径：相对当前文件的路径
在同一文件夹中输入名称就行
在下一级文件夹输入文件夹和名称
在上一级文件夹在名称前加…/ 上两级加…/…/

CSS设置文本样式

属性	描述
font-size	字号大小
font-family	字体
font-weight	字体粗细 （normal、bold)
font-style	字体风格（italic斜体）
@font-face	未安装字体时定义服务器字体
color	文本颜色
letter-spacing	字间距
word-spacing	单词间距
line-height	行间距(行高）
text-transform	文本转换
text-decoration	文本装饰
text-align	水平对齐方式
line-height	文字垂直居中（属性值等于盒子的高度）
text-indent	首行缩进
white-space	空白符处理
text-shadow	阴影效果
text-overflow	标示对象内溢出文本（clip修剪溢出文本、ellipsis用…代替溢出部分）
word-wrap	长单词和URL地址的换行

引入css样式表

内嵌式：在< head>中加入< style type=“text/css”> < /style>
外链式：将所有样式存放在一个以.css为扩展名的外部样式表文件中，在< head>中通过< link />载入:< link rel=“stylesheet” type=“text/css” href=“css文件路径”/>

选择器

样式	属性
后代选择器	空格隔开，选择元素的后代
子元素选择器	h1>strong 用来选择元素的第一级子元素
临近兄弟选择器	p+h2 两个元素有同一个父元素，且第二个紧跟第一个元素
普通兄弟选择器	p~h2 两个元素有同一个父元素，两个元素不必紧跟
并集选择器	逗号隔开。同时设置css
交集选择器	紧跟，联合使用，同时有两个标签的生效，第一个为标签选择器，第二个为id或class选择器

优先级

标签(权重1)<class(权重10)<id(权重100)<行内样式<!important
多个选择器叠加时权重也叠加，但无论多少个标签选择器叠加都不class优先，class和id同理

盒子模型

样式	属性	属性值
边框样式	border-style	none没有边框、solid单实线、dashed虚线、dotted点线、double双实线
边框宽度	border-width	像素（1px)
边框颜色	border-color	颜色
综合设置	border	四边宽度 样式 颜色
内边距属性（元素内容与边框的距离）	padding	像素
外边距	边框与边框之间的距离	像素（左右都设置为auto时，块元素将水平居中）
< body>、< h1>-< h6>、 默认存在内外边距，制作页面时添加代码清除内外边距： * { padding:0; margin:0;}
背景颜色	background-color	颜色
背景图像	background-image	图片路径
背景图像平铺	background-repeat	repeat沿水平垂直方向平铺、no-repeat不平铺（位于左上角，只显示一次）、repeat-x水平平铺、repeat-y垂直平铺
背景图像位置	background-position	一般为两个值（水平和垂直方向的坐标），中间空格隔开，如right bottom右下角
背景图像固定	background-attachment	scroll图像随页面一起滚动、fixed图像固定在屏幕，不随页面滚动
综合背景	background	背景 url(“图像”) 平铺 定位 固定
盒子的总宽度=width+左右内边距+左右边框+左右外边距
盒子的总高度=height+上下内边距+上下边框+上下外边距
颜色透明度	background-color	rgba(255,0,0,0.5)最后一个参数介于0.0（完全透明）和1.0（完全不透明）
颜色透明度	opacity	0-1
圆角	border-radius	像素 设为50%时呈现圆形
图片边框	border-image	border-image-source图片路径
阴影	box-shadow	h-shadow水平阴影位置、v-shadow垂直阴影位置
线性渐变	background-image:linear-gradient(参数值)	（渐变角度,颜色值1,…颜色值n）角度：上右下左=0deg、90deg、180deg、270deg
背景图像的大小	background-size	像素

元素的类型和转换

元素的类型

1.块元素

特点是每个块元素都会独占一行或多行，可以对其设置高度、宽度，对齐等属性。
常见块元素：< div>、h1-h6、p、ul、 ol、 li

2.行内元素

不会占据一行，不可以设置高度、宽度等属性。
常见行内元素：< span>(只能包含文本或行内元素的容器) < strong> < em>

元素类型的转换

display属性值：

属性值	描述
inline：	将元素显示为行内元素
block:	将元素显示为块元素
inline-block:	将元素显示为行内块元素，可以对其设置宽高的属性，但是不会独占一行
none:	将元素隐藏，不显示，也不占用空间

块元素垂直外边距的合并

上下相邻的块元素相遇时，间距为两者中较大的边距像素；
相邻的行内元素，间距为两者的相加。

列表和超链接

去除列表前面点：list-style:none;
超链接去除下划线：text-decoration:none;

列表

无序列表

无序列表 < ul>。每对< ul>< /ul>中至少包含一对< li>< /li>
< li>默认前面有黑色实心圆点。可通过type属性改变形状。

有序列表

有序列表 < ol>。每对< ol>< /ol>中至少包含一对< li>< /li>.
li默认前面时123…

定义列表

< dl> < /dl>用于指定定义列表，< dt>< /dt>用于指定术语名词，< dd> < /dd>对名词进行解释和描述。

css控制列表样式

样式	描述	属性值
list-style-type	列表项的显示符号	none不使用符号、disc实心圆、circle空心圆、square实心方块
list-style-image	列表项的显示图像	url(路径)
list-style-position	列表项符号的位置	inside符号位于列表文本以内、outside符号位于列表文本以外（默认）
list-style	列表项的综合	符号 位置 图像

超链接

创建超链接

< a href=“跳转目标” target=“目标窗口的弹出方式”>文本或图像< /a>
target属性：

属性值	描述
_self(默认值）	在原窗口打开
_blank	在新窗口打开

锚点链接

用户能够直接跳到指定位置的内容。
使用时在href属性：href=“#id名”

表格和表单

表格

< table>< /table>定义一个表格；
< tr> < /tr>定义表格中的一行；
< td> < /td>定义表格中的一列；
tr中只能嵌套td

< table>标签的属性

属性	描述	属性值
border	表格边框	像素
cellspacing (在标签中设置)	单元格与单元格之间的空间	像素
border-spacing	单元格与单元格之间的空间	像素
cellpadding (在标签中设置)	单元格内容与单元格边框之间的空间	像素
width	表格宽度	像素
height	表格高度	像素
align	表格边框在网页中水平对齐方式	center,left,right
bgcolor	表格的背景颜色	颜色值
background	表格背景图像	url地址

< tr>标签属性

属性	描述	属性值
height	行高度	像素
align	设置一行内容的水平对齐方式	center,left,right
valign	设置一行内容的垂直对齐方式	top,middle,bottom
bgcolor	行的背景颜色	颜色值
background	行背景图像	url地址

< td>标签属性

属性	描述	属性值
height	单元格高度	像素
width	单元格宽度度	像素
align	设置单元格内容的水平对齐方式	center,left,right
valign	设置单元格内容的垂直对齐方式	top,middle,bottom
bgcolor	单元格的背景颜色	颜色值
background	单元格背景图像	url地址
colspan	设置单元格横跨的列数（用于水平合并水平方向的单元格）	正整数
rowspan	设置单元格竖跨的列数（用于水平合并竖直方向的单元格）	正整数
当设置colspan和rowspan时，其他的td直接删除或注释

< th>标签属性

为表格设置表头，位于表格的第一行，其文本加粗居中。用法与< td>一样。

表格的结构

< thead>< /thead>用于定义表格的头部。位于table标签中。
< tfoot>< /tfoot>用于定义表格页脚，位于table标签中。
< tbody>< /tbody>用于定义表格主体。位于table标签中。
< caption>< /caption>定义表格标题。
一个表格中只能定义一对< thead>< /thead>、一对< tfoot>< /tfoot>，但可以定义多对< tbody>< /tbody>。
必须按< thead>< /thead>、< tfoot>< /tfoot>、< tbody>< /tbody>顺序使用

css控制表格样式

css控制表格边框

去除单元格之间的间距，使成为一条线，在table中加入属性border-collapse:collapse; collapse为合并，separate为分离（默认）

css控制表格边距

单元格没有margin属性，设置单元格间距只能在table中设置cellspacing。
单元格内容与边框的距离可以对td设置内边距，或对table设置cellpadding。

css控制表格的宽和高

对同一行中的单元格定义不同的高度，或对同一列中的单元格定义不同的宽度时，最终的宽度或高度将取其中的较大者。

表单

创建表单

<form  action="url地址" method="提交方式"  name="表单名称">
各种表单控件
</form>

属性	描述
action	用于指定接受并处理表单数据的服务器程序的url地址
method	设置表单数据的提交方式，get提交的数据将显示在浏览器的地址栏中，post保密性更好，并无数据量的限制
name	指明表单的名称

表单控件

input控件

type属性：

属性值	描述
text	单行文本输入框
password	密码输入框（内容将以圆点的形式显示）
radio	单选按钮（必须为同一组的选项设置相同的name值。可以设置checked指定选中项）
checkbox	复选框（可以设置checked指定选中项）
button	普通按钮
submit	提交按钮
reset	重置按钮
image	图像形式的按钮（用图像替代默认的按钮，必须在type属性后加src属性指定图像的地址）
hidden	隐藏域（对用户不可见）
file	文件域

属性	属性值	描述
name	自定义	控件名称
value	自定义	控件的默认值
size	正整数	文件域
readonly	readonly	控件内容为只读（不能编辑修改）
checked	checked	定义选择控件默认为被选中状态
maxlength	正整数	控件允许输入的最多字符数

特殊：在选择性别时，希望单击男或女也可以选中，此时需要联合< lable>标签使用。使用lable标签包含提示信息（男或女），并将for属性的值设置为相应表单控件的id名称。

<form action="#" method="POST">
			性别：
			<input type="radio" name="sex" checked="chencked" id="man"/><label for="man">男</label>
				<input type="radio" name="sex"  id="woman"/><label for="woman">女</label>
		</form>

textarea控件

如果需要输入大量信息，在用textarea控件。

<textarea cols="每行中字符数" rows="显示的行数">
文本内容
</textarea>

select控件

在表单中加入下拉菜单

<select>
					<option>选项1</option>
					<option>选项2</option>
					<option>选项3</option>
</select>

select属性：
size:指定下拉菜单的可见选项数；
multiple:当定义为multiple=“multiple”;具有多项选择的功能，按住Ctrl键的同时选择。
option属性：
selected:当定义为selected="selected"时，当前项为默认选中项。

有时需要在下拉菜单中进行分组:
< optgroup>< /optgroup>用于定义选项组，此标签必须有lable属性。

<form action="#" method="POST">
			<select>
			<optgroup label="北京">
					<option>选项1</option>
					<option>选项2</option>
					<option>选项3</option>
					</optgroup>
					<optgroup label="山东">
							<option>选项4</option>
							<option>选项5</option>
							<option>选项6</option>
							</optgroup>
				</select>
		</form>

效果：

图像100%完全显示：background: url(img/xsb.jpg) no-repeat bottom center/100%;
设置盒子大小始终为100%：box-sizing:border-box;
box-sizing 属性可以被用来调整这些表现：

content-box 是默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去 (border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

获奖名单两边的线：使用伪类在后面加了一个小矩形


表格单元中设置内容省略号：

1. 控制文本不换行

white-space: nowrap;

2. 超出长度时，出现省略号

overflow:hidden;

text-overflow:ellipsis

3. 修改表格布局算法

table-layout:fixed;table-layout的默认值为automatic，意思是列宽度由单元格内容设定。而fixed意思是列宽由表格宽度和列宽度设定。

文本两端对齐

text-align: justify;/* 可以使文本的 两端 都 对齐 */