前端三劍客之 HTML

時間 2019-11-22

標籤前端劍客 html 欄目 HTML 简体版

原文原文鏈接

HTML標籤

全部的html標籤都應該有個id屬性，用來惟一標識當前標籤，爲後續的DOM操做提供基礎，IDS惟一的css

HTML簡便語法

URL介紹：統一資源調配

什麼是URL？

URL是統一資源定位器(Uniform Resource Locator)的縮寫，也被稱爲網頁地址，是因特網上標準的資源的地址。

URL舉例

http://www.sohu.com/stu/intro.html

http://222.172.123.33/stu/intro.html

URL地址由4部分組成

第1部分：爲協議：http://、ftp://等

第2部分：爲站點地址：能夠是域名或IP地址

第3部分：爲頁面在站點中的目錄：stu

第4部分：爲頁面名稱，例如 index.html

各部分之間用「/」符號隔開。html

head類經常使用標籤

<head>
head存放的內容用戶是看不到的，主要是給瀏覽器和搜索引擎看的
</head>

title 定義網頁標題

<title>
  定義了網頁標題，在瀏覽器標題欄顯示。  
</title>

meta 定義網頁原信息

<!--指定文檔的編碼類型(須要知道)-->
<meta http-equiv="content-Type" charset="UTF8"> 
<!--2秒後跳轉到對應的網址，注意引號(瞭解)-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--告訴IE以最高級模式渲染文檔(瞭解)-->
<meta http-equiv="x-ua-compatible" content="IE=edge">       
<!--name屬性: 主要用於描述網頁，與之對應的屬性值爲content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。-->
<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">
<meta name="description" content="老男孩教育Python學院">

link 引入外部樣式表文件或網站圖標
<link rel="stylesheet" href="css路徑">  引入css代碼

style css代碼標籤
<style> css標籤</style>

script js標籤

<script> js標籤內容</script>  <!--能夠直接引用-->
<script src='文件路徑'> </script> <!--能夠使用 src文件 引用-->

body類經常使用標籤

<body>
用戶可以看見的內容都在body裏面
</body>

註釋：

基本標籤（塊級標籤和內聯標籤）

<b>加粗</b>
<i>斜體</i>
<u>下劃線</u>
<s>刪除</s>
<p>段落標籤</p>
<h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題6</h6>

<!--換行-->
<br>

<!--水平線-->
<hr>

特殊字符

內容對應代碼（因爲顯示問題，每一個後面少個「；」號）

空格 &nbsp

> &gt

< &lt

& &amp

¥ &yen

版權 &copy

註冊 &reg

內容	對應代碼（因爲顯示問題，每一個後面少個「；」號）
空格	&nbsp
>	&gt
<	&lt
&	&amp
¥	&yen
版權	&copy
註冊	&reg

經常使用標籤

div 標籤
<div>
 內容
</div>
塊級標籤後端

獨佔一行

塊兒級標籤可以嵌套塊兒級標籤和行內標籤

p標籤雖然是塊兒級標籤可是它不能嵌套任何的塊兒級標籤

塊兒級標籤可以設置長寬

sqan 行內標籤
<span>
內容
</span>
自身內容有多的就佔多大瀏覽器

行內標籤不能設置長寬post

注：塊級標籤能夠設置長寬，行內標籤不能設置長寬網站

img 標籤

<img src="圖片的路徑" alt="圖片未加載成功時的提示" title="鼠標懸浮時提示信息" width="寬" height="高(寬高兩個屬性只用一個會自動等比縮放)">

a標籤
<a href="http://www.oldboyedu.com" target="_blank" >點我</a>
href ：屬性指定目標網頁地址。該地址能夠有幾種類型：

絕對URL - 指向另外一個站點（好比 href="http://www.jd.com）

相對URL - 指當前站點中確切的路徑（href="index.htm"）

錨URL - 指向頁面中的錨（href="#top"）（top爲須要跳轉的id定位）

target：用來控制是否當前頁跳轉，默認_self

_blank表示在新標籤頁中打開目標網頁

