HTML & CSS 基础

4.列表

• 无序列表 ul / li
  ul 表示行, li 表示列
• 有序列表 ol / li
  ol type属性 (Type=“A”) 表示编号格式

5.超链接

<a href="链接地址">文字(或图片/表格/列表...)</a>

属性:
href：指定访问资源的URL
target：指定打开资源的方式

• _self: 默认值，在当前页面打开
• _blank：在空白页面打开

6.行级 \ 块级标签

div 是块级标签, 占满一行
span 是行内标签 (内联标签, 将多块元素放置在同一行)
注: 这两种标签没有本质含义, 可以用于标记内容并统一设置格式

7.语义化标签

<header> 页眉
<footer> 页脚

8.表格标签

table：定义表格
	1.width：宽度
	2.border：边框
	3.cellpadding：定义内容和单元格的距离
	4.cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
	5.bgcolor：背景色
	6.align：对齐方式
tr：定义行
	1.bgcolor：背景色
	2.align：对齐方式
td：定义单元格
	1.colspan：合并列
	2.rowspan：合并行
th：定义表头单元格
<caption>：表格标题
<thead>：表示表格的头部分
<tbody>：表示表格的体部分
<tfoot>：表示表格的脚部分

9.表单标签

(1) form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
属性：

action：指定提交数据的URL
method:指定提交方式
	get：（参数会在地址栏显示, 不安全）
	post：(参数不会在地址栏中显示,较安全)

(2) input：可以通过type属性值，改变元素展示的样式

type属性：
1.text：文本输入框，默认值
	placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
2.password：密码输入框
3.radio:单选框
	要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
	一般会给每一个单选框提供value属性，指定其被选中后提交的值
	checked属性，可以指定默认值
4.checkbox：复选框
	value属性，指定其被选中后提交的值
	checked属性指定默认选中
5.file：文件选择框
6.hidden：隐藏域，用于提交一些信息。
7.submit：提交按钮。可以提交表单
8.button：普通按钮
9.image：图片提交按钮
	src属性指定图片的路径
10.label：指定文字描述信息
11.select: 下拉列表
	option，指定列表项
12.textarea：文本域
	cols：指定列数
	rows：默认行数

<input id="box" type="checkbox" name="5" value="5"/>

<2> CSS 3

1.使用方式:

(1) 内联样式 (在标签内)

 <div style="color:red;">hello css</div>

(2) 内部样式(在head标签内，定义style标签，style标签的标签体内容css)

<style>
div{
color:blue;
}
</style>
<div>二聪真好看</div>

(3) 外部样式
在head标签内，定义link标签，引入外部的资源文件*.css

div{
color:green;
}
<link rel="stylesheet" href="css/a.css">
<div>狗蛋好厉害</div>

2.选择器

(1) 基础选择器

1. id 选择器: #id属性值{} : 选择具体id属性值的元素
2. 元素选择器: 标签名{} :选择具有相同标签名称的元素
3. 类选择器: .class属性值{} 选择具有相同属性值的元素

注: 优先级: id 选择器>类选择器>元素选择器

(2) 扩展选择器

1. 选择所有元素: *{}
2. 并集选择器: 选择器1, 选择器2{} 两个选择器元素同时生效
3. 子选择器: 选择器1 选择器2{} 筛选选择器1下的选择器2
4. 父选择器: 选择器1>选择器2{} 筛选选择器2下上的选择器1
5. 属性选择器: 元素名称[属性名=“属性值”]{}

input[type='text']{}

7. 伪类选择器: 元素: 状态{}
   超链接的状态 (颜色) : link 初始化状态; visited 被访问过的状态; active 正在访问的状态; hover 鼠标悬浮状态

3.属性

(1) 字体

font-size：字体大小
color：文本颜色
text-align：对其方式
line-height：行高

(2) 背景: background
(3) 边框: border
(4) 尺寸:

width: 宽度
height: 高度

(5) 页面布局:

margin: 外边框
padding: 内边距

4.例子

h5{
    position: absolute;
    top:70%;
    left: 35%;
    text-align: center;
	vertical-align: middle;
    font-family: Raleway, sans-serif;
    font-weight: 300;
    text-transform: lowercase;
    padding: 60px;
    line-height: 1.5;
    width: 30%;
    height: 50%;
}

#sub{
	width: 150px;
	height: 40px;
	background: rgba(255,255,255,40%);
	margin: 0 auto;
	border-radius: 10px;
}

<h5><hr id="line" style="border: 0.5px solid #878787;" />
<a class="url" href="text.html" target="_blank">了解详情</a>
&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
<a class="url" href="#top" target="_blank">忘记密码</a>
&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
<a class="url" href="#top" target="_blank">联系我们</a><br/>