Web入門梳理：HTML

html

認識網頁

代碼 -> 瀏覽器渲染 -> 用戶所看到的網頁

常見瀏覽器

谷歌瀏覽器、Safari…

瀏覽器內核

內核：Safari（webkit）、Chrome（Blink）
渲染引擎（獨立的JS引擎）

web標準

不同瀏覽器 不同內核 解析執行的代碼 可能運行不一致；所以需要制定統一的web標準；
W3C組織指定：

• 結構：結構標準；HTML 使內容更清晰；
• 表現：樣式標準；CSS 用於修飾內容的樣式；
• 行爲：行爲標準；DOM ECMAScript 內容的交互及操作效果；

HTML初識

Hyper Text Markup Language，超文本標記語言；文件後綴.html；

主要通過html標籤 對網頁中的文本、圖片、聲音等內容進行描述；

HTML

平時已經很熟悉的標籤就略過了

文本格式化標籤：

標籤	顯示效果	備註
<b></b> <strong></strong>	粗體	XHTML 推薦使用strong
<i></i> <em></em>	斜體	XHTML 推薦使用em
<s></s> <del></del>	加刪除線	XHTML 推薦使用del
<u></u> <ins></ins>	加下劃線	XHTML 推薦使用ins

a標籤

<a>:

可以指定有效連接，同項目目錄下的html文件，#id（實現錨點定位）

<a>標籤的target屬性:

設置打開方式，是在當前頁面打開（_self）還是新建界面打開（_blank）;

<base>:

和img br hr 都是單標籤；base是使用在head標籤中的標籤，可以設置頁面中統一的鏈接打開方式，與a標籤一樣，也是使用target屬性進行設置；（局部優先於整體）

特殊字符替換代碼：

特殊字符	描述	替換代碼
	空格符	&nbsp
<	小於號	&lt
>	大於號	&gt
&	與符號	&amp
￥	人民幣	&yen
©	版權符	&copy
®	商標符	&reg
˚	攝氏度	&deg
±	正負號	&plusmn
✖️	乘號	&times
➗	除號	&divide
²	平方（上標2）	&sup2
³	立方（上標3）	&sup3

<p> & 對應代碼 <p> &

一個特殊字符 的替換代碼結束後使用分號；連續出現的時候 也需要；

有序/無序列表注意事項：

• ul 只允許嵌套li
• li 相當於一個元素，可以放其他元素；
• 列表會有自己的樣式，不要在意，使用CSS來美化；

自定義列表：

<dl>
    <dt>標題分類</dt>
    <dt>描述項</dt>
    <dt>描述項</dt>
    <dt>描述項</dt>
</dl>

table標籤（表格）：

不是用來佈局的，而是用來處理表格數據的；

<!-- 表格 -->
<table>
<!-- 行 -->
    <tr>
        <th>表頭</th>
        <th>表頭</th>
        <th>表頭</th>
    </tr>
    <tr>
        <td>表格單元項</td>
        <td>表格單元項</td>
        <td>表格單元項</td>
    </tr>
</table>

表格屬性：

屬性	描述	常用值
border	設置邊框（默認爲0表示無邊框）	像素值
cellspacing	表格單元格邊框之間的空白間距	像素值（默認2）
cellpadding	表格單元格內容與其邊框的空白間距	像素值（默認1）
width	設置表格寬度	像素值
height	設置表格高度	像素值
align	設置表格在網頁中的水平對齊方式	left center right

表格結構：

<table>
    <caption>表格標題</caption>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

表格合併單元格：

跨行合併：rowspan屬性，跨列合併：colspan屬性，指定td元素的屬性數值即可；

表單標籤：

用於向服務器傳輸數據；包含一些表單控件；

表單控件和表單域：

• input控件

  單標籤；通過type屬性變換成多種控件樣式；

• input控件屬性：

屬性	值	描述
type	text	單行文本輸入框
	password	密碼輸入框
	radio	單選按鈕
	checkbox	多選框
	button	普通按鈕
	submit	提交按鈕
	reset	重置按鈕
	image	圖片形式的提交按鈕
	file	文件域 如選擇上傳文件
name	自定義	控件名，可以對多個表單控件進行分組，只需name值相同
value	自定義	控件中 文本值，注意是文本值！
size	正整數	控件在頁面中顯示寬度
checked	checked	定義 選擇控件項 是默認被選中的項，如多選框的多個項，希望那個是默認選中 就爲那個項添加該屬性
maxlength	正整數	控件允許插入的最多字符數

圖片按鈕實例：<input type="image" src="test.png" />

• label標籤：

  用於綁定一個榜單元素，當點擊label標籤的時候，被綁定的表單元素就會獲得輸入焦點；

  <label> 第一種方式：直接包裹<input type="text" /> </label>
  
  <label for="male"> 第二種方式：使用for屬性指定表單元素id</label>
  <input type="text" name="sex" id="male" value="male" />
  

• textarea標籤（文本域）

  <textarea coles="每行中的字符數" rows="顯示的行數"></textarea>

• select下拉菜單：

  <select>
    <option>1</option>
    <option>2</option>
    <option selected="selected">修改默認選中項</option>
  </select>
  

• 表單域

  文本域（textarea） ；文件域（input type=“file”) ；表單域（form） 注意區分理解；

  form表單域：用於收集控件信息，進行提交；多個表單域可以通過name屬性進行區分；

<form action="提交地址" method="post" name="表單名稱">
</form>

---