Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
本標記語言,即HTML(Hypertext Markup Language),是用于描述網頁文檔的一種標記語言。以下是小編為大家整理的HTML基本的標簽。
注:HTML 標簽對大小寫不敏感,但推薦使用小寫!
基本
<html>…</html> 定義 HTML 文檔
<head>…</head> 文檔的信息
<meta> HTML 文檔的元信息
<title>…</title> 文檔的標題
<link> 文檔與外部資源的關系
<style>…</style> 文檔的樣式信息
<body>…</body> 可見的頁面內容
<!--…--> 注釋
文本
<h1>...</h1> 標題字大小(h1~h6)
<b>...</b> 粗體字
<strong>...</strong> 粗體字(強調)
<i>...</i> 斜體字
<em>...</em> 斜體字(強調)
<u>...</u> 下劃線
<del>...</del> 刪除線(表示刪除)
<center>…</center> 居中文本
<ul>…</ul> 無序列表
<ol>…</ol> 有序列表
<li>…</li> 列表項目
<a href=”…”>…</a> 超鏈接
<font> 定義文本字體尺寸、顏色、大小
<sub> 下標
<sup> 上標
<br> 換行
<p> 段落
圖形
<img src=’”…”> 定義圖像
<hr> 水平線
表格
<table>…</table> 定義表格
<th>…</th> 定義表格中的表頭單元格
<tr>…</tr> 定義表格中的行
<td>…</td> 定義表格中的單元
其它
<form>…</form> 定義供用戶輸入的 HTML 表單
<frame> 定義框架集的窗口或框架
另加16進制顏色,但僅僅有16種顏色名可用英文字母,其余的要用16進制值。 記住哦!
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
、定義
<meta> 標簽提供關于 HTML 文檔的元數據。它不會顯示在頁面上,但是對于機器是可讀的。可用于瀏覽器(如何顯示內容或重新加載頁面),搜索引擎(關鍵詞),或其他 web 服務。
2、作用
meta里的數據是供機器解讀的,告訴機器該如何解析這個頁面,還有一個用途是可以添加服務器發送到瀏覽器的http頭部內容,例如我們為頁面中添加如下meta標簽:
瀏覽器的頭部就會包括這些:
只有瀏覽器可以接受這些附加的頭部字段,并能以適當的方式使用它們時,這些字段才有意義。
3、meta的必需屬性和可選屬性
meta的必需屬性是content,當然并不是說meta標簽里一定要有content,而是當有http-equiv或name屬性的時候,一定要有content屬性對其進行說明。例如:
必需屬性
<meta name="keywords" content="HTML,ASP,PHP,SQL">
這里面content里的屬性就是對keywords進行的說明,所以呢也可以理解成一個鍵值對吧,就是{keywords:"HTML,ASP,PHP,SQL"}。
可選屬性
在W3school中,對于meta的可選屬性說到了三個,分別是http-equiv、name和scheme。考慮到scheme不是很常用,所以就只說下前兩個屬性吧。
http-equiv
http-equiv屬性是添加http頭部內容,對一些自定義的,或者需要額外添加的http頭部內容,需要發送到瀏覽器中,我們就可以是使用這個屬性。在上面的meta作用中也有簡單的說明,那么現在再舉個例子。例如我們不想使用js來重定向,用http頭部內容控制,那么就可以這樣控制:
<meta http-equiv="Refresh" content="5;url=http://blog.yangchen123h.cn" />
在頁面中加入這個后,5秒鐘后就會跳轉到指定頁面啦,效果可看W3school的例子
name
第二個可選屬性是name,這個屬性是供瀏覽器進行解析,對于一些瀏覽器兼容性問題,name屬性是最常用的,當然有個前提就是瀏覽器能夠解析你寫進去的name屬性才可以,不然就是沒有意義的。還是舉個例子吧:
<meta name="renderer" content="webkit">
這個meta標簽的意思就是告訴瀏覽器,用webkit內核進行解析,當然前提是瀏覽器有webkit內核才可以,不然就是沒有意義的啦。當然看到這個你可能會有疑問,這個renderer是從哪里冒出來的,我要怎么知道呢?這個就是在對應的瀏覽器的開發文檔里就會有表明的,例如這個renderer是在360瀏覽器里說明的。360瀏覽器內核控制Meta標簽說明文檔
常用meta標簽大總結
接下來就是常用的meta標簽大總結啦,我會盡可能的做到全
charset
charset是聲明文檔使用的字符編碼,解決亂碼問題主要用的就是它,值得一提的是,這個charset一定要寫第一行,不然就可能會產生亂碼了。
charset有兩種寫法
兩個都是等效的。
百度禁止轉碼
百度會自動對網頁進行轉碼,這個標簽是禁止百度的自動轉碼
<meta http-equiv="Cache-Control" content="no-siteapp" />
SEO 優化部分
viewport
viewport主要是影響移動端頁面布局的,例如:
content 參數:
各瀏覽器平臺
Microsoft Internet Explorer
Google Chrome
360瀏覽器
UC手機瀏覽器
UCBrowser_U3_API
QQ手機瀏覽器
Apple iOS
Google Android
App Links
最后——移動端常用的meta
lt;form> 標簽用于為用戶輸入創建 HTML 表單。
表單能夠包含 input 元素,比如文本字段、復選框、單選框、提交按鈕等等。
表單還可以包含 menus、textarea、fieldset、legend 和 label 元素。
表單用于向服務器傳輸數據。
下面小編為大家介紹幾個常用的表單標簽。
這個標簽規定了 <input> 元素可能的選項列表。
一般會被用來在為<input> 元素提供"自動完成"的特性。用戶能看到一個下拉列表,里邊的選項是預先定義好的,將作為用戶的輸入數據。
我們來演示一個案例,大家就知道怎么用了:
上面這個小代碼,我們看得出,input標簽的list屬性值和datalist標簽的id是一樣的,沒錯,它們就是這樣來相互關聯起來的。當它們結合起來之后,不僅可以像select標簽一樣可以通過下拉來選擇已有的選項,還可以根據用戶輸入的字符,對選項進行匹配篩選。
效果圖如下:
有了datalist標簽,我們實現這種效果起來十分簡單,不需要任何的JavaScript代碼也能輕松實現。
標簽定義不同類型的輸出。比如腳本的輸出、一些加減乘除的運算結果,我們都可以使用這個標簽。
我們來舉個例子:輸入的數字乘以2后得到的結果,我們用output輸出顯示。
我們用oninput屬性監聽著表單的變化,并把得到的結果賦值到output標簽的value。我們來看看效果圖:
其中,output標簽是可以離開form表單標簽的,但是,如果你這樣做的話,必須給output標簽添加form屬性,其屬性值是與其相關聯form表單的id。
我們來將output移到form表單的外面試試:
<form id="demo" oninput="b.value = parseInt(a.value)*2"> <input type="number" name="a"> 乘以2= </form> <output form="demo" name="b" for="a"></output>
跟上面的代碼有幾處不同之處,form標簽多了一個id,值為“demo”,output標簽被移到了form標簽外面,不再是form標簽的子節點,變成了兄弟節點(當然你可以把它移到文檔的其他位置)。output標簽還多了一個form屬性,此時,它的值正好是form標簽的id值:“demo”。這種寫法,代碼同樣是奏效的。
這個標簽相信大家很少用到,但是也是為了學習,我們來了解一下就好。
這個標簽規定用于表單的密鑰對生成器字段。當提交表單時,私鑰存儲在本地,公鑰發送到服務器,這種機制是專為使用基于Web的證書管理系統。
我在MDN(Mozilla Developer Network)的網站上看到了關于它的一些介紹:
There iscurrently discussion among Web browser makers whether to keep this feature ornot. Until a decision is reached, it is better to continue to consider thisfeature as deprecated and going away.
大意是:目前各大瀏覽器廠商還在討論是否要保留它,在討論結束之前,你最好還是別用它。
而另一段話則是更加直接明了:
This featurehas been removed from the Web standards. Though some browsers may still supportit, it is in the process of being dropped. Do not use it in old or newprojects. Pages or Web apps using it may break at any time.
大意是:雖然有些瀏覽器還支持它,但是這個特性已經被移除出web標準了,以后別使用它了。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。