HTML部分第四章-HTML常用標(biāo)簽

、換行：<br>

2、超鏈接：<a></a>

示例源碼：

abc<br>dedfgsadfa<br>

<a href="#">超鏈接的文字</a> reference<br>

<a target="_self">百

度</a><br>

以新窗口打開百度</a><br>

<a title="點(diǎn)擊有驚

喜">帶懸停提示的超鏈接</a><br>

<a title="xxxx"

target="_blank">帶懸停提示點(diǎn)擊以新窗口打開百度

</a><br>

<a title="yyyy"><img

src=cwhello.jpg" alt="yyyy"

style="border:none;"></a><br>

<a href="index1.html">點(diǎn)擊打開相對(duì)路徑的網(wǎng)頁(yè)</a>

3、字體傾斜：<i></i>、<em></em>

4、字體加粗：<b></b> 、<strong></strong> bold (磅)

5、字體下劃線：<u></u>

6、字體：<font></font>

Color 顏色設(shè)置

Size 大小，默認(rèn)字體大小是12像素（px，pixel），size可以進(jìn)行縮放，最大+7，最小-7，超出以最大值進(jìn)行顯示；

Font-size 具體大小

Font-weight 具體粗細(xì)

Font-family 字體

Text-decoration 文本修飾

示例源碼：

<i>重<b>蔚</b><u>自</u><font color="red" size="+100" style="font-size:50px;font-weight:900; text-decoration:overline;"><font style="text-decoration:line-through; font-family:'華文行楷';">留地</font></font>?。?！</i>

TIPS：默認(rèn)字體位置c:\windows\fonts 目錄下

7、水平線：<hr>

Solid 固體（實(shí)線）、dashed（虛線）、double、dotted、……

8、列表：無(wú)序列表、有序列表

<ul>

<li>列表項(xiàng)</li>

</ul>

<ol>

<li>列表項(xiàng)</li>

</ol>

9、文字上標(biāo)：<sup></sup>

10、文字下標(biāo)：<sub></sub>

11、文字標(biāo)題：

……

TIPS:一個(gè)頁(yè)面最多用1個(gè)H1，2個(gè)H2，從H3開始隨意。

12、Seo:Search Enigee Oriented，搜索引擎優(yōu)化。

13、元標(biāo)簽：<meta>

14、編碼知識(shí)：

Gb2312 國(guó)標(biāo)2312，保存中文第四代簡(jiǎn)化字的編碼。

Gbk 包含中文簡(jiǎn)體、繁體、火星文

UTF-8 國(guó)際通用網(wǎng)頁(yè)編碼，保存的文字內(nèi)容比中文高一位。

1個(gè)漢字=2Byte=2*8bit

向上兼容：低版本軟件可以在高版本運(yùn)行，反之則不一定。

15、容器級(jí)標(biāo)簽：

<p></p> 段落

<div></div> 層

16、其他特殊：

一個(gè)英文半角空格  

小于 <

大于 >

17、標(biāo)簽分類與轉(zhuǎn)換：

所有的標(biāo)簽可以分為二大類

1、塊（block）元素：后面的內(nèi)容會(huì)自動(dòng)換行?。?！

2、內(nèi)聯(lián)（行內(nèi)inline）元素：后面的內(nèi)容不會(huì)換行！??！

轉(zhuǎn)換：

<標(biāo)簽 style=”display:inline;”></標(biāo)簽>

例1

例2

Bbb

比較下面2段代碼看看效果：

第一段：

第二段：

瀏覽器訪問常用快捷鍵：

1) ctrl+鼠標(biāo)滾輪，可以縮放瀏覽器的內(nèi)容

2) Ctrl+0 可以使縮放的網(wǎng)頁(yè)顯示為正常大小

3) 在DW中F12為預(yù)覽快捷鍵

TMl 的標(biāo)簽可以分為單個(gè)標(biāo)簽和成對(duì)標(biāo)簽。

單個(gè)標(biāo)簽：html4 規(guī)定單個(gè)標(biāo)簽要有一個(gè) / 表示結(jié)尾， html5 則不用