_self表示在當前標籤頁中打開目標網頁

列表標籤
1.無序列表ui
<ul type="disc">
<li>第一項</li>
<li>第二項</li>
</ul>
type屬性：

disc（實心圓點，默認值）

circle（空心圓圈）

square（實心方塊）

none（無樣式）

2.有序列表搜索引擎
<ol type="1" start="2">
<li>第一項</li>
<li>第二項</li>
</ol>
start 從第幾個開始

type屬性：

1 數字列表，默認值

A 大寫字母

a 小寫字母

Ⅰ大寫羅馬

ⅰ小寫羅馬

3.標題列表編碼
<dl>
<dt>標題1</dt>
<dd>內容1</dd>
<dt>標題2</dt>
<dd>內容1</dd>
<dd>內容2</dd>
</dl>

表格
<table>
<thead>
<tr>
<th>序號</th>
<th>姓名</th>
<th>愛好</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Egon</td>
<td>槓娘</td>
</tr>
<tr>
<td>2</td>
<td>Yuan</td>
<td>日天</td>
</tr>
</tbody>
</table>
屬性:

border: 表格邊框寬度.

cellpadding: 內邊距

cellspacing: 外邊距.

width: 像素百分比.（最好經過css來設置長寬）

rowspan: 單元格豎跨多少行

colspan: 單元格橫跨多少列（即合併單元格）

form 表單：

獲取用戶輸入（手動輸入、選擇、默認值），並將獲取到的用戶信息發送給後端url

type屬性值表現形式對應代碼

text 單行輸入文本

password 密碼輸入框 <!input type="password" />

date 日期輸入框 <!input type="date" />

checkbox 複選框 <!input type="checkbox" checked="checked" />

radio 單選框 <!input type="radio" />

submit 提交按鈕 <!input type="submit" value="提交" />

reset 重置按鈕 <!input type="reset" value="重置" />

button 普通按鈕 <!input type="button" value="普通按鈕" />

hidden 隱藏輸入框 <!input type="hidden" />

file 文本選擇框 <!input type="file" />

屬性說明:

name：表單提交時的「鍵」，注意和id的區別

value：表單提交時對應項的值

type="button", "reset", "submit"時，爲按鈕上顯示的文本年內容

type="text","password","hidden"時，爲輸入框的初始值

type="checkbox", "radio", "file"，爲輸入相關聯的值

checked：radio和checkbox默認被選中的項

readonly：text和password設置只讀

disabled：全部input均適用，值爲disabled=‘disabled’

type屬性值	表現形式	對應代碼
text	單行輸入文本
password	密碼輸入框	<!input type="password" />
date	日期輸入框	<!input type="date" />
checkbox	複選框	<!input type="checkbox" checked="checked" />
radio	單選框	<!input type="radio" />
submit	提交按鈕	<!input type="submit" value="提交" />
reset	重置按鈕	<!input type="reset" value="重置" />
button	普通按鈕	<!input type="button" value="普通按鈕" />
hidden	隱藏輸入框	<!input type="hidden" />
file	文本選擇框	<!input type="file" />

select標籤
<form action="" method="post">
<select name="city" id="city">
<option value="1">北京</option>
<option selected="selected" value="2">上海</option>
<option value="3">廣州</option>
<option value="4">深圳</option>
</select>
</form>
屬性說明：

multiple：布爾屬性，設置後爲多選，不然默認單選

disabled：禁用

selected：默認選中該項

value：定義提交時的選項值

label標籤

定義：標籤爲 input 元素定義標註（標記）。

說明：

label 元素不會向用戶呈現任何特殊效果。

標籤的 for 屬性值應當與相關元素的 id 屬性值相同。
<form action="">
<label for="username">用戶名</label>
<input type="text" id="username" name="username">
</form>

textarea多行文本
<textarea name="memo" id="memo" cols="30" rows="10">
默認內容
</textarea>
屬性說明：

name：名稱

rows：行數

cols：列數

disabled：禁用

相關標籤/搜索

每日一句

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