【02】Html(如鵬)

時間 2019-11-18

標籤 html 欄目 HTML 简体版

原文原文鏈接

1.HTML簡介
HTML (Hyper Text Mark-up Language) 超文本標記語言，是一種編程語言，也能夠說是一種標準、規範。
HTML提供了一系列標記（標籤），每一個標記都有不一樣的含義和做用，瀏覽器根據標記的含義把內容顯示到瀏覽器頁面上
超文本：頁面不只能夠包含普通文本，還能夠包含圖片、連接、音樂、程序等非文本內容
2.基本標籤css

<!DOCTYPE> 定義文檔類型，代表該文檔的類型和版本（瞭解）
<html> 定義 HTML 文檔（頁面）
<title> 定義文檔的標題
<meta>定義文檔的元數據，影響瀏覽器對頁面的解析處理
<body> 定義文檔的主體
<h1> ~ <h6> 定義標題文本
<p> 定義段落文本
<br> 定義換行
<hr> 定義水平線
定義註釋

3.列表標籤html

無序列表 
<ul>：在頁面上顯示一個無序列表（type屬性決定圖標樣式）
<li>：表示一個列表項
有序列表
<ol>：在頁面上顯示一個有序列表（type屬性：1 a A i I）
<li>
自定義列表
dl：在頁面上顯示一個自定義列表
dt：定義父節點列表項
dd：定義子節點列表項
注意：dt和dd不是嵌套關係，而是並列的

4.語法規範編程

標籤成對出現，有開始標籤就須要有結束標籤
標籤不區分大小寫，但建議使用小寫
一對標籤的內容能夠爲空、文本，或者其餘標籤（標籤能夠嵌套）
若是一對標籤的內部老是爲空，能夠簡寫爲單標記形式，如 <br/>
兩對標籤不能夠交叉
標籤能夠包含若干屬性，屬性之間使用空格隔開，屬性之間沒有順序
一些標籤須要配合使用，共同完成一件複雜的事情
瀏覽器把若干連續的空白字符（空格符、換行符、製表符）處理成一個空格的效果
注意：最開始時爲了儘快推廣HTML，瀏覽器對HTML文檔的語法要求並不嚴格，這致使那些不規範的HTML代碼也會被瀏覽器正常解析，你們要知道這個狀況，但咱們本身編碼時必定要嚴格遵照HTML語法規範

5.文本顯示效果標籤
在最開始的時候，HTML使用標籤控制文本的顯示效果，隨着技術的發展，開始使用CSS語言控制頁面的效果，這些文本顯示效果標籤再也不建議使用
瀏覽器

6.HTML實體字符
在HTML中，有一些特殊字符，如 > < " & 具備特殊含義，在使用時容易形成衝突，另外 © ® × ÷ 等字符在鍵盤上沒有對應的按鍵，爲了方便開發者靈活使用這些字符，HTML提供了對應的實體字符供開發者使用框架

顯示效果編程語言	描述ide	實體名稱佈局	實體編號優化
	空格編碼	&nbsp	&#160
<	小於號	&lt	&#60
>	大於號	&gt	&#62
&	和號	&amp	&#38
「	雙引號	&quot	&#34
@	註冊商標	&reg	&#174
*	乘號	&time	&#215
/	除號	&divide	&#247

7.表格標籤

<table> 定義一個表格總體
<caption> 定義表格標題
<tr> 定義表格中的行
<td> 定義行中的單元格（colspan、rowspan 屬性能夠合併單元格）
<thead> 表頭
<th> 定義表格中的表頭單元格
<tbody> 表格主體，可用於大表格分段顯示優化
<tfoot> 表格的腳註
表格單像素邊框效果：
<table border="1" cellspacing="0px" style="border-collapse: collapse">
屬性解釋：border是設置表格邊框的寬度，cellspacing是但單元格之間的空白，style="border-collapse: collapse"的做用是把相鄰兩個邊框合併成一個

8.超連接標籤
<a href="http://www.rupeng.com/index.shtml">如鵬網</a>
<a href="人醜就要多讀書.jpg">人醜就要多讀書.jpg</a>
<a href="人醜就要多讀書.zip">人醜就要多讀書.zip</a>
超連接只是指定資源的位置，瀏覽器在得到這些資源後處理時，默認的，若是瀏覽器能夠解析顯示，瀏覽器就會直接解析顯示，不然，就以文件下載的方式處理（固然，也可指定強制下載,指定a標籤的download屬性，他的值就是下載文件的文件名）

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <!--連接外部資源-->
    <a href="http://www.rupeng.com">如鵬網</a>
    <a href="人醜就要多讀書.jpg" download="當即下載">人醜就要多讀書.jpg</a>
    <a href="人醜就要多讀書.zip">人醜就要多讀書.zip</a>
    <!--連接頁面內的a標籤-->
    <a href="#a1">#a1</a>
    <a name="a1">a1</a>
</body>

</html>

9.圖片標籤<img>

在頁面上顯示一個圖片: <img src="人醜就要多讀書.jpg" alt="人醜就要多讀書" />
src 屬性：指定圖片資源位置
alt 屬性：當找不到src指定的圖片資源時，顯示在瀏覽器上的說明提示
width、height屬性 ：指定圖片顯示的寬、高
border：指定圖片邊框的寬度

10.表單標籤

<form> 用來定義供用戶輸入信息的表單，收集用戶信息
<input> 能夠定義多種輸入控件，經過定義type的值：text、password、radio、checkbox、file、hidden、button、submit、reset
<label> 定義 表單控件的標註，能夠將label關聯到某個標籤上，label的for屬性的值設置爲將要關聯標籤的id值
<form>
<label for="btn01">提交<input type="button" id="btn01"/></label>
</form>
<textarea> 定義多行的文本輸入控件
<select> 定義下拉列表 、<option> 定義下拉列表的選項
<button> 定義普通按鈕
（在輸入框中按回車鍵和點擊submit按鈕效果相同）

11.框架標籤
<frameset> 、<frame>定義框架集 (已過期)
在這裏介紹的緣由避免之後見到了不認識

<html>

<head></head>
<frameset rows="100px,*">
    <frame src="head.html" />
    <frameset cols="20%,*">
        <frame src="left.html" />
        <frame src="main.html" />
    </frameset>
</frameset>

</html>
<iframe>定義內嵌框架
    <iframe src=」 inner.html」 width=」500px」 height=」500px」>
        </frame>

12.頁面佈局標籤<div> 、<span>

<div>(division)和<span>均可以把頁面分紅相對獨立的各個部分（分區），方便佈局。這二者的不一樣之處就在於div能夠自動換行，而span就不行
<div>div1</div>
<div>div2</div>
<div>div3</div>
<span>span1</span>
<span>span2</span>
<span>span3</span>
提：div+css 佈局方式是如今的主流

如今有種共識，網頁內容要和表現形式分離，也就是說html標籤主要負責定義網頁的內容，如一段文本，css負責定義這些內容的顯示樣式，如文本的顏色

相關標籤/搜索

html+css+javascript+html

每日一句

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