HTML 常用基礎匯總

ome

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="style.css">
<title>title</title>
</head>
<body>
<h1>啦啦啦</h1>
<p>我是賣報的小行家</p>
</body>
</html>

Basic

標題

<hr/>創建水平線，分割內容

段落

<br/>折行

鏈接

<a target="_blank">This is my blog</a>

target="_blank" 在新窗口打開文檔

<a name="label">錨</a> #也可以用id屬性替代MAME屬性

建立錨了，可以在其他地方創建指向這個錨的鏈接

- 同一頁面

<a href="#lable">xxxx</a>

- 其他頁面

<a >xxxxx</a>

(Q這個鏈接是怎么確定的呢)

圖片

<img src="dora.jpg" alt="https://liheyuting.github.io/" width="" height="">

- 背景圖片

<body background="http://"

- 排列圖片

<img src="" align="botton(/middle/top)"

- 浮動圖片

<img src="http://" align="left(/fight)"

- 增加圖片鏈接

在<img> 前后加上

<a ></a>

按鈕

<botton>click</botton>

列表

<ul> #unorder list 無序列表
<li>a</li>
<li>b</li>
</ul>
<ol> #order list 有序列表

- 定義列表

<dl>
<dt>1111</dt>
<dd>2222</dd>
<dt>3333</dt>
<dd>4444</dd>

定義列表的列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等

（Q這個不是太明白）

dl 定義定義列表

dt 定義定義項目

dd 定義定義的描述

- 嵌套列表

多加幾層

屬性

