html
参考文档
w3c
超文本标签语言
<!DOCTYPE html>
<html>
<!--注释 -->
<head>用来展示当前页面的重要信息，一般不展示
<meta charset="UTF-8">网页编码
<title>网页的标题</title>
</head>存放要展示的内容，最好都放在body中
<body>
.....
</body>
</html>
书写规则
- HTML文件的扩展名是.html或者是.htm
- 标签必须用<>引起来
- 属性
- 格式：key=“value”
- 属性的值建议用引号引起来
- 不区分大小写
- 最好将所有内容放在一个标签中
<html></html> - 有开始和结束标签的称为围堵标签
- 没有结束标签的称之为空标签
<br/>
文件标签
html标签
声明当前网页为html页面
子标签
<head></head>
<body></body>
head:用来存放当前页面的重要信息，一般不展示
常见子标签
<title></title>
body:要展示的数据最好都放在body中
meta 标签
<head>
<meta charset="utf-8">
<title></title>
</head>
标题标签
<hn></hn>
n取值：1-6
1最大，6最小
自动换行，且留白
常用属性：
align：对齐方式
left
right
center
格式：
<h4 align="center">欢迎你</h4>
<h1>b标题</h1>
字体标签
<b>字体加粗
<b>文字</b>
<strong>字体加粗
<strong>文字</strong>
<br/>换行标签
<br/>代表换行
<i>斜体标签
<i>斜体</i>
<font>标签，规定文本的字体外观、字体尺寸和字体颜色。
不要使用该元素，请使用 CSS 向元素添加样式。
<font 属性名=”属性值”>文字</font>
常用属性
size:控制字体大小.最小1 最大7
color：控制字体颜色. 使用英文设置 ，使用16进制数设置
face：控制字体.
- 颜色的常用取值：
- 方式1：
# xxxxxxx为16进制
- 方式2：
- 英文单词
- 方式1：
排版标签
<br>换行标签
<p>段落标签
<p>一段文字</p>
<hr/>水平线标签
<hr/>水平线标签
图片标记
<img />
常用属性：
src：图片的路径
width：图片宽度
height：图片的高度
alt：图片提示，替代文字
大小的写法
1.像素：123px
2.百分比：20%
相对路径
./或者啥都不写: 代表当前路径
../ : 代表上一级路径
绝对路径：
带协议的路径:
https://www.baidu.com
不带协议的路径:
列表标签
无序列表
<ul>
<li>内容1</li>
<li>内容2</li>
</ul>
属性：
type，改变列表的样式
有序列表
<ol>
<li>内容1</li>
<li>内容2</li>
</ol>
属性：
type，改变列表的样式
超链接标签
<a href="跳转的路径" target="在哪里打开">超链接</a>
<a>超链接</a>
常用属性
href：超链接跳转的路径
# 表示跳转至当前路径
target：打开方式
_self：在自身页面打开
_blank：打开一个新窗口
表格标签
表格标签：
<table>
<tr>
<th></th>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
表格的属性：
* border 表格边框
* width 表格宽度
* height 表格高度
* align 水平方向对齐方式 left center right
* bgcolor 背景色
* tr和td的常用属性
* align 内容对齐，方式 left center right
* 行合并 rowspan
* 列合并 colspan
* th 表头单元格
* 居中并加粗
转义字符
不断行的空白格  
< 小于 < <
> 大于 > >
& &符号 & &
表单标签
需要提交的表单需要使用<form></form>括起来
常用属性：
action：提交路径
method：提交方式
常用子标签
input
select
textarea
<input>标签属性
type：
text 默认属性
password
radio
checkbox
file
submit
button
hidden 页面上不显示，提交时会提交
image 图片提交，使用src属性
date
email
name：
可以将几个单选框或多选框设置为一组
要将属性保存到服务器中必须有name属性
value：
text password 设置默认值
radio checked 选中后提交的值
submit rest button 给按钮起个显示的名字
<readonly>只读
<disabled>禁用
<select>标签
<option>
提交
# 提交到服务器时，对于文本框、密码框，传递手写的内容，对于选择框，传递value属性对应的值
# 下拉选也可以通过value传递，默认传递对应的内容
默认值
输入框设置value值
单选框设置checked
多选框设置selected
文本域默认的为标签内写的内容
提交方式：
GET：默认值
提交的数据都会在地址栏中进行显示
提交的数据的时候是有大小的限制
POST：
提交的数据不会在地址栏中进行显示
提交的数据没有大小限制
表单子标签可以单独使用？
文本框:
<input type="text"/>
name
value
size
maxlength
readonly
密码框：
<input type="password"/>
单选按钮：
<input type="radio"/>
Checked：默认选中
复选框
<input type="checkbox"/>
Checked：默认选中
下拉列表框
<select><option></option></select>
Selected：默认选中
Multiple：全部显示
文件上传项
<input type="file" name="file"/>
文本区
<textarea name="" cols="" rows=""></textarea>
提交按钮
<input type="submit" value="注册">
重置按钮
<input type="reset" value="重置">
普通按钮
<input type="button" value="普通按钮">
隐藏字段
<input type="hidden" name="id"/>
框架标记(了解)
<frameset>
</frameset>
* 使用了frameset标签，不需要使用body，最好不要共存.
* 属性：
* rows：横向切分页面
* cols：纵向切分页面
<frame>标签代表切分每个部分的页面
* src：引入页面的路径
<frameset rows="10%,70%,*">
<frame src="head.html"/>
<frameset cols="20%,*">
<frame src="left.html"/>
<frame src="main.html" name="main" />
</frameset>
<frame src="foot.html">
</frameset>
DIV标签
HTML中有两个块标记：
<div></div>块标签
<span></span>行内块标签
CSS
概述
Cascading Style Sheets 层叠样式表.
作用
CSS主要用来修饰HTML的显示.代码复用.将页面元素与样式进行分离.
语法
选择器{属性1:属性值;属性2:属性值;..}
<style>
h2{
color:red;
font-size:100px;
}
</style>
CSS的引入方式
内联样式：
通过标签的style的属性设置样式：
<span style="color:#00FF00 ;font-size: 100px;">训练营</span>
<div style="font-size: 2cm; background-color: cadetblue;" >天佑中华-内联</div>
内部样式：
在html的<head>标签中使用<style>标签来定义CSS
<style>
span{
color:blue;
font-size: 200px;
}
</style>
<style>
#div2{
background-color: gold;
font-size: 2cm;
}
</style>
外部样式：
将CSS定义成一个.css的文件，在html中将该文件引入到html中
<link href="style.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="css/1.css" type="text/css"/>
CSS的基本选择器
CSS的选择器为了更能精确的找个某个元素来设计的
元素选择器：
div{
color: red;
}
id选择器：
html元素必须有id属性，且有值
<style>
#d1{
color: red;
}
</style>
类选择器：
html元素必须有class属性，且有值
<style>
.d1{
color: green;
}
</style>
派生选择器
属性选择器
html元素必须有一个属性，且有值，不论是什么属性
<style>
input[type="text"]{
background-color: yellow;
}
input[type="password"]{
background-color: green;
}
span[att=val]{
background-color: #008000;
}
</style>
后代选择器：
在满足第一个条件下找第二个条件
父选择器 子孙选择器 { }
<style>
#d1 div{
color: red;
}
</style>
<style>
div span{
background-color: red;
}
</style>
锚伪类选择器：
主要用来描述超链接
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
<style>
a:link{
color:blue;
font-size: 40px;
}
a:visited{
color: red;
font-size: 40px;
}
a:hover{
color: green;
font-size: 100px;
}
a:active{
color: brown;
font-size: 200px;
}
</style>
选择器小结
id选择器：一个元素（标签）
class选择器：一类元素
元素选择器：一种元素
属性选择器：元素选择器的特殊用法
选择器优先级
就近原则
越特殊，等级越高
css属性
字体
font-family: "微软雅黑";
font-size: 30px;
font-style: italic;
文本
color 设置文本的颜色。
line-height 设置行高。
text-decoration 规定添加到文本的装饰效果。
text-align 规定文本的水平对齐方式。
列表属性
list-style 在一个声明中设置所有的列表属性。
list-style-image 将图象设置为列表项标记。使用url函数
list-style-type 设置列表项标记的类型。
ul li{
list-style-image: url(../img/reg4.gif);
}
背景属性
background 在一个声明中设置所有的背景属性。
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 设置元素的背景图像。
background-position 设置背景图像的开始位置。
background-repeat 设置是否及如何重复背景图像。
background-clip 规定背景的绘制区域。
background-origin 规定背景图片的定位区域。
background-size 规定背景图片的尺寸。
CSS的悬浮
CSS的float属性常用取值：
Left :悬浮到左边
Right :悬浮到右边
使用clear属性清除浮动：
* Left ：清除左侧浮动
* Right ：清除右侧浮动
* Both ：清除两侧的浮动
* 想要在浮动的div中换行，需在换行的位置增加1个div，将这个div清除浮动
分类
分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。
display
设置是否及如何显示元素，常用值：
none 此元素不会被显示
block 此元素以块级显示
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row 此元素会作为一个表格行显示（类似 <tr>）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column 此元素会作为一个单元格列显示（类似 <col>）
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption 此元素会作为一个表格标题显示（类似 <caption>）
inherit 规定应该从父元素继承 display 属性的值。
CSS的盒子模型
设置盒子的外边距：margin
- Margin-top
- Margin-right
- Margin-bottom
- Margin-left
设置盒子的内边距：padding - Padding-top
- Padding-right
- Padding-bottom
- Padding-left
border
是在定义尺寸上向外扩展，不影响定义的尺寸大小
简写形式 border： 大小 样式 颜色
margin
与其他元素的间距，也是向外扩展，不影响定义的尺寸大小
padding
边框与定义尺寸之间的间距，也是向外扩展，不影响定义的尺寸大小
padding和margin四个值的设置顺序
- 上 右 下 左
- 即从上开始，顺时针转，取值时本省没有看对面，对面没有按顺序取上一个
- 设置1个，则为全部一样
- 设置2个，上下、左右
- 设置3个，上、右左、下
颜色取值
- 英文取值：
color：red - 十六进制数：
color：#ff0000 - Rgb方式：
color：rgb(255,0,0)
868
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
