整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
<!DOCTYPE html>
<html>
<head>
<!-- 插入外部樣式表 -->
<link rel="stylesheet" type="text/css" href="style.css">
<title>title</title>
</head>
<body>
<h1>啦啦啦</h1>
<p>我是賣報(bào)的小行家</p>
</body>
</html>
標(biāo)題
<h1>一級(jí)標(biāo)題</h1>
<h2>二級(jí)標(biāo)題</h2>
<h3>三級(jí)標(biāo)題</h3>
<h4>四級(jí)標(biāo)題</h4>
<h5>五級(jí)標(biāo)題</h5>
<h6>六級(jí)標(biāo)題</h6>
<hr/>創(chuàng)建水平線，分割內(nèi)容
<!-- 注釋 -->
段落
<p>段落</p>
<br/>折行
鏈接
<a target="_blank">This is my blog</a>
target="_blank" 在新窗口打開文檔
<a name="label">錨</a> #也可以用id屬性替代MAME屬性
建立錨了，可以在其他地方創(chuàng)建指向這個(gè)錨的鏈接
- 同一頁(yè)面
<a href="#lable">xxxx</a>
- 其他頁(yè)面
<a >xxxxx</a>
(Q這個(gè)鏈接是怎么確定的呢)
圖片
<img src="dora.jpg" alt="https://liheyuting.github.io/" width="" height="">
- 背景圖片
<body background="http://"
- 排列圖片
<img src="" align="botton(/middle/top)"
- 浮動(dòng)圖片
<img src="http://" align="left(/fight)"
- 增加圖片鏈接
在<img> 前后加上
<a ></a>
按鈕
<botton>click</botton>
列表
<ul> #unorder list 無(wú)序列表
<li>a</li>
<li>b</li>
</ul>
<ol> #order list 有序列表
- 定義列表
<dl>
<dt>1111</dt>
<dd>2222</dd>
<dt>3333</dt>
<dd>4444</dd>
定義列表的列表項(xiàng)內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等
（Q這個(gè)不是太明白）
dl 定義定義列表
dt 定義定義項(xiàng)目
dd 定義定義的描述
- 嵌套列表
多加幾層
(Q css時(shí)多了解下）
class 規(guī)定元素的類名
id 元素的唯一id
style inline style 行內(nèi)樣式
title 規(guī)定元素的額外信息
文本標(biāo)簽
<b> 粗體
<big> 大號(hào)字
<em> 著重文字
<i> 斜體
<small> 小號(hào)字
<strong> 加重語(yǔ)氣
<sub> 定義下標(biāo)字
<sup> 定義上標(biāo)字
<ins> 增加下劃線
<del> 增加刪除線
引用
<q> 短引用
<blockquote> 長(zhǎng)引用
<abbr> 定義縮寫
<dfn> 定義項(xiàng)目或縮寫的定義
<address> 定義文檔或文章的聯(lián)系方式/作者(通常斜體顯示，大多數(shù)瀏覽器在此元素前后折行)
<cite> 定義著作的標(biāo)題（斜體顯示）
表格
- 表格
<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 表格數(shù)據(jù)
- 邊框?qū)傩?/p>
border
- 表頭
<th>heading</th>
#th table heading
- 空單元格
<td> </td>
- 跨行跨列
colspan
eg <th colspan="2"></th>
rowspan
eg <th rowspan="2"></th>
- 表格內(nèi)的標(biāo)簽
（比如實(shí)現(xiàn)圖片一塊塊）
- 單元格邊距（cell padding）
<table cellpadding="10"></table>
- 單元格間距（cell spacing）
<table cellspacing="10"></table>
- 背景顏色或圖片
<table bgcolor="blue"></table>
or (background='//')
- 表格內(nèi)排列內(nèi)容對(duì)齊
align="left(/right)"
- frame 外框
frame=""
box 四面鐵框
above 頭頂有框
below 腳下有框
hsides 上頭下頭被框
vsides 兩邊有框
塊
<div> 在CSS里設(shè)置樣式屬性
可用于文檔布局
<span> 為部分文本設(shè)置樣式屬性
類
類-塊-行
（Q這塊有點(diǎn)疑問(wèn)，id, name, class相關(guān)）
布局
- header 頁(yè)眉
- nav 導(dǎo)航鏈接的容器
- section 定義文檔中的節(jié)
- article 定義獨(dú)立的自包含文章
- aside 定義內(nèi)容之外的內(nèi)容（比如側(cè)欄）
- footer 定義文檔或節(jié)的頁(yè)腳
- details 定義額外的細(xì)節(jié)
- summary 定義details 元素的標(biāo)題
（detail/article/summary Q下次注意下）
響應(yīng)式web設(shè)計(jì)
（Q雖然現(xiàn)在還不懂，最好要有印象，以后再回頭看）
RWD響應(yīng)式web設(shè)計(jì)（responsive web design）
- 自己創(chuàng)建
在head中<style>中設(shè)置
- Bootstrap
（Q之后學(xué)）
使用現(xiàn)成的CSS框架
在head中加入：
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http:////">
內(nèi)聯(lián)框架
<iframe src="http://"(width="" height="" frameborder="0")></iframe>
- 作為連接的目標(biāo)時(shí)
加入name屬性
name=""
腳本
(Q之后學(xué))
”假設(shè)6個(gè)月之后的你在教現(xiàn)在的你學(xué)習(xí)“
”強(qiáng)迫輸出促進(jìn)輸入“
整理過(guò)程是一個(gè)復(fù)習(xí)的過(guò)程，雖然離現(xiàn)在實(shí)質(zhì)工作內(nèi)容相差千萬(wàn)，還應(yīng)起項(xiàng)目直接實(shí)操才好。
稍加整理，如有錯(cuò)誤或者其他的建議，還請(qǐng)不吝賜教，萬(wàn)分感謝。
HTML
TML是一種用來(lái)描述網(wǎng)頁(yè)的標(biāo)記性語(yǔ)言。學(xué)習(xí)HTML可能并不難，主要是要記一些HTML標(biāo)簽和標(biāo)簽代表的含義。下面PHP程序員雷雪松根據(jù)使用的情況，整理出平時(shí)常用的HTML標(biāo)簽。
HTML基礎(chǔ)之HTML常用標(biāo)簽-PHP程序員雷雪松的博客
<!--<!DOCTYPE> 是HTML5聲明，<!DOCTYPE> 必須是 HTML 文檔的第一行，位于 <html> 標(biāo)簽之前。<!DOCTYPE>是指示 web 瀏覽器關(guān)于頁(yè)面使用哪個(gè) HTML 版本進(jìn)行編寫的指令。-->
<!DOCTYPE html>
<html>
<!-- head標(biāo)簽是所有頭部元素的容器。head標(biāo)簽內(nèi)的元素可包含腳本、樣式表和提供頁(yè)面的元信息等等。以下標(biāo)簽都可以添加到 head 部分：title、base、link、meta、script 以及style。頭部的內(nèi)容不會(huì)顯示在瀏覽器的。 -->
<head>
<!-- 設(shè)置字符集，如果字符集不對(duì)，可能導(dǎo)致亂碼。一般建議utf-8國(guó)際編碼 -->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312或utf-8或gbk" />
<!-- SEO相關(guān)標(biāo)簽，title定義文檔的標(biāo)題,百度建議一般不要超過(guò)32位,meta定義頁(yè)面關(guān)鍵詞和頁(yè)面的描述-->
<title>網(wǎng)頁(yè)標(biāo)題</title>
<meta name="keywords" content="PHP程序員,技術(shù)博客,個(gè)人博客,雷雪松" />
<meta name="description" content="PHP程序員，雷雪松（Raykaeso）的博客是一個(gè)優(yōu)秀的個(gè)人技術(shù)博客。PHP程序員雷雪松的博客記錄了Linux學(xué)習(xí)，PHP開發(fā)與編程，Web前端開發(fā)，MySQL學(xué)習(xí)和教程，NoSQL數(shù)據(jù)庫(kù)教程以及個(gè)人的人生經(jīng)歷和觀點(diǎn)。" />
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript" src="main.js"></script>
</head>
<!-- 正文部分，所有在瀏覽器上可見的內(nèi)容必須寫在body標(biāo)簽內(nèi)部 -->
<body>
</body>
</html>
a、布局標(biāo)簽
div標(biāo)簽定義文檔中的分區(qū)或節(jié)（division/section），可以把文檔分割為獨(dú)立的、不同的部分，主要用于布局。
aside標(biāo)簽的內(nèi)容可用作文章的側(cè)欄，<span style="color: #ff0000;">html5新增標(biāo)簽</span>。
header標(biāo)簽定義頁(yè)面的頭部（介紹信息），<span style="color: #ff0000;">html5新增標(biāo)簽</span>。
section標(biāo)簽定義文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁(yè)眉、頁(yè)腳或文檔中的其他部分，<span style="color: #ff0000;">html5新增標(biāo)簽</span>。
footer 標(biāo)簽定義文檔或節(jié)的頁(yè)腳，通常包含文檔的作者、版權(quán)信息、使用條款鏈接、聯(lián)系信息等等，<span style="color: #ff0000;">html5新增標(biāo)簽</span>。
article標(biāo)簽規(guī)定文章獨(dú)立的其他內(nèi)容，比如：標(biāo)題、內(nèi)容、評(píng)論，<span style="color: #ff0000;">html5新增標(biāo)簽</span>。
b、文本標(biāo)簽
h1-h6標(biāo)簽可定義標(biāo)題
p標(biāo)簽定義段落
b/strong標(biāo)簽加粗
em標(biāo)簽來(lái)表示強(qiáng)調(diào)的文本，斜體
strong標(biāo)簽表示重要文本
u標(biāo)簽下劃線
s標(biāo)簽刪除線
br標(biāo)簽表示回車換行
hr標(biāo)簽表示水平線
span標(biāo)簽被用來(lái)組合文檔中的行內(nèi)元素。
blockquote標(biāo)簽表示塊引用
pre標(biāo)簽可定義預(yù)格式化的文本，保持原有格式的一種標(biāo)簽。
sub標(biāo)簽下標(biāo)，
sup>標(biāo)簽上標(biāo)
表示一個(gè)空格
©表示版權(quán)符
<表示<
>表示>
c、a標(biāo)簽定義超鏈接，指定頁(yè)面間的跳轉(zhuǎn)。鏈接可以指向外部鏈接或者頁(yè)面內(nèi)部id錨點(diǎn)，可以在當(dāng)前頁(yè)面打開，新開窗口。
<a href="指向的鏈接地址或者網(wǎng)址#ID名" target="_blank|_self|_top|_parent">百度</a>
d、多媒體標(biāo)簽
img標(biāo)簽主要在網(wǎng)頁(yè)中插入圖像，可以定義圖片替換文本、顯示寬度和高度、是否帶邊框，建議等比例設(shè)置，否則圖像會(huì)變形。
<img src="圖片地址" alt="替換文本，圖片打不開的時(shí)候顯示" width="圖片寬度" height="高度" border="0" />
audio標(biāo)簽定義聲音，比如音樂(lè)或其他音頻流。<span style="color: #ff0000;">html5新增標(biāo)簽</span>。
<audio src="someaudio.wav">您的瀏覽器不支持 audio 標(biāo)簽。</audio>
video標(biāo)簽定義視頻，比如電影片段或其他視頻流。<span style="color: #ff0000;">html5新增標(biāo)簽</span>。
<video src="movie.ogg" controls="controls">您的瀏覽器不支持 video 標(biāo)簽。</video>
e、序列化標(biāo)簽
ul和li無(wú)序列表標(biāo)簽
<ul>
<li>HTML</li>
<li>JS</li>
<li>PHP</li>
</ul>
ol和li有序列表標(biāo)簽，可以使用type屬性規(guī)定有序列表符號(hào)的類型。1 按數(shù)字有序排列，為默認(rèn)值，（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>
<li>HTML</li>
<li>JS</li>
<li>PHP</li>
</ol>
dl標(biāo)簽定義了定義列表（definition list），dl標(biāo)簽用于結(jié)合 dt（定義列表中的項(xiàng)目）和 dd（描述列表中的項(xiàng)目）。
<dl>
<dt>計(jì)算機(jī)</dt>
<dd>用來(lái)計(jì)算的儀器 ... ...</dd>
</dl>
f、表格標(biāo)簽
table標(biāo)簽和tr標(biāo)簽，th標(biāo)簽和td標(biāo)簽，合并單元格。
<table width="100%" height="193" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000" bgcolor="#000000" background="">
<tr>
<th>標(biāo)題</th>
<th>標(biāo)題</th>
</tr>
<tr>
<!-- 合并橫向單元格 -->
<td colspan="2" nowrap="nowrap">&nbsp;</td>
</tr>
<tr>
<td></td>
<!-- 合并縱向單元格 -->
<td rowspan="2"> </td>
</tr>
<tr>
<td height="16"> </td>
</tr>
</table>
g、表單標(biāo)簽
form標(biāo)簽定義提交方式、提交地址、表單字符集以及如何對(duì)其進(jìn)行編碼，需要提交的表單一定要放在form標(biāo)簽內(nèi)。
<form id="form1" name="form1" method="post|get" enctype="multipart/form-data" action="提交到的地址"></form>
input標(biāo)簽用于搜集用戶信息
<input name="userName" type="text" maxlength="5" size="100" value="asdfasdfasfd" />
密碼，輸入的字符會(huì)被掩碼（顯示為星號(hào)或原點(diǎn)）
<input name="pwd" type="password" maxlength="5" size="100" value="" />
文件類型的表單，上傳文件時(shí)，form表單一定要設(shè)置為enctype="multipart/form-data"
<input type="file" name="file" />
隱藏表單
<input type="hidden" name="country" value="China" />
提交
<input type="submit" name="Submit" value="提交" disabled="disabled" />
重置
<input type="reset" name="Submit2" value="重置" />
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" />數(shù)據(jù)庫(kù)
<span style="color: #ff0000;">注：checked="checked"可以簡(jiǎn)寫成checked</span>
label標(biāo)簽為input元素定義標(biāo)注，如果您點(diǎn)擊label元素文本，就會(huì)觸發(fā)此input控件。
textarea標(biāo)簽，設(shè)置文本區(qū)內(nèi)的可見行數(shù)和寬度
<textarea name="content" cols="30" rows="10">大段文本輸入框</textarea>
button標(biāo)簽定義一個(gè)按鈕
提交按鈕
<button type="submit" value="提交">提交</button>
重置按鈕
<button type="reset" value="重置">重置</button>
select標(biāo)簽和option標(biāo)簽下拉列表
單選菜單列表框
<select name="user">
<option value="1">ray</option>
<option value="2" selected="selected">raykaeso</option>
</select>
多選列表下拉框，shift加鼠標(biāo)單擊，可以連續(xù)選擇多個(gè)選擇，CTRL+鼠標(biāo)點(diǎn)擊，可以點(diǎn)擊多個(gè)。
<select name="user" size="10" multiple="multiple">
<option value="1">雷雪松</option>
<option value="2" selected="selected">ray</option>
<option value="3">raykaeso</option>
</select>
注:selected="selected"可簡(jiǎn)寫成selected，表示選中
a、HTML標(biāo)簽和屬性是不區(qū)分大小寫的，建議HTML標(biāo)簽和屬性都小寫，屬性值必須用雙引號(hào)包圍。
b、HTML標(biāo)簽都是以開始標(biāo)簽起始，以結(jié)束標(biāo)簽終止。大部分HTML標(biāo)簽都是成對(duì)出現(xiàn)的，稱為雙標(biāo)簽，比如：p標(biāo)簽、div標(biāo)簽，也有的HTML標(biāo)簽在開始標(biāo)簽中結(jié)束的標(biāo)簽，稱為單標(biāo)簽，比如：hr標(biāo)簽、br標(biāo)簽。大多數(shù) HTML 元素可擁有屬性，文本內(nèi)容都是寫在開始標(biāo)簽與結(jié)束標(biāo)簽之間。
c、HTML標(biāo)簽之間盡量縮進(jìn)與換行，每行代碼不要過(guò)長(zhǎng)，方便閱讀和維護(hù)。
d、HTML標(biāo)簽使用必須符合標(biāo)簽嵌套規(guī)則。禁止a標(biāo)簽嵌套a標(biāo)簽，p標(biāo)簽嵌套div標(biāo)簽。
e、建議不使用HTML已經(jīng)廢棄的或者不贊成使用的標(biāo)簽，少使用table布局、iframe框架嵌套以及flash播放器。
來(lái)源：PHP程序員雷雪松的博客 -HTML基礎(chǔ)之HTML常用標(biāo)簽（http://www.leixuesong.cn/2045）
TML技術(shù)是網(wǎng)站建設(shè)必不可少的，今天小編就來(lái)分享一下HTML5的一部分基礎(chǔ)知識(shí)。
一、 HTML5——重點(diǎn)文本：就是純字符
超文本：在純字符中嵌入樣式、圖片、音頻、視頻、超鏈接等內(nèi)容
Hyper Text Markup Language，超文本標(biāo)記語(yǔ)言，就是52個(gè)標(biāo)記嵌入在純文本中，實(shí)現(xiàn)超文本效果的語(yǔ)言。如：
<marquee>hello</marquee>
注意：作為一門計(jì)算機(jī)語(yǔ)言，HTML與Java、C、PHP不同，沒(méi)有循環(huán)、選擇等基本語(yǔ)言結(jié)構(gòu)，只有純文本和52個(gè)標(biāo)簽。
二、 HTML語(yǔ)法——重點(diǎn)
(1)一篇HTML文檔就是一個(gè)文本文檔，其中包含 “純文本”+“標(biāo)簽”
(2)HTML中的標(biāo)簽分為兩種：
雙標(biāo)記標(biāo)簽： <標(biāo)簽名>......</標(biāo)簽名>
單標(biāo)記標(biāo)簽： <標(biāo)簽名/> 單標(biāo)記標(biāo)簽中不能包含內(nèi)容
(3)標(biāo)簽之間可以嵌套，但不能交叉
(4)標(biāo)簽名不區(qū)分大小寫，但有個(gè)版本的HTML要求全小寫，推薦全用小寫
(5)標(biāo)簽可以聲明屬性，屬性有屬性名和屬性值，屬性值需要使用單引號(hào)或雙引號(hào)括起來(lái)
(6)不同的標(biāo)簽具有不同的屬性，所有的標(biāo)簽都具備下列四個(gè)屬性：
·id：整個(gè)文檔每個(gè)標(biāo)簽可以聲明一個(gè)唯一的id號(hào)
·style：為元素指定CSS樣式
·class：指定元素所屬的類型
·title：指定標(biāo)簽的彈出式提示語(yǔ)
三、HTML常用標(biāo)簽
四、HTML文件的基本結(jié)構(gòu)
(1)文檔類型聲明：HTML有不同的版本，如html1.0 html2.0 html3.0 html4.0(strict/transitional) xhtml(strict/transitional/frameset) html5，不同版本的HTML中可以使用標(biāo)簽的數(shù)量以及標(biāo)簽的屬性是不同的，且會(huì)影響到瀏覽器對(duì)CSS和Java的解釋執(zhí)行。
(2)<html>
<head>
</head>
<body>
</body>
</html>
好了，以上就是網(wǎng)頁(yè)搭建中HTML基礎(chǔ)知識(shí)整理歸納，希望對(duì)剛?cè)腴T的網(wǎng)頁(yè)HTML新手有更大幫助，感謝大家的支持，后續(xù)會(huì)為大家分享更多關(guān)于網(wǎng)頁(yè)制作經(jīng)驗(yàn)和操作知識(shí)！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
