链接 a标签
-
自带属性：
href: 链接的路径
target:
_self 在当前页跳转，默认就是
_blank 在新页面跳转
-
设置所有链接默认在新页面打开
-
<base target="_blank"> -
头部设置
-
-
局部链接
-
<!-- 空链接, 加#站位 -->
<a href="#">点击</a>
<!-- #加上要跳转位置对应的id值 -->
<a href="#a">出师表</a>
<a href="#b">岳阳楼记</a>
<a href="#c">小石潭记</a>
<h3 id="a">出师表</h3>
-
-
嵌套关系
-
a标签除了不能嵌套a标签之外，可以嵌套任何其他标签
-
HTML列表
-
无序列表
-
1.块级标签
2.结构ul>li
3.前面默认自带圆点符号
4.list-style-type: none; 可以去掉圆点符号
-
-
有序列表
-
1.块级标签
2.结构ol>li
3.前面自带1、2、3、4
4.list-style-type: none;可以去掉符号
-
自带属性
type
1 A a I i
start
设置起始值
reversed
设置为倒数
-
-
自定义列表
-
1.块级标签
2.dl>dt或dd
3.dd自带外边距
-
HTML表格
-
表格的基本结构
-
table: 表格最外层大标签
-
tr: 表格每一行
-
td: 表格每个单元格，默认居左
-
-
表格的完整结构
-
thead: 表格的头部，通常写表格每一列的标题
-
tbody: 表格的主体，写表格的数据
-
tfoot: 表格的底部，写表格的脚注
-
th: 表格标题的单元格。默认居中
-
caption: 表格的标题
-
-
表格自带属性
-
border: 表格的边框
-
cellpadding: 单元格的内容与边框之间的空间
-
cellspacing: 单元格与单元格之间的空间
-
align: 单元格的水平对齐方式
-
valign: 单元格的垂直对齐方式
-
-
表格的css属性
-
border-collapse
-
collapse: 表格设置为单一边框，cellspacing失效
-
-
-
表格的合并
-
行合并
-
rowspan
-
两行合并为一行，上下合并
-
-
列合并
-
colspan
-
两列合并为一列，左右合并
-
-
语义化
-
概念：运用合适的标签和特定的属性去格式化文档（合适标签和属性要用在合适的场合）
-
优点：
-
易于开发和维护
-
用户体验比较好
-
易于seo,易于爬虫抓取关键字，能和搜索引擎建立良好的沟通。
-
即使在没有css样式的情况下，也能呈现良好的效果
-
css简介
-
cascanding style sheets （层叠样式表）（级联样式表）
-
作用：
-
文本内容：文本大小，文本颜色，对齐方式。。。。
-
标签的样式 ： 背景色，边框宽度颜色
-
页面的布局 ： 浮动，定位
-
css引入方式
-
行内式
-
行内式只作用于当前标签
-
<div style=" 200px;height: 200px;">1</div> -
特点：代码冗余，结构层与表示层不分离。
-
-
内嵌式（文本内部引入）
-
只作用于当前文档
-
<head>
<style>
/* 标签选择器 */
div {
200px;
height: 200px;
background-color: blue;
}
</style>
</head> -
特点：代码相对清晰，结构层与表示层不完全分离
-
-
外链式（文本外部引入）
-
可以作用于任何文档，需要link标签引入
-
<link rel="stylesheet" href="./css/index.css"> -
特点：代码非常清晰，结构层与表示层完全分离
-
css语法
-
属性名：属性值；属性名：属性值；属性名：属性值；属性名：属性值；。。。
-
属性名：属性值；-----一个css样式声明
-
color:red;
css引入方式优先级
-
行内式最优先，内嵌式和外链式后引入生效
基础选择器
-
通配符选择器
-
格式：
* {
属性名:属性值;
属性名:属性值;
属性名:属性值;
。
。
}
* 代表所有标签
-
-
标签选择器
-
格式：
关键字 {
属性名:属性值;
属性名:属性值;
属性名:属性值;
。
。
}
-
-
类选择器
-
格式：
.类名 {
属性名:属性值;
属性名:属性值;
属性名:属性值;
。
。
}
-
-
id选择器
-
格式
#id名 {
属性名:属性值;
属性名:属性值;
属性名:属性值;
。
。
}
-
-
优先级
-
id选择器>类选择器>标签选择器>通配符选择器
-
-