<!DOCTYPE html>
文档类型，一个文类型标记是一种标准通用标记语言的文类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档.==声明为HTML5标准==

DTD：文档类型定义 (Document Type Definition)是一套为了进行程序间的数据交换而建立的关于标记符的语法规则。

常规标签:

1	<标签属性='属性值' 属性='属性值'></标签>

空标签:
1
<标签属性='属性值' />

说明:

写在<>中第一个单词叫做标记，标签，元素.
标记和属性用空格隔开，属性和属性值用等号连接,属性值必须放在“”号内.
一个标记可以没有属性也可以有多个属性，属性和属性之间不分先后顺序。
空标记没有结束标签，用“/”代替.

文字标签

<br />:换行标签:
要换行必须使用换行标签,因为手动换行不生效.
<hr />:水平线标签:
就和Markdown的---一样.
<strong>...</strong>:加粗(表示强调)
<b>...</b>:加粗
b和strong在页面显示是一样的
<em>...</em>:倾斜
<i></i>:倾斜
空格: 
或者使用圆角空格
大于和小于号:>,<
引号,版权符号:",&copy;

图像标签

img:

src:图片路径
alt:图片加载失败时显示的文字
(alt对爬虫友好,爬虫爬取的时候就知道这张图是什么了)
title:鼠标悬停时的提示
weight/high:图片宽和高

1	<img src='..jpg' alt='' title='' weight='' high=''>

链接标签:

1	<a href="https://www.baidu.com">百度一下</a>

target属性:链接是否在新标签页中打开

_self:本页面打开
_blank:新标签页打开

<!-- 图片是一个链接 -->
<a href="https://www.baidu.com">
	<img src="img/liu.jpg"/>
</a>

常用的超链接:

页面链接:
从一个页面链接到另外一个页面
锚链接:
- 从A页面的甲位置跳转到A页面的乙位置
- 从A页面的甲位置跳转到B页面的乙位置
- 在目标标签中设置id属性-值，链接处使用href="[路径]#值"
- 设置<a name="值">目标处</a>,在链接处使用href="#值
1
2
3
4
5

<a name='水平线'></a>


<a href="#水平线">跳转锚点</a>
功能性链接

列表

无序列表:<ul>
1
2
3
4
<ul>
<li>asdasd</li>
<li>asdasd</li>
</ul>
type属性:
- disc:默认值.项目符号显示为实体圆心.
- square:项目符号显示为实体方心
- circle:项目符号显不为空心圆
有序列表ol
1
2
3
4
<ol>
<li>asdasd</li>
<li>asdasd</li>
</ol>
type属性:
- 1:默认值.使用数字作为项目符号
- A/a:使用大写/小写字母作为项目符号
- l/i:使用大写/小写罗马数字作为项目符号

定义列表:<dl>

<dl>
    <dt>所属学院</dt>
    	<dd>计算机应用</dd>
    	<dd>计算机应用2</dd>
    <dt>所属专业</dt>
    	<dd>计算机软件工程</dd>
</dl>

效果:

所属学院
	计算机应用
	计算机应用2
所属专业
	计算机软件工程

表格

<table>
    <tr>
        <td>第一行第一个单元格</td>
        <td>第一行第二个单元格</td>
    </tr>
    <tr>
        <td>第二行第一个单元格</td>
    </tr>
</table>

属性:align:表格对齐方式

表格的跨行和跨列(合并单元格)

colspan:

<table border="8">
	<tr>
		<td colspan="2">第一行第一个单元格</td>
		        <!--<td>第一行第二个单元格</td>-->
	</tr>
	<tr>
		<td>第二行第一个单元格</td>
		<td>第二行第二个单元格</td>
	</tr>
</table>

1556192072671

rowspan

<table border="8">
	<tr>
		<td rowspan="2">第一行第一个单元格</td>
		<td>第一行第二个单元格</td>
	</tr>
	<tr>
		<!--<td>第二行第一个单元格</td>-->
		<td>第二行第二个单元格</td>
	</tr>
</table>

1556192241969

表头:

<table border="8">
    <tr>
        <th>姓名</th>
        <th>性别</th>
    </tr>
	<tr>
		<td rowspan="2">第一行第一个单元格</td>
		<td>第一行第二个单元格</td>
	</tr>
	<tr>
		<!--<td>第二行第一个单元格</td>-->
		<td>第二行第二个单元格</td>
	</tr>
</table>

cellspacing:(外间距)单元格之间的距离
cellpadding:(内间距)单元格文字和边框的距离

CSS

分类:

内部样式表

1
2
3

<style type="text/css">
	<!--CSS语句-->
</style>

外部样式表

1	<link rel="stylesheet" type="text/css" href="css/traning.css" />

<!--过时的方法-->
<style type="text/css">
	@import url("css/traning.css");
</style>

