HTML標籤

時間 2019-11-11

標籤 html 標籤欄目 HTML 简体版

原文原文鏈接

1、標籤css

HTML
1.html由瀏覽器去解析，存在兼容性問題
2.html文件的後綴名能夠是 .html 或 .htm
3.它是一個標記語言，並不是編程語言

標籤
1.標籤是由尖括號包圍的關鍵詞好比 <html>
2.標籤分爲單標籤和雙標籤 <br/> <p></p>
3.標籤之間能夠相互嵌套，切記不許許穿插嵌套 <div><p></br></p></div>html

屬性
1.<標籤名屬性名1="屬性值" 屬性名2="屬性值" ... 屬性名N="屬性值">
<!– 輸出內容… -->
</標籤名>
2.全部關於樣式的屬性，咱們都可以不去記憶，有單獨的css能夠完成

註釋重要
1.html 
2.爲了提升代碼的可讀性

html文檔特性
1.在源碼中所敲空格和回車都只起一個空格的做用，寫再多也沒有效果
2.切記不要使用空格去排版編程

文檔命名規則
第一個字符必須是字母，以後的字符能夠是數字，字母，下劃線(還能夠有點 .)瀏覽器

文檔主體結構h5
<!DOCTYPE html> 文檔聲明頭，告知瀏覽器下面所寫的代碼用那個版本去解析
<html>
<head>填寫公共屬性信息,用戶所查看不到的內容，填寫在這裏面</head>
<body>凡是想讓用戶查看的信息，咱們填寫在body裏</body>
</html>安全

head中的內容
<meta charset="UTF-8"> 設置中文字符集
<meta http-equiv="refresh" content="5;url=https://www.baidu.com"> 自動刷新及跳轉
<title></title> 設置網頁標題的標籤

body中的內容
<h1~6>填寫標題內容</h1~6> 獨佔一行樣式上字體較大，文字加粗。對搜索引擎有很好的優化做用！可是一個頁面僅限用一次
<p>填寫段落內容</p> 獨佔一行
<br/> 單標籤具備換行效果
<pre></pre> 按照html源碼中的格式展示在瀏覽器上！
<hr/> 單標籤顯示一條與父標籤等寬的水平線
<span></span> 無心義的行及標籤不會獨佔一行
<div></div> 無心義的塊及標籤獨佔一行

非重點
粗體標籤 <b></b>
斜體標籤 <i></i>
下劃線標籤 <u></u>
刪除線標籤 <del></del>
上標標籤 <sup></sup>
下標標籤 <sub></sub>

字符實體
用於顯示是一些有特殊意義的符號，在源碼中所寫的內容不能直接顯示在頁面當中，就須要用到字符實體
經常使用的字符實體：
空格：  
右尖角號: >　　
左尖角號: <　　
備案圖標版權: ©

a連接標籤
<a href="填寫連接地址" target="設置打開方式" title="用於對連接的描述">連接名稱</a>
href ：
1.可填寫具體的網絡地址
2.還能夠填寫相對地址
3.能夠填寫絕對地址
4.什麼都不填寫，表明當前頁面的
5.填寫#號，表明當前頁面刷新

target：
1._blank 新頁面打開
2._self 默認形式，表明在當前打開新的頁面

title：當用戶鼠標放在連接上時，會有一個小提示。提示的內容就是咱們所填寫的值服務器

錨點連接
須要如今頁面當中設置錨
<a name="自定義錨的名字"></a>

想要跳轉至某個錨的時候
<a href="文件地址#要跳轉的錨的名稱">自定義文字</a>

圖片標籤
<img src="填寫圖片地址" alt="對圖片的簡單介紹">

src：
1.能夠填寫網絡地址
2.能夠填寫當前服務器上的相對地址

alt：
在圖片沒有加載時，自動顯示alt中的內容，給用戶友好體驗
搜索引擎在搜索優化時，可以更好更準確的知道當前圖片的內容，更加容易讓搜索引擎收錄

