第一部分:HTML里的标签通常成对出现(除单标签外),特殊字符要用特殊转义码
一.常用标签
加粗字体可用strong和b标签(hn标签也可以做到)
斜体可用em和i标签
加下划线可用u标签
删除线用del标签
br标签用来换行
hr标签为水平分割线,可以设置width和size
span标签是修饰行内文本的标签(可自定义属性)
div为标准块级标签
二.表单标签
form一般与input标签连用
input标签要设置其type(表单类型),name(表单名称),value(表单的值)
select(选择)标签一般与option(选项可填其中)连用
textarea标签显示文本域:cols(多少列),rows(多少行)
三.超链接
a标签可存放超链接,href属性存放跳转路径具体颜色与图片应具体设置
#+id名称可以进行链接
四.图片标签(位图)
用img标签进行实现,src表示图片的路径。还有一些常见属性width(宽度),height(高度),align为大致位置取值为:top(上对齐),middle(居中对齐),bottom(下对齐),right(右对齐),left(左对齐)
五.多媒体标签
Audio标签(音频),video标签(视频)
Controls属性表示播放器的组件,autoplay属性表示自动循环,loop属性表示循环播放。
六.表格布局
table标签包含了了thead(表头),tbody(主干),tfoot(表尾),tr(行),td(列)标签
border属性设置表格边框,width宽度,height高度,bgcolor背景颜色,background背景图片,align表示表格的位置(left,center,right),
cellpadding ---- 表示的是表格边距(表示单元格内元素距离单元格边框的距离)
cellspacing------ 表示的是表格的间距(表示的是单元格和单元格之间的距离)
特殊用法:表格的嵌套和表格的合并
单元格合并行
rowspan="n" ------ n是一个整数,表示在单元格垂直方向去跨行(合并行)
colspan = "n" ------- n是一个整数,表示在单元格水平方向去跨列(合并列)
七.列表标签(有序,无序,数据列表)
1.有序列表:ol标签与li标签连用,type 属性 ----- 表示设置序号的种类 ,默认值是数值1
start属性 ------ 序号开始的位置 reversed属性----- 反序(降序)
2.无序列表:ul标签与li标签连用,type属性 ----- 无序列表的样式 disc(默认值 实心圆)circle(空心圆) square(实心方块)
3.数据列表:dl标签与dt,dl连用(新闻或数据)
第二部分:css部分
一.引入方式
行内样式:通过style属性
内嵌样式:style标签
外链样式:link标签进行导入css文件
导入样式:@import url() ,但是要注意放到style标签内部
四种选择器的优先级:就近原则,距离修饰标签的位置最近优先级最高
二.选择器
1.基本选择器:标签选择器(通过标签的名称进行获取)、ID选择器(通过标签的ID属性进行获
取)、class(类)选择器((通过标签的class属性进行获取))、通用选择器(通配符选择器 *)
四种选择器的优先级:ID > class > 标签 >通用
2.包含选择器:子代选择器:获取某个标签的第一级子标签
后代选择器:获取某个标签的所有子标签
分组选择器:逗号选择器,可以同时设置多个标签,使用逗号分隔
3.属性选择器:选择具体的属性去修改
4.伪类选择器:同一个标签,根据不同的状态,有不同的样式,这就叫做伪类
:link ----- 链接点击之前
:visited ------ 链接点击之后
:hover ------ 悬停
:active ------ 激活 鼠标点击的时候不松手的时候
对与a标签,这四种状态的顺序可不可以改变?四种状态的顺序最好固定,link visited hover active
5.伪元素选择器
三.常见样式
1.基本语法:创建一个.css的文件
选择器{
属性:属性值;
属性:属性值;
属性:属性值;
}
2.控制字体:设置字号 ------ font-size:12px;
设置颜色 ----- color : 颜色值;
设置字体 ----- font-family:“宋体”;
设置行高 ------ line-height:150%,1.5em,30px;
3.样式特点: 继承性 ------ 页面中子元素的样式会继承父元素的样式,层叠性 ----- 如果子元素和父元素设置的样式相同的情况下,子元素的样式会覆盖掉父元素的样
式
4.控制文本:text-indent ----- 设置文本的缩进 2em (可以取负值)
text-align ----- 文本的对齐方式 center left right
text-transform ---- 文本的大小写