<!--單個(gè)標(biāo)簽-->
<meta>
<!--成對(duì)標(biāo)簽 -->
<div></div>

以下是HTMl中常用的一些標(biāo)簽

div 標(biāo)簽

div 標(biāo)簽主要用來(lái)將相關(guān)的內(nèi)容組合到一塊，就像菜市場(chǎng)把各個(gè)蔬菜分成不同種類區(qū)分?jǐn)[放是一個(gè)道理。

div 是最常見也是比較重要的標(biāo)簽，網(wǎng)頁(yè)布局中經(jīng)常使用的一類標(biāo)簽。通常布局被稱為 DIV + CSS 布局

<div>
  div 就是一個(gè)分類的存儲(chǔ)箱子
</div>

p標(biāo)簽

p標(biāo)簽表示段落，在網(wǎng)頁(yè)文字中應(yīng)用的比較多

<!--段落和段落間會(huì)換行-->
<p>第一段</p>
<p>第二段</p>

H-標(biāo)題標(biāo)簽

h標(biāo)簽分為六個(gè)

標(biāo)簽	語(yǔ)義
h1	一級(jí)標(biāo)題
h2	二級(jí)標(biāo)題
h3	三級(jí)標(biāo)題
h4	四級(jí)標(biāo)題
h5	五級(jí)標(biāo)題
h6	六級(jí)標(biāo)題

引用標(biāo)題標(biāo)簽后，字體會(huì)加粗、字號(hào)一會(huì)變大

ul 無(wú)序標(biāo)簽

無(wú)序標(biāo)簽是沒有顯示順序的列表，無(wú)序列表前面通常會(huì)有一個(gè)“小點(diǎn)”，這個(gè)小點(diǎn)可以用type屬性控制。其中有三個(gè)展示方式（不過這種方式比較固定，不夠靈活和美觀，已經(jīng)被CSS的效果代替），如下：

值（type屬性）	描述
disc	默認(rèn)值，實(shí)心圓
circle	空心圓
square	實(shí)心方框

舉例:

<!--ul標(biāo)簽內(nèi)部只能放置li標(biāo)簽-->
<!--li標(biāo)簽內(nèi)部可以放其他的標(biāo)簽-->
<ul type=">
    <li>無(wú)序列表元素1</li> <!--列表項(xiàng)-->
    <li>無(wú)序列表元素2</li>
</ul>




實(shí)心圓
<ul type="disc">
  <li>西紅柿</li>
  <li>黃瓜</li>
</ul>
空心圓
<ul type="circle">
  <li>西紅柿</li>
  <li>黃瓜</li>
</ul>
實(shí)心方框
<ul type="square">
  <li>西紅柿</li>
  <li>黃瓜</li>
</ul>

ol 有序標(biāo)簽

ol 前面的標(biāo)簽是有序的，可以是數(shù)字、字母、羅馬數(shù)字等。同樣控制這些樣式使用的是type屬性。

type屬性值	意義
a	小寫英文字母編號(hào)
A	大寫英文字母編號(hào)
i	小寫羅馬數(shù)字編號(hào)
I	大寫羅馬數(shù)字編號(hào)
1	數(shù)字編號(hào)（默認(rèn)）

設(shè)置start屬性，表示從哪個(gè)編號(hào)開始
加 reversed 表示倒敘排列

有序列表, 從2開始
<ol start="2">
  <li>元素1</li>
  <li>元素2</li>
</ol>


小寫字母表示
<ol type="a">
  <li>元素1</li>
  <li>元素2</li>
  <li>元素3</li>
</ol>


倒敘
<ol reversed>
  <li>元素1</li>
  <li>元素2</li>
  <li>元素3</li>
</ol>

dl 自定義列表

dl標(biāo)簽表示自定義列表

dt表示數(shù)據(jù)項(xiàng)，dd表示數(shù)據(jù)定義， dd是dt標(biāo)簽的解釋

<dl>
    <dt>西紅柿</dt>
    <dd>紅、酸</dd>
    <dt>黃瓜</dt>
    <dd>綠、澀</dd>
  </dl>

img標(biāo)簽

img 用來(lái)插入圖片，包括但不限于以下圖片格式

圖片格式	備注
.jpg、.jpeg	通常用于照片，是一種有損壓縮格式
.png	通常用于logo、背景，支持透明和半透明。便攜式網(wǎng)絡(luò)圖像
.svg	矢量圖片

<!-- src(source)屬性， 圖片地址，可以為相對(duì)路徑，也可以為絕對(duì)路徑-->
<!-- alt 如果遇到圖片無(wú)法加載的情況，網(wǎng)頁(yè)上會(huì)展示 alt的 值 -->
<!-- width 和 height 表示 寬和高， 如果只設(shè)置一個(gè)， 那么另外一個(gè)就會(huì)跟著成比例縮放-->
<img src="./images/images.jpg" alt="星期一" width="120" height="20">

a 標(biāo)簽

用a標(biāo)簽來(lái)制作超級(jí)鏈接

<!-- href 屬性 表示 其他頁(yè)面的鏈接，支持相對(duì)路徑和絕對(duì)路徑，還可以鏈接到其它網(wǎng)站 -->
<!--target 屬性表示 打開其他鏈接的方式-->
<!-- title 屬性表示 鏈接的標(biāo)題， 當(dāng)鼠標(biāo)移動(dòng)到鏈接上，會(huì)展示出來(lái)-->
<a href="http://www.baidu.com" target="blank" title="文字標(biāo)題">百度</a>






<!--也可以用a標(biāo)簽作為錨點(diǎn) 錨點(diǎn)可以是本頁(yè)面的錨點(diǎn)，也可以是其他頁(yè)面的錨點(diǎn)-->
<h1 id="title">頭部標(biāo)題</h1>
... 此處省略一些代碼
<a href="#title">返回標(biāo)題</a>




<!--下載鏈接，指向 doc， zip， zip等文件格式時(shí)，a標(biāo)簽將成為自動(dòng)下載鏈接-->
<a href="./download/halou.zip">發(fā)郵件</a>
<!-- mailto:前綴的鏈接是郵件鏈接，系統(tǒng)將自動(dòng)打開email相關(guān)軟件-->
<a href="mailto:halouworld@126.com">發(fā)郵件</a>
<!-- tel: 前綴鏈接是電話鏈接，系統(tǒng)將自動(dòng)打開撥號(hào)鍵-->
<a href="tel:11111111111">打開撥號(hào)鍵盤</a>

audio標(biāo)簽

audio標(biāo)簽用來(lái)插入音頻標(biāo)簽

<!--添加 controls 后才會(huì)顯示 播放控件-->
<!--常用音頻格式 mp3 和 ogg格式-->
<!--autoplay 自動(dòng)播放屬性-->
<!--loop 屬性表示循環(huán)播放-->
<audio controls src="./video/demo.mp3">
       您的瀏覽器不支持 audio標(biāo)簽，請(qǐng)升級(jí)
</audio>




<audio controls src="./video/demo.mp3" autoplay loop>
     您的瀏覽器不支持 audio標(biāo)簽，請(qǐng)升級(jí)
</audio>

video標(biāo)簽

video 標(biāo)簽用于插入一段視頻

<!--有的視頻不能播放 ，詳見 https://blog.csdn.net/weixin_34272308/article/details/94614657 -->
<!-- controls 顯示視頻播放控件  -->
<!-- autoplay 自動(dòng)播放 -->
<!-- loop 循環(huán)播放 -->
<!-- 常見的 視頻格式 mp4 ogv webm 等-->
<video controls autoplay loop src="./video/5-4 RDB2.mp4" >
    您的瀏覽器不支持 video標(biāo)簽，請(qǐng)升級(jí)
</video>

其它區(qū)塊標(biāo)簽

以前的區(qū)塊標(biāo)簽只有div，現(xiàn)在為了更好的方便搜索引擎抓取網(wǎng)站，因此有了以下語(yǔ)義更加明確的區(qū)塊標(biāo)簽

<section>	文檔的區(qū)域，比div語(yǔ)義上還要大一點(diǎn)
<header>	頁(yè)頭
<main>	網(wǎng)頁(yè)核心部分
<footer>	頁(yè)腳

其他的語(yǔ)義標(biāo)簽

span 標(biāo)記文本標(biāo)記區(qū)域，沒有特殊效果，結(jié)合CSS使用

b 標(biāo)簽加粗文章（可以使用CSS實(shí)現(xiàn)同樣效果）

u 加下?lián)Q線文字