(Q css時多了解下）

class 規定元素的類名

id 元素的唯一id

style inline style 行內樣式

title 規定元素的額外信息

文本標簽

<b> 粗體

<big> 大號字

<em> 著重文字

<i> 斜體

<small> 小號字

<strong> 加重語氣

<sub> 定義下標字

<sup> 定義上標字

<ins> 增加下劃線

<del> 增加刪除線

引用

<q> 短引用

<blockquote> 長引用

<abbr> 定義縮寫

<dfn> 定義項目或縮寫的定義

<address> 定義文檔或文章的聯系方式/作者(通常斜體顯示，大多數瀏覽器在此元素前后折行)

<cite> 定義著作的標題（斜體顯示）

表格

- 表格

<table border='1'>
<tr>
<td> row 1, cell 1</tr>
<td> row 1, cell 2</tr>
</tr>
<tr>
<td> row 2, cell 1</tr>
<td> row 2, cell 2</tr>
</tr>
</table>

#table 定義表格

#tr 若干行

#td table data 表格數據

- 邊框屬性

border

- 表頭

<th>heading</th>

#th table heading

- 空單元格

- 跨行跨列

colspan

eg <th colspan="2"></th>

rowspan

eg <th rowspan="2"></th>

- 表格內的標簽

（比如實現圖片一塊塊）

- 單元格邊距（cell padding）

- 單元格間距（cell spacing）

- 背景顏色或圖片

or (background='//')

- 表格內排列內容對齊

align="left(/right)"

- frame 外框

frame=""

box 四面鐵框

above 頭頂有框

below 腳下有框

hsides 上頭下頭被框

vsides 兩邊有框

塊、類、布局等其他

塊

<div> 在CSS里設置樣式屬性

可用于文檔布局

<span> 為部分文本設置樣式屬性

類

類-塊-行

（Q這塊有點疑問，id, name, class相關）

布局

- header 頁眉

- nav 導航鏈接的容器

- section 定義文檔中的節

- article 定義獨立的自包含文章

- aside 定義內容之外的內容（比如側欄）

- footer 定義文檔或節的頁腳

- details 定義額外的細節

- summary 定義details 元素的標題

（detail/article/summary Q下次注意下）

響應式web設計

（Q雖然現在還不懂，最好要有印象，以后再回頭看）

RWD響應式web設計（responsive web design）

- 自己創建

在head中<style>中設置

- Bootstrap

（Q之后學）

使用現成的CSS框架

在head中加入：

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http:////">

內聯框架

- 作為連接的目標時

加入name屬性

name=""

腳本

(Q之后學)

”假設6個月之后的你在教現在的你學習“
”強迫輸出促進輸入“

整理過程是一個復習的過程，雖然離現在實質工作內容相差千萬，還應起項目直接實操才好。

稍加整理，如有錯誤或者其他的建議，還請不吝賜教，萬分感謝。

HTML

TML是一種用來描述網頁的標記性語言。學習HTML可能并不難，主要是要記一些HTML標簽和標簽代表的含義。下面PHP程序員雷雪松根據使用的情況，整理出平時常用的HTML標簽。

HTML基礎之HTML常用標簽-PHP程序員雷雪松的博客

1、最基本的HTML結構

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

2、最常用的HTML標簽

a、布局標簽

div標簽定義文檔中的分區或節（division/section），可以把文檔分割為獨立的、不同的部分，主要用于布局。

aside標簽的內容可用作文章的側欄，<span style="color: #ff0000;">html5新增標簽</span>。

header標簽定義頁面的頭部（介紹信息），<span style="color: #ff0000;">html5新增標簽</span>。

section標簽定義文檔中的節（section、區段）。比如章節、頁眉、頁腳或文檔中的其他部分，<span style="color: #ff0000;">html5新增標簽</span>。

footer 標簽定義文檔或節的頁腳，通常包含文檔的作者、版權信息、使用條款鏈接、聯系信息等等，<span style="color: #ff0000;">html5新增標簽</span>。

article標簽規定文章獨立的其他內容，比如：標題、內容、評論，<span style="color: #ff0000;">html5新增標簽</span>。

b、文本標簽

h1-h6標簽可定義標題

p標簽定義段落

b/strong標簽加粗

em標簽來表示強調的文本，斜體

strong標簽表示重要文本

u標簽下劃線

s標簽刪除線

br標簽表示回車換行

hr標簽表示水平線

span標簽被用來組合文檔中的行內元素。

blockquote標簽表示塊引用

pre標簽可定義預格式化的文本，保持原有格式的一種標簽。

sub標簽下標，

sup>標簽上標

 表示一個空格

©表示版權符

<表示<

>表示>

c、a標簽定義超鏈接，指定頁面間的跳轉。鏈接可以指向外部鏈接或者頁面內部id錨點，可以在當前頁面打開，新開窗口。

d、多媒體標簽

img標簽主要在網頁中插入圖像，可以定義圖片替換文本、顯示寬度和高度、是否帶邊框，建議等比例設置，否則圖像會變形。

audio標簽定義聲音，比如音樂或其他音頻流。<span style="color: #ff0000;">html5新增標簽</span>。

<audio src="someaudio.wav">您的瀏覽器不支持 audio 標簽。</audio>

video標簽定義視頻，比如電影片段或其他視頻流。<span style="color: #ff0000;">html5新增標簽</span>。

<video src="movie.ogg" controls="controls">您的瀏覽器不支持 video 標簽。</video>

e、序列化標簽

ul和li無序列表標簽

<ul>

</ul>

ol和li有序列表標簽，可以使用type屬性規定有序列表符號的類型。1 按數字有序排列，為默認值，（1、2、3、4）；a 按小寫字母有序排列，（a、b、c、d）；A 按字母大寫有序排列，（A、B、C、D）。i 按小寫羅馬字母有序，（i, ii, iii, iv）；I 按小寫羅馬字母有序，（I, II, III, IV）。

<ol>

</ol>

dl標簽定義了定義列表（definition list），dl標簽用于結合 dt（定義列表中的項目）和 dd（描述列表中的項目）。

<dl>

<dd>用來計算的儀器 ... ...</dd>

</dl>

f、表格標簽

table標簽和tr標簽，th標簽和td標簽，合并單元格。

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

g、表單標簽

form標簽定義提交方式、提交地址、表單字符集以及如何對其進行編碼，需要提交的表單一定要放在form標簽內。

input標簽用于搜集用戶信息

密碼，輸入的字符會被掩碼（顯示為星號或原點）

文件類型的表單，上傳文件時，form表單一定要設置為enctype="multipart/form-data"

隱藏表單

提交

重置

radio單選

<input name="sex" type="radio" value="1" />男

<input name="sex" type="radio" value="2" checked="checked" />女

checkbox多選

<input name="skill" type="checkbox" value="1" checked="checked" />PHP

<input name="skill" type="checkbox" value="2" />前端

<input name="skill" type="checkbox" value="2" />數據庫

<span style="color: #ff0000;">注：checked="checked"可以簡寫成checked</span>

label標簽為input元素定義標注，如果您點擊label元素文本，就會觸發此input控件。

textarea標簽，設置文本區內的可見行數和寬度

<textarea name="content" cols="30" rows="10">大段文本輸入框</textarea>

button標簽定義一個按鈕

提交按鈕

重置按鈕

select標簽和option標簽下拉列表

單選菜單列表框

<option value="2" selected="selected">raykaeso</option>

</select>

多選列表下拉框，shift加鼠標單擊，可以連續選擇多個選擇，CTRL+鼠標點擊，可以點擊多個。

<option value="3">raykaeso</option>

</select>

注:selected="selected"可簡寫成selected，表示選中

3、其他HTML事項

a、HTML標簽和屬性是不區分大小寫的，建議HTML標簽和屬性都小寫，屬性值必須用雙引號包圍。

b、HTML標簽都是以開始標簽起始，以結束標簽終止。大部分HTML標簽都是成對出現的，稱為雙標簽，比如：p標簽、div標簽，也有的HTML標簽在開始標簽中結束的標簽，稱為單標簽，比如：hr標簽、br標簽。大多數 HTML 元素可擁有屬性，文本內容都是寫在開始標簽與結束標簽之間。

c、HTML標簽之間盡量縮進與換行，每行代碼不要過長，方便閱讀和維護。

d、HTML標簽使用必須符合標簽嵌套規則。禁止a標簽嵌套a標簽，p標簽嵌套div標簽。

e、建議不使用HTML已經廢棄的或者不贊成使用的標簽，少使用table布局、iframe框架嵌套以及flash播放器。

來源：PHP程序員雷雪松的博客 -HTML基礎之HTML常用標簽（http://www.leixuesong.cn/2045）

TML技術是網站建設必不可少的，今天小編就來分享一下HTML5的一部分基礎知識。

一、 HTML5——重點文本：就是純字符

超文本：在純字符中嵌入樣式、圖片、音頻、視頻、超鏈接等內容

Hyper Text Markup Language，超文本標記語言，就是52個標記嵌入在純文本中，實現超文本效果的語言。如：

<marquee>hello</marquee>

注意：作為一門計算機語言，HTML與Java、C、PHP不同，沒有循環、選擇等基本語言結構，只有純文本和52個標簽。

二、 HTML語法——重點

(1)一篇HTML文檔就是一個文本文檔，其中包含 “純文本”+“標簽”

(2)HTML中的標簽分為兩種：

雙標記標簽： <標簽名>......</標簽名>

單標記標簽： <標簽名/> 單標記標簽中不能包含內容

(3)標簽之間可以嵌套，但不能交叉

(4)標簽名不區分大小寫，但有個版本的HTML要求全小寫，推薦全用小寫

(5)標簽可以聲明屬性，屬性有屬性名和屬性值，屬性值需要使用單引號或雙引號括起來

(6)不同的標簽具有不同的屬性，所有的標簽都具備下列四個屬性：

·id：整個文檔每個標簽可以聲明一個唯一的id號

·style：為元素指定CSS樣式

·class：指定元素所屬的類型

·title：指定標簽的彈出式提示語

三、HTML常用標簽

四、HTML文件的基本結構

(1)文檔類型聲明：HTML有不同的版本，如html1.0 html2.0 html3.0 html4.0(strict/transitional) xhtml(strict/transitional/frameset) html5，不同版本的HTML中可以使用標簽的數量以及標簽的屬性是不同的，且會影響到瀏覽器對CSS和Java的解釋執行。

(2)<html>

<head>

</head>

<body>

</body>

</html>

好了，以上就是網頁搭建中HTML基礎知識整理歸納，希望對剛入門的網頁HTML新手有更大幫助，感謝大家的支持，后續會為大家分享更多關于網頁制作經驗和操作知識！

在線咨詢

上一篇：HTML5聲明與編碼設置
下一篇：CSS 的基本簡介

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML 常用基礎匯總

ome

Basic

屬性

塊、類、布局等其他

1、最基本的HTML結構

2、最常用的HTML標簽

3、其他HTML事項

您的項目需求