内联样式表(行内样式,嵌入式样式)
1
2
3
<p style="...">
...
</p>

优先级:

行内优先级最高
内部样式和外部样式的优先级和书写的顺序有关.
后书写的优先级高

CSS语法

语法:

1	selector {属性:属性值;属性:属性值;...}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css" >
			p {
				color:red;
			}
		</style>
	</head>
	
	<body>
		<p>hello world</p>
	</body>
</html>

简单属性:

color:颜色
width:宽度(单位:px)
height:高度
background-color:背景颜色

标签分类

块级元素:(block)
- 就是以块的形式显示.==独占了一行==.
- 常用的块级元素:
  div,dl,dt,dd,ol,ul,li,filedset,h1-h6,p,form,hr,table,tr,td等等
- 块级元素可以定义自己的宽度和高度,不设置的时候默认域父级元素一样宽
内联元素:(inline)
- 行内逐个进行显示.
- 常用的内联元素:
  span,strong等等
- 内联元素没有自己的形状,不能定义宽和高.之恩能够根据所包含内容的高度和宽度来确定
内联块级元素(inline-block)
- 内联块级元素是块级元素和内联元素的混合体.inline-block可以设置宽度和高度
- 内联块级元素属于内联元素，不会独占一行，而是会和其他inline元素和 inline-block元素在同一行按从左至右的序显示。
- 常见的内联块级元素：img、textarea，Input、select、iframe等

三种元素类型可以使用 display属性转换:

block:转为块级元素
inline:转为内联元素
inline-block:转为行内块元素

使用display制作导航栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			li{
				display: inline-block;
				width: 100px;
				height: 30px;
				background-color: #ff8888;
				font-size: 12px;
				text-align: center;
				/*等于li的高度可以让文字垂直居中*/
				line-height: 30px;
			}
			a{
				color: #ffffff;
				/*去掉下划线*/
				text-decoration: none;
			}
			ul{
				color: cornflowerblue;
			}
		</style>
	</head>
	<body>
		<ul>
			<li><a href="#">导航1</a></li>
			<li><a href="#">导航2</a></li>
			<li><a href="#">导航3</a></li>
			<li><a href="#">导航4</a></li>
			<li><a href="#">导航5</a></li>
		</ul>
	</body>
</html>

1556196144141

布局整个页面:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>first web</title>
		<link rel="stylesheet" href="css/traning.css" />
	</head>
	<body>
		<div id="box">
			
			<!--logo部分-->
			<div id="logo">
			
			</div>
			
			<!--nav导航-->
			<dir id="nav">
			
			</dir>
			
			<!--广告-->
			<div id="ads">
			
			</div>
			
			<!--主体-->
			<div id="main">
				<div id="leftmain">
			
				</div>
				<div id="rightmain">
			
				</div>
			</div>
			
			<!--脚部-->
			<div id="footer">
			
			</div>
		
		</div>
	</body>
</html>

*{
	padding: 0;
	margin: 0;
}

#box{
	width: 700px;
	height: 100px;
	background-color: red;	
	margin: 0 auto;
}

#logo{
	height: 100px;
	background-color: yellow;
}

#nav{
	height: 26px;
	background-color: red;
}

#main{
	height: 600px;
	
}


#leftmain{
	display: inline-block;
	width: 350px;
	height: 600px;
	background-color: blue;
}

#rightmain{
	display: inline-block;
	width: 350px;
	height: 600px;
	float: right;
	background-color: pink;
}

#footer{
	height: 43px;
	background-color: deeppink;
}

CSS的交集选择器:
对某个元素同时使用多个选择器:

1
2
3

<h1 class="a" id='hyl'>
    1111
</h1>

/*同时是h1标签,class为a,id为hyl的元素*/
h1.a#hyl{
    color:blue;
}

CSS的并集选择器:
如果多个元素要使用相同的CSS样式,使用逗号分隔开:

/*p1,p2,p3标签同时使用同一种css*/
p1,p2,p3{
    color:blue;
}

CSS的后代选择器
爬虫用了很多了,不多谈:

1
2
3

div h1 a{
    color:blue;
}

CSS的子选择器:
选择低一级的元素:

1
2
3

#box>h{
    color:blue;
}

CSS的伪类选择器:

link:链接的颜色
hover:鼠标悬停在链接的时候
active:鼠标按住链接的时候

CSS选择器的权重

1
2
3

<h1 class="a" id="hyl">
    hello world
</h1>

1
2
3

h1{color:red;}
.a{color:blue;}
#hyl{color:green;}

问现在hello world的颜色?

权重规则:越特殊权重越高

标签选择器的权重为0001
class选择器的权重为0010
id选择器的权重为0100
属性选择器的权重为0010
伪类选择器的权重为0010
伪元素选择器的权重为0010
包含选择器的权重：为包含远择器的权重之和
子选择器的权里为0000
群组选择器的权里为0000
继承样式的权里为0000
行内样式的权重为1000

