近期學習Python的selenium時奈梳，發(fā)現(xiàn)牽扯到前端的一些知識忘巧，好吧斩郎，那就先看前端吧
一堤舒、HTML網(wǎng)頁的基本結(jié)構(gòu)
1费尽、什么是HTML語言：
HTML語言指的是超文本標記語言擎颖，使用一套固定的標記標簽來描述網(wǎng)頁
2帅矗、HTML標簽：
HTML標簽由尖括號包圍的關鍵字吗蚌，一般成對出現(xiàn)布朦，如<html> </html>
HTML標簽不區(qū)分大小寫
3囤萤、HTML網(wǎng)頁的結(jié)構(gòu)
簡單的示例：
保存為.html文件后用網(wǎng)頁打開如下
4、設置網(wǎng)頁背景色和背景圖片
上例中是趴，修改body標簽涛舍，并在該網(wǎng)頁所在文件夾中添加圖片
<body bgcolor="#FFCCFF"> ? ?bgcolor為背景色屬性
<body bgcolor="#FFCCFF" background="1.jpg">
5、設置背景音樂
在<body></body>標簽中添加bgsound標簽右遭，src為音頻的源文件地址做盅，loop為播放次數(shù)，當值為-1時表示循環(huán)播放
<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>標簽創(chuàng)建表格
<TD>..</TD> 定義列
<TR>..<TR>定義行
跨行 colspan ?跨列 rowspan
colspan=“3” 表示跨3行 ??
2、表格的美化修飾
在table標簽中可定義以下屬性：
width 設置表格的寬度
height ?設置表格的高度
border ?設置表格邊框?qū)挾?/h4>bordercolor ?設置表格邊框顏色
background ?設置表格的背景圖片
bgcolor ? 設置表格攻冷、行娃胆、列的背景色 ?定義在TR或TD標簽中
align 設置表格內(nèi)文字的對齊方式，left center right
![]()
![]()
3等曼、表格的填充屬性
border 設置外邊框的厚度
cellpadding ?設置單元格填充
cellspacing ?設置單元格間距
table 標簽中定義，具體設置的內(nèi)容如下圖所示：
將上例中table設置如下
<TABLE border="2" background="1.jpg" width="360" height="120" cellpadding="30" cellspacing="40">
頁面顯示如下圖
4凿蒜、有序列表
始于標簽<OL>,每個列表項始于<li>標簽
type 定義列表的編號類型 a,按字母顯示 ?i,小寫羅馬數(shù)字顯示 I,大寫羅馬數(shù)字顯示
start 確定開始的編號
5禁谦、無序列表
使用type 定義每一列前顯示的符號，circle為空心圓废封，square為實心矩形州泊，默認為實心圓
6、滾動標簽<marquee>
scrolldelay 滾動延遲時間漂洋，以毫秒為單位
direction 滾動的方向遥皂，默認水平滾動，從右到左
behavior 反復滾動
height和width 滾動的空間范圍
在上例基礎上增加一個滾動標簽刽漂，代碼如下
三演训、HTML表單<form>
1、表單的典型應用場景：
注冊贝咙，登錄样悟，搜索等
瀏覽者輸入數(shù)據(jù)-->數(shù)據(jù)填入表單中-->提交到后臺處理的數(shù)據(jù)
2、表單的屬性
action 屬性規(guī)定向何處提交表單的地址（提交頁面）
一般與submit類型表單結(jié)合使用
method 屬性規(guī)定在提交表單時所用的http方法，常用的有 get （默認）和 post
get方法： 最適合少量數(shù)據(jù)的提交窟她，因為瀏覽器會設定容量限制陈症，表單數(shù)據(jù)在頁面地址欄中是可見的，因此安全性不高
post方法：安全性稍高震糖，適用于包含敏感信息的數(shù)據(jù)
name 規(guī)定識別表單的名稱
3录肯、表單元素<input>
<input> 元素有很多形態(tài)，根據(jù)不同的type屬性
type 指定元素的類型吊说，name 指定控件的名稱论咏，value 控件的初始值，size 控件的初 始寬度疏叨， maxlength 控件中輸入的最多字符個數(shù)潘靖，checked控件是否被選中
四、超鏈接<a>
1蚤蔓、路徑的表示方式
絕對路徑：指定從根目錄到文件的完整路徑
相對路徑：指定相對于當前文件的文件位置
如：鏈接到同一目錄下的頁面卦溢，可編寫
<a href="1.html"> ? 相對路徑
或<a href="D:\plan\1.html> ? 絕對路徑
2、錨鏈接
作用：實現(xiàn)頁面內(nèi)的鏈接跳轉(zhuǎn)秀又，使用戶“跳”到文檔的某個部分
name 屬性創(chuàng)建錨標記?
<A NAME = “marker”>主題的具體內(nèi)容</A>
href參數(shù)中使用該標記
<A HREF= “#marker”>主題名稱</A>
即可實現(xiàn)點擊 “主題名稱” 跳轉(zhuǎn)至“主題的具體內(nèi)容”
3单寂、郵箱鏈接
電子郵件鏈接
在鏈接標簽中插入“mailto:郵箱地址”
如：<a href="mailto:761532737@qq.com">信箱</a>
五、HTML框架布局frame
1吐辙、框架是什么
一個包含多個HTML的文檔的HTML文件稱為框架頁面宣决，可以生成獨立變化和滾動的窗
口，從而能將一個頁面分割為若干個子窗體
如下圖：
注：使用框架的網(wǎng)頁不存在主體
2昏苏、作用
把瀏覽器窗口劃分為若干個區(qū)域尊沸，每個區(qū)域可以分別顯示不同的網(wǎng)頁
3、窗口分割標簽<frameset>
<frameset>將窗口分割為若干子窗體贤惯，子窗口的數(shù)目取決于嵌套在該標簽中<frame>標簽的數(shù)目洼专，有兩個屬性，rows孵构，cols 確定高度和寬度（參數(shù)值可以是數(shù)字屁商、百分數(shù)、符號*）
將窗口分割成n個颈墅，并設置每個窗口的高度蜡镶，代碼如下：
<frameset rows="值1，值2.....值n">
4恤筛、<frame>標簽屬性
src框架連接的源頁面
noresize顯示頁面時能否調(diào)整框架大小
scrolling是否可以顯示滾動條
如：
5官还、嵌套框架
在上例中間的框架中嵌套一個百度首頁，如下
6叹俏、內(nèi)嵌框架<iframe>
能夠在不改變頁面結(jié)構(gòu)的情況下嵌入其他頁面的內(nèi)容
<iframe src=“file_url” height=“value” width=“value” name=“file_name” align=“value”>
<iframe>
六妻枕、CSS層疊樣式表
CSS：是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標簽語言
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>
結(jié)果如下：
b饵撑、class類選擇器
適用于局部幾個位置的樣式剑梳，不改變整個網(wǎng)頁的段落樣式，樣式規(guī)則同HTML選擇器滑潘，但聲明時需要以“.”開始
如：修改上例中的詩名的格式
在<style>標簽中添加class選擇器的定義
.title{color:red;font-family:"華文彩云";font-size:36px;}
修改<p>靜夜思</p>為
<p class="title">靜夜思</p>
結(jié)果如下：
c垢乙、ID選擇器
功能類似class選擇器，大多數(shù)用于<div>標簽中语卤，樣式規(guī)則同HTML選擇器追逮，但聲明時需要以“#”開始
如：修改上例中最后一行日期的格式
在<style>標簽中添加ID選擇器的定義：
#bottom{font-size:12px;font-family:"宋體"}
修改最后一行為
<p id="bottom"> --20170822</p>
結(jié)果如下：
3、樣式表的三大應用方式
a粹舵、內(nèi)嵌樣式表
使用于整個頁面的植入內(nèi)部樣式在head標簽里面钮孵，style標簽包圍樣式，上例即為內(nèi)嵌樣式表
b眼滤、行內(nèi)樣式表
指將CSS樣式編碼寫在HTML標簽中
可將上例中class標簽刪除巴席，直接添加在<p>標簽內(nèi)：<p style="color:red;font-family:"華文彩云";font-size:36px">靜夜思</p>
c、外部樣式表
將CSS樣式代碼單獨放在一個外部文件中诅需，再由網(wǎng)頁進行調(diào)用漾唉。多個網(wǎng)頁可以調(diào)用一個樣式文件表，這樣能夠?qū)崿F(xiàn)代碼的最大限度的重用及網(wǎng)站文件的最優(yōu)化配置
關聯(lián)外部樣式表文件有兩種方式堰塌，@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毡证、外部樣式表的使用實例
創(chuàng)建樣式表文件 style.css，將上例中style中定義的樣式全部移入style.css中
內(nèi)容為：
1蔫仙、使用link方式鏈接
2、使用@import導入
頁面顯示效果如下：
PS:為什么簡書上無法粘貼html代碼啊啊啊,非得我一個個手打
如復制下面：<hr size="6" width="30%" align="center"/>
粘貼至簡書丐箩，結(jié)果只有水平線
