近期学习Python的selenium时，发现牵扯到前端的一些知识，好吧，那就先看前端吧
一、HTML网页的基本结构
1、什么是HTML语言：
HTML语言指的是超文本标记语言，使用一套固定的标记标签来描述网页
2、HTML标签：
HTML标签由尖括号包围的关键字，一般成对出现，如<html> </html>
HTML标签不区分大小写
3、HTML网页的结构
简单的示例：
保存为.html文件后用网页打开如下
4、设置网页背景色和背景图片
上例中，修改body标签，并在该网页所在文件夹中添加图片
<body bgcolor="#FFCCFF"> bgcolor为背景色属性
<body bgcolor="#FFCCFF" background="1.jpg">
5、设置背景音乐
在<body></body>标签中添加bgsound标签，src为音频的源文件地址，loop为播放次数，当值为-1时表示循环播放
<body>
<bgsound src="hello.mp3" loop="-1">
</body>
6、字体和段落标签
段落标签<p>
换行标签<BR>
标题标签<H1> ~<H6> 分别代表一级标题至六级标题
显示效果如下：
字体标签 <font> </font>
字体大小值 size 字体颜色 color 字体类型 face
<font size=“+5” color=“red” face=“黑体”>
<p>静夜思</p>
</font>
特殊符号
空格
引号(“”)" "
小于(<)< <
大于(>)> >
版权号(© )© ©
水平线标签<hr/>
size，定义水平线的高度，默认值为1px
width，定义水平线的宽度，取值可以是一个像素值，也可以是一个百分比。默认值100%
align，定义水平线的对齐方式，取值为left,right,center
noshade，定义水平线有无阴影
<hr size="6" width="30%" align="center"/>
字体样式
斜体：<i>与<em> 加粗：<b>与<strong> 下划线：<u></u>
样式预格式化 <pre>test </pre>
保留文字在源代码中的格式，页面中显示的和源代码中的效果完全一致
如：
7、图像标签<img>
图像标签包含的属性如下：
src 图像的路径，border 图像的边框， width图像的宽度 ，height 图像的高度， alt为图像添加的提示性文字，align图像与文本的对齐方式（中部对齐、顶部对齐、底部对齐、左对齐、右对齐）
如：
二、HTML表格，列表
1、表格的基本语法
还用<table> </table>标签创建表格
<TD>..</TD> 定义列
<TR>..<TR>定义行
跨行 colspan 跨列 rowspan
colspan=“3” 表示跨3行
2、表格的美化修饰
在table标签中可定义以下属性：
width 设置表格的宽度
height 设置表格的高度
border 设置表格边框宽度
bordercolor 设置表格边框颜色
background 设置表格的背景图片
bgcolor 设置表格、行、列的背景色 定义在TR或TD标签中
align 设置表格内文字的对齐方式，left center right
3、表格的填充属性
border 设置外边框的厚度
cellpadding 设置单元格填充
cellspacing 设置单元格间距
table 标签中定义，具体设置的内容如下图所示：
将上例中table设置如下
<TABLE border="2" background="1.jpg" width="360" height="120" cellpadding="30" cellspacing="40">
页面显示如下图
4、有序列表
始于标签<OL>,每个列表项始于<li>标签
type 定义列表的编号类型 a,按字母显示 i,小写罗马数字显示 I,大写罗马数字显示
start 确定开始的编号
5、无序列表
使用type 定义每一列前显示的符号，circle为空心圆，square为实心矩形，默认为实心圆
6、滚动标签<marquee>
scrolldelay 滚动延迟时间，以毫秒为单位
direction 滚动的方向，默认水平滚动，从右到左
behavior 反复滚动
height和width 滚动的空间范围
在上例基础上增加一个滚动标签，代码如下
三、HTML表单<form>
1、表单的典型应用场景：
注册，登录，搜索等
浏览者输入数据-->数据填入表单中-->提交到后台处理的数据
2、表单的属性
action 属性规定向何处提交表单的地址（提交页面）
一般与submit类型表单结合使用
method 属性规定在提交表单时所用的http方法，常用的有 get （默认）和 post
get方法： 最适合少量数据的提交，因为浏览器会设定容量限制，表单数据在页面地址栏中是可见的，因此安全性不高
post方法：安全性稍高，适用于包含敏感信息的数据
name 规定识别表单的名称
3、表单元素<input>
<input> 元素有很多形态，根据不同的type属性
type 指定元素的类型，name 指定控件的名称，value 控件的初始值，size 控件的初 始宽度， maxlength 控件中输入的最多字符个数，checked控件是否被选中
四、超链接<a>
1、路径的表示方式
绝对路径：指定从根目录到文件的完整路径
相对路径：指定相对于当前文件的文件位置
如：链接到同一目录下的页面，可编写
<a href="1.html"> 相对路径
或<a href="D:\plan\1.html> 绝对路径
2、锚链接
作用：实现页面内的链接跳转，使用户“跳”到文档的某个部分
name 属性创建锚标记
<A NAME = “marker”>主题的具体内容</A>
href参数中使用该标记
<A HREF= “#marker”>主题名称</A>
即可实现点击 “主题名称” 跳转至“主题的具体内容”
3、邮箱链接
电子邮件链接
在链接标签中插入“mailto:邮箱地址”
如：<a href="mailto:761532737@qq.com">信箱</a>
五、HTML框架布局frame
1、框架是什么
一个包含多个HTML的文档的HTML文件称为框架页面，可以生成独立变化和滚动的窗
口，从而能将一个页面分割为若干个子窗体
如下图：
注：使用框架的网页不存在主体
2、作用
把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页
3、窗口分割标签<frameset>
<frameset>将窗口分割为若干子窗体，子窗口的数目取决于嵌套在该标签中<frame>标签的数目，有两个属性，rows，cols 确定高度和宽度（参数值可以是数字、百分数、符号*）
将窗口分割成n个，并设置每个窗口的高度，代码如下：
<frameset rows="值1，值2.....值n">
4、<frame>标签属性
src框架连接的源页面
noresize显示页面时能否调整框架大小
scrolling是否可以显示滚动条
如：
5、嵌套框架
在上例中间的框架中嵌套一个百度首页，如下
6、内嵌框架<iframe>
能够在不改变页面结构的情况下嵌入其他页面的内容
<iframe src=“file_url” height=“value” width=“value” name=“file_name” align=“value”>
<iframe>
六、CSS层叠样式表
CSS：是用于控制网页样式并允许将样式信息与网页内容分离的一种标签语言
1、样式表的基本语法：
<head>
<style type="text/css">
选择器{属性1：值1；属性2：值2......}
</style>
</head>
<style>标签放在<head>和</head>之间
常用的文本属性：
font-size文本的字体大小
font-family文本的字体
font-weight文本字体的粗细
font-style文本的字体样式
color设置文本的颜色
text-align设置文本的对齐方式
2、选择器的分类
a、HTML标签选择器
使用HTML可识别的标签作标识，可用于选择一组标签
若要修改整首古诗的字体等格式，可在<p>标签后面添加<font>修改，但是太麻烦，此时可以使用HTML选择器选择所有的<p>标签
在<head>中添加<style>标签
<style type="text/css"> p{color:gray;font-family:"隶书";font-size:24px}</style>
结果如下：
b、class类选择器
适用于局部几个位置的样式，不改变整个网页的段落样式，样式规则同HTML选择器，但声明时需要以“.”开始
如：修改上例中的诗名的格式
在<style>标签中添加class选择器的定义
.title{color:red;font-family:"华文彩云";font-size:36px;}
修改<p>静夜思</p>为
<p class="title">静夜思</p>
结果如下：
c、ID选择器
功能类似class选择器，大多数用于<div>标签中，样式规则同HTML选择器，但声明时需要以“#”开始
如：修改上例中最后一行日期的格式
在<style>标签中添加ID选择器的定义：
#bottom{font-size:12px;font-family:"宋体"}
修改最后一行为
<p id="bottom"> --20170822</p>
结果如下：
3、样式表的三大应用方式
a、内嵌样式表
使用于整个页面的植入内部样式在head标签里面，style标签包围样式，上例即为内嵌样式表
b、行内样式表
指将CSS样式编码写在HTML标签中
可将上例中class标签删除，直接添加在<p>标签内：<p style="color:red;font-family:"华文彩云";font-size:36px">静夜思</p>
c、外部样式表
将CSS样式代码单独放在一个外部文件中，再由网页进行调用。多个网页可以调用一个样式文件表，这样能够实现代码的最大限度的重用及网站文件的最优化配置
关联外部样式表文件有两种方式，@import和link
使用link链接的语法：
<head>
<link href="mystyle.css" rel="stylesheet" type="text/css" >
</head>
（href="style.css"是文件所在的文rel="stylesheet"是指在页面中使用这个外部的样式表;type="text/css"是指文件的类）
使用@import导入的语法：
<head>
<style type="text/css> @import url(mystyle.css)
</style>
</head>
d、外部样式表的使用实例
创建样式表文件 style.css，将上例中style中定义的样式全部移入style.css中
内容为：
1、使用link方式链接
2、使用@import导入
页面显示效果如下：
PS:为什么简书上无法粘贴html代码啊啊啊,非得我一个个手打
如复制下面：<hr size="6" width="30%" align="center"/>
粘贴至简书，结果只有水平线