br 換行

i 傾斜文字（可以使用CSS實(shí)現(xiàn)同樣效果）

strong 代表特別重要的文字

em 需要強(qiáng)調(diào)的文字，有一定的傾斜，也可以用其配置CSS做表情文字

mark 高亮文字

figure 和 figcaption 。figure - 一段獨(dú)立的內(nèi)容 figcaption- figure 內(nèi)部元素的說(shuō)明性內(nèi)容

表單

表單用來(lái)收集信息并且可以完成和后端的數(shù)據(jù)傳輸

表單中大致可以分為三種標(biāo)簽

form標(biāo)簽，標(biāo)識(shí)表單區(qū)域，內(nèi)部的元素都可能被表單提取信息
input 標(biāo)簽，標(biāo)識(shí)輸入、點(diǎn)擊等需要和用戶交互的場(chǎng)景
datalist 下拉框，支持搜索，通常和input一塊使用

一些表單的示例

<!--action 表示要提交到后端的網(wǎng)址-->
<!--method 表示表單提交的方式，通常有 get 、 post 、put、delete等-->


<form action="/save" meththo="post"></form>


<!--<form> 標(biāo)簽中 input 文本框 type="text" 表示文本框-->
<!-- value 表示文本框中的值 -->
<!--planceholder表示提示文字，在沒任何輸入值的情況下，作為提示信息-->
<!--disabled 表示禁用-->
<input type="text" value="123" planceholder="提示文字" disabled>