注意,上面说的权重是针对相同属性使用谁的问题,不同属性可以被多个选择器共同控制:

1	<h1 class="a" id="hyl">hello world</h1>

h1{
	color: blue;
	height: 1000px;
}

.a{
	color: green;
	background-color: pink;
}

#hyl{
	color: black;
}

上面的hello world文字

color为black
background-color为pink
height为1000px;

列表

list-style:
简写属性。用于把所有用于列表的属性置于一个声明中.
list-style-image:
将图象设置为列表项标志
list-style-position:
设置列表中列表项标志的位置
list-style-type:
设置列表项标志的类型

li{
	list-style: none url(../img/liu.jpg) inside;
}

/*相当于*/
li{
	list-style-type: none;
	list-style-image: url(../img/liu.jpg);
	list-style-position: inside;
}

背景CSS说明

background:
简写属性，作用是将背景属性设置在一个声明中。
background-attachment:
背景图像是否固定或者随着页面的其余部分滚动
background-color:
设置元素的背景色
background-image:
把图像设置为背景
background-position:
设置背图像的起始位置
background-repeat:
设置背景图像是否及如何重复

CSS的显示和隐藏

dispaly:none隐藏元素,该方式隐藏在页面中不占位
visibility:hidden隐藏元素,该方法隐藏的元素在页面中占位

折叠菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/test.css" />
	</head>
	<body>
		<ul id="menu">
			<li>
				<a href="#">good</a>
				<ul>
					<li>good1</li>
					<li>good2</li>
					<li>good3</li>
				</ul>
			</li>
			<li>
				<a href="#">nice</a>
				<ul>
					<li>nice1</li>
					<li>nice2</li>
					<li>nice3</li>
				</ul>
			</li>
			<li>
				<a href="#">pretty</a>
				<ul>
					<li>pretty1</li>
					<li>pretty2</li>
					<li>pretty3</li>
				</ul>
			</li>
			<li><a href="#">cool</a>
				<ul>
					<li>cool1</li>
					<li>cool2</li>
					<li>cool3</li>
				</ul>
			</li>
		</ul>

	</body>
</html>

* {
	padding: 0;
	margin: 0;
}

li{
	list-style: none;
}

li a{
	color: #434343;
	text-decoration: none;
}

#menu{
	width: 160px;
	margin: 50px;	
}

#menu li{
	font-size: 14px;
}

#menu>li{
	/*background: url;*/
	line-height: 24px;
	text-indent: 60px;
}

#menu ul{
	display: none;
}

#menu ul li{
	text-indent: 30px;
}

#menu>li:hover ul{
	display: block;
}

文本样式

文本大小：font-size
文本字体：font-family
文本租细：font-weight
文本倾斜：font-style
文本颜色：color
文本行高：line-height
文字属性：font简写

盒子模型

盒子模型规定了网页元素如何显示以及元素间互相关系.
CSS定义所有的元素都可以拥有像盒子一样的外形和平面空间,即都包含边框,外边距,内边距,内容区

padding就是边框到内容的距离
margin就是两个盒子之间的距离
如果两个盒子垂直排列,那么两个盒子的距离就是两个盒子的margin值取最大值.
如果两个盒子左右排列,那么两个盒子的距离就是两个盒子的margin值之和

表单

组成:

表单域
表单控件
提示信息

常用属性:

name:
表单的名称
action:
提交表单的URL
method:
提交方式
enctype:
表单在提交数据之前的编码
target:
何处打开表单URL(新建页打开/当前页打开)

表单控件:

文本框:
1
<input type="text" />
密码框:
1
<input type="password" />
提交按钮:
1
<input type="submit" />

重置按钮:

1	<input type="reset" />

单选框/单选按钮:

1	<input type="radio" />

按钮:
1
<input type="button" />
复选框:
1
<input type="checkbox" />

下拉菜单:

1
2
3

<select name="xxx">
    <option>菜单内容</option>
</select>

多行文本框:

1	<textarea name="xxx" cols="字符宽度" rows="行数"></textarea>

上传文件:
1
<input type="file" value="xx" />
上传图像:
1
<input type="image" value="xx" />

label:

1 2	<label for="name" >姓名</label> <input type="text" id="name" />

日期:
1
<input type="date" value="xx" />
颜色:
1
<input type="color" value="xx" />

浮动流

元素从正常的排列顺序被抽离

浮动可以是元素向左或向右移动,直达他的外边缘碰到包含框或另一个浮动框的边框为止.
由于浮动框不在正常的文档流中,所以标准文档流中的块框表现的就像浮动框不存在一样.
(简单来说,类似于PS中的图层.浮动流属于最前面的图层,文档流属于最后面的图层.所以浮动流会覆盖文档流)

定位

CSS定位属性(position属性)允许你对元素进行定位

1_HTML与JS