熱點地圖非重點
須要在img標籤中填寫usemap屬性屬性值 "#自定義的名稱"
<map name="等於usemap中自定義的名稱，不帶#號" id="與咱們的name值相同">
<area shape="熱點類型" coords="根據熱點的形狀，填寫不一樣個數的值" href="跳轉地址"/>
</map>
定義id的目的，是爲了讓更多的瀏覽器支持熱點地圖標籤
shape：
rect 矩形
circle 圓形
poly 多邊形

coords：
矩形，兩個點肯定一個矩形 x1,y1,x2,y2
圓形，一個點加上一個半徑 x,y,r
多邊形，根據咱們想要畫的多邊形的頂點來肯定具體的點的個數

列表標籤
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
<dl>
<dt></dt>
<dd></dd>
</dl>

表格標籤
<table>
<caption></caption>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td rowspan="" colspan=""></td>
<td></td>
</tr>
</table>

table一樣是固定搭配格式，中間不要聽任何代碼
caption 表的標題內容所展現位置
th 表頭所存放的位置字體會加粗，默認會居中對齊

使用合併時，必定注意將多餘的代碼刪除
rowspan 跨行合併
colspan 跨列合併

form表單重點

全部的表單均須要寫在form標籤對中
<form>
表單內容
</form>
action：填寫提交地址，若是不填寫，表明提交至當前頁面
method：提交方式，get或post 默認是get
get 經過url把用戶所填寫的表單內容進行傳輸，速度快，可是安全性不高而且傳輸內容較少，最多8萬個字符
post 加密方式提交，相對比較安全，可是速率較慢。而且咱們在傳輸過程當中查看不到傳輸的內容

表單中的公共屬性
name：全部的表單咱們均須要填寫name屬性(提交功能的表單除外)，若沒有name屬性，則沒法把對應的值提交至服務器。
value：默認值。
maxlength:設置用戶填寫的最大長度，長度單位爲字符個數（中英文通用！），但在實際項目開發中，不推薦你們使用。
readonly:
readonly 屬性規定輸入字段爲只讀,但其value值仍會被表單提交
readonly屬性只針對text、password和textarea有效
disabled:
disabled屬性規定禁用該表單元素，其value值不會被表單提交
disabled屬性對全部表單元素均有效，包括包括select, radio, checkbox, button等
使用disabled屬性後表單元素背景會變成灰色

單行文本框
<input type="text" name="起一個名字"/>

密碼框
<input type="password" name=""/>

多行文本框
<textarea name=""></textarea>
與單行文本框相對比，填寫的內容讓用戶查看到的更多。

單選框
<input type="radio" name="" value="" checked="checked" />
name：同一組單選框要使用相同name名稱。
value：單選框提交數據與其餘框不一樣，它是沒有值的！因此須要咱們手動定義值，這時候就須要用到value。
checked：若想要設置默認選項，就在對應的表單上填寫checked屬性。網絡

複選框
<input type="checkbox" name="like[]" value="0" checked="checked"/>
name：同一組複選框要求名稱相同，而且名字後面必定要加上一個英文的 [] , 爲了解決重名問題。
value：多選框自己一樣是沒有值，須要咱們提早自定義。
checked：用於選擇默認選項的。

下拉菜單
<select name="cs" id="" >
<option value="zz">鄭州</option>
<option value="sh">上海</option>
<option value="bj">北京</option>
</select>
select：表明下拉菜單框
option：具體的菜單選項
value：填寫value後臺才能對應接收到數據

瀏覽框
<input type="file" name="" />

隱藏表單
<input type="hidden" name="" value=""/>
name：自定義的名字
value：是服務器所給咱們指定好的值

提交按鈕
<input type= "submit" name="" value=""/>
<button type=「submit」>提交</button>
重置按鈕
<input type= "reset" name="" value=""/>
<button type="reset">重置</button>
普通按鈕
<input type= "button" name="" value=""/>
<button type="button">普通按鈕</button>

用於與表單標籤實現綁定關係
<label for=""></label>
須要在綁定表單當中自定義一個id
for：該 label想要與那個表單進行綁定時，把對應的表單的id填寫在for上編程語言

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。