<!---單選按鈕，name相等，表示選擇了一個(gè)，另一個(gè)就不能選擇了-->
<!--checked 表示默認(rèn)被選中-->
<!-- value 屬性表示要提交到后端服務(wù)器的值-->
<input type="radio" name="radio_group" checked>
<input type="radio"  name="radio_group">




<label>
    <input type="radio" name="sex"> 男
</label>
<label> 
    <input type="radio" name="sex"> 女
</label>




<!--html4 中的標(biāo)簽 通過for 屬性 和 其他標(biāo)簽的id屬性進(jìn)行綁定-->


<input type="radio" name="sex" id="nan"> 
<label for="nan">男</label>


<input type="radio" name="sex"   id="nv">
<label for="nv">女</label>


<!--復(fù)選框 type="checkbox" 同一組的的復(fù)選框，name值應(yīng)該相同 ，復(fù)選框也有value值， 用于向服務(wù)器提交數(shù)據(jù)-->
<input type="checkbox" name="hobby" value="soccer" > 足球
<input type="checkbox" name="hobby" value="basket" > 籃球


<!--密碼框-->
<input type="password" placeholder="請(qǐng)輸入密碼">


<!-- 下拉菜單 -->
<select>
  <option value="alipay">支付寶</option>
  <option value="wxpay">微信支付</option>
</select>


<!--多文本框 rows 和  clos 分別用于設(shè)置 行數(shù) 和 列數(shù)-->
<textarea rows="3" cols="5"></textarea>


<!--三種按鈕 submit 提交按鈕  button 普通按鈕 可以簡(jiǎn)寫為  <button></button> reset 按鈕 重置按鈕-->
<input type="button" value="普通按鈕">
    <input type="reset" value="重置按鈕"> 
    <input type="submit" value="提交表單">




<!--像 email 和 url 等格式，如果點(diǎn)擊提交按鈕，不符合格式，會(huì)有提示-->
<form>
    日期空間: <input type="date">  <br/>
    時(shí)間空間: <input type="time">  <br/>
    日期時(shí)間空間 <input type="datetime-local">  <br/>


    文件:<input type="file"> <br/>  <br/>
    數(shù)字控件: <input type="number"> <br/>
    拖拽條: <input type="range"> <br/>
    搜索框: <input type="search"> <br/>
    網(wǎng)址控件: <input type="url"> <br/>
    郵箱控件: <input type="email" >
    <input type="submit" value="提交">
</form>




<!-- datalist 備選項(xiàng)示例 -->
<input type="text" list="province">
<datalist id="province">
  <option value="陜西"></option>
  <option value="山西"></option>
  <option value="河北"></option>
  <option value="山東"></option>
</datalist>

表格

可以用html渲染表格

table 標(biāo)簽表示表格

tr 表示行
td 表示單元格
caption 表格的標(biāo)題，通常放在表格的第一行
th 表示列標(biāo)題

<!--表格示例-->
<table border="1">
  <caption>我是標(biāo)題</caption>
  <tr>
      <th>第一列標(biāo)題</th>
      <th>第二列標(biāo)題</th>
  </tr>
  <tr>
      <td>第一行第一列</td>
      <td>第一行第二列</td>
  </tr>
  <tr>
      <td>第二行第一列</td>
      <td>第二行第二列</td>
  </tr>
</table>

單元格的合并, clospan 用來(lái)設(shè)置td 或者th的列跨度， rowspan屬性用來(lái)設(shè)置td或者th的行跨度

<!--跨列示例-->
<table border="1">
    <caption>我是標(biāo)題</caption>
    <tr>
        <th>第一列標(biāo)題</th>
        <th>第二列標(biāo)題</th>
    </tr>
    <tr>
        <td colspan="2">跨兩行</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
</table>


<!--跨行示例-->
<table border="1">
        <caption>我是標(biāo)題</caption>
        <tr>
            <th>第一列標(biāo)題</th>
            <th>第二列標(biāo)題</th>
        </tr>
        <tr>
            <td rowspan="2">第一行第一列</td>
            <td>第一行第二列</td>
        </tr>
        <tr>
            <td>第二行第二列</td>
        </tr>
        <tr>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
        </tr>
  </table>

表格的其他標(biāo)簽， thead 定義表頭， tbody 定義表格的主題內(nèi)容， tfoot 標(biāo)簽定義表格底部，通常用來(lái)匯總等

景

雙十一購(gòu)物狂歡節(jié)馬上又要到來(lái)了，最近各種關(guān)于雙十一的爆品購(gòu)物列表在網(wǎng)上層出不窮。如果是網(wǎng)購(gòu)老司機(jī)，一定清楚通常一件商品會(huì)有很多維度的標(biāo)簽來(lái)展示，比如一個(gè)鞋子，它的商品描述可能會(huì)是這樣的“韓都少女英倫風(fēng)系帶馬丁靴女磨砂真皮厚底休閑短靴”。如果是一個(gè)包，那么它的商品描述可能是“天天特價(jià)包包2016新款秋冬斜挎包韓版手提包流蘇貝殼包女包單肩包”。

每個(gè)產(chǎn)品的描述都包含非常多的維度，可能是時(shí)間、產(chǎn)地、款式等等，如何按照特定的維度將數(shù)以萬(wàn)計(jì)的產(chǎn)品進(jìn)行歸類，往往是電商平臺(tái)最頭痛的問題。這里面最大的挑戰(zhàn)是如何獲取每種商品的維度由哪些標(biāo)簽組成，如果可以通過算法自動(dòng)學(xué)習(xí)出例如地點(diǎn)相關(guān)的標(biāo)簽有“日本”、“福建”、“韓國(guó)”等詞語(yǔ)，那么可以快速的構(gòu)建標(biāo)簽歸類體系，本文將借助PAI平臺(tái)的文本分析功能，實(shí)現(xiàn)一版簡(jiǎn)單的商品標(biāo)簽自動(dòng)歸類系統(tǒng)。

數(shù)據(jù)說(shuō)明

數(shù)據(jù)是在網(wǎng)上直接下載并且整理的一份2016雙十一購(gòu)物清單，一共2千多個(gè)商品描述，每一行代表一款商品的標(biāo)簽聚合，如下圖：

我們把這份數(shù)據(jù)導(dǎo)入PAI進(jìn)行處理，具體數(shù)據(jù)上傳方式可以查閱PAI的官方文檔：https://help.aliyun.com/product/30347.html

實(shí)驗(yàn)說(shuō)明

數(shù)據(jù)上傳完成后，通過拖拽PAI的組件，可以生成如下實(shí)驗(yàn)邏輯圖，每一步的具體功能已經(jīng)標(biāo)注：

下面分模塊說(shuō)明下每個(gè)部分的具體功能：

1.上傳數(shù)據(jù)并分詞

將數(shù)據(jù)上傳，由shopping_data代表底層數(shù)據(jù)存儲(chǔ)，然后通過分詞組件對(duì)數(shù)據(jù)分詞，分詞是NLP的基礎(chǔ)操作，這里不多介紹。

2.增加序號(hào)列

因?yàn)樯蟼鞯臄?shù)據(jù)只有一個(gè)字段，通過增加序號(hào)列為每個(gè)數(shù)據(jù)增加主鍵，方便接下來(lái)的計(jì)算，處理后數(shù)據(jù)如下圖：

3.統(tǒng)計(jì)詞頻

展示的是每一個(gè)商品中出現(xiàn)的各種詞語(yǔ)的個(gè)數(shù)。

4.生成詞向量

使用的是word2vector這個(gè)算法，這個(gè)算法可以將每個(gè)詞按照意義在向量維度展開，這個(gè)詞向量有兩層含義。

向量距離近的兩個(gè)詞他們的真實(shí)含義會(huì)比較相近，比如在我們的數(shù)據(jù)中，“新加坡”和“日本”都表示產(chǎn)品的產(chǎn)地，那么這兩個(gè)詞的向量距離會(huì)比較近。
不同詞之間的距離差值也是有意義的，比如“北京”是“中國(guó)”的首都，“巴黎”是“法國(guó)”的首都，在訓(xùn)練量足夠的情況下。|中國(guó)|-|北京|=|法國(guó)|-|巴黎|

經(jīng)過word2vector，每個(gè)詞被映射到百維空間上，生成結(jié)果如下圖展示：

5.詞向量聚類

現(xiàn)在已經(jīng)產(chǎn)生了詞向量，接下來(lái)只需要計(jì)算出哪些詞的向量距離比較近，就可以實(shí)現(xiàn)按照意義將標(biāo)簽詞歸類。這里采用kmeans算法來(lái)自動(dòng)歸類，聚類結(jié)果展示的是每個(gè)詞屬于哪個(gè)聚類簇：

結(jié)果驗(yàn)證

最后通過SQL組件，在聚類簇中隨意挑選一個(gè)類別出來(lái)，檢驗(yàn)下是否將同一類別的標(biāo)簽進(jìn)行了自動(dòng)歸類，這里選用第10組聚類簇。

看一下第10組的結(jié)果：

通過結(jié)果中的“日本”、“俄羅斯”、“韓國(guó)”、“云南”、“新疆”、“臺(tái)灣”

等詞可以發(fā)現(xiàn)系統(tǒng)自動(dòng)將一些跟地理相關(guān)的標(biāo)簽進(jìn)行了歸類，但是里面混入了“男士?jī)?nèi)褲”、“堅(jiān)果”等明顯與類別不符合的標(biāo)簽，這個(gè)很有可能是因?yàn)橛?xùn)練樣本數(shù)量不足所造成的，如果訓(xùn)練樣本足夠大，那么標(biāo)簽聚類結(jié)果會(huì)非常準(zhǔn)確。

其它

本文案例已經(jīng)集成到了PAI首頁(yè)的模板，請(qǐng)注冊(cè)使用PAI：https://data.aliyun.com/product/learn

在模板中點(diǎn)擊創(chuàng)建即可使用，包含邏輯以及數(shù)據(jù)：

在線咨詢

上一篇：PM技術(shù)課｜計(jì)算機(jī)網(wǎng)絡(luò)知多少？
下一篇：Canvas怎樣修改線條的寬度、顏色和形狀？

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商