HTML部分第四章-HTML常用標簽

、換行：<br>

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

示例源碼：

abc<br>dedfgsadfa<br>

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

<a target="_self">百

度</a><br>

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

<a title="點擊有驚

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

<a title="xxxx"

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

</a><br>

<a title="yyyy"><img

src=cwhello.jpg" alt="yyyy"

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

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

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

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

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

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

Color 顏色設置

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

Font-size 具體大小

Font-weight 具體粗細

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：默認字體位置c:\windows\fonts 目錄下

7、水平線：<hr>

Solid 固體（實線）、dashed（虛線）、double、dotted、……

8、列表：無序列表、有序列表

<ul>

</ul>

<ol>

</ol>

9、文字上標：<sup></sup>

10、文字下標：<sub></sub>

11、文字標題：

……

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

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

13、元標簽：<meta>

14、編碼知識：

Gb2312 國標2312，保存中文第四代簡化字的編碼。

Gbk 包含中文簡體、繁體、火星文

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

1個漢字=2Byte=2*8bit

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

15、容器級標簽：

<p></p> 段落

<div></div> 層

16、其他特殊：

一個英文半角空格  

小于 <

大于 >

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

所有的標簽可以分為二大類

1、塊（block）元素：后面的內(nèi)容會自動換行?。。?/p>

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

轉(zhuǎn)換：

<標簽 style=”display:inline;”></標簽>

例1

例2

Bbb

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

第一段：

第二段：

瀏覽器訪問常用快捷鍵：

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

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

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

TMl 的標簽可以分為單個標簽和成對標簽。

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

<!--單個標簽-->
<meta>
<!--成對標簽 -->
<div></div>

以下是HTMl中常用的一些標簽

div 標簽

div 標簽主要用來將相關(guān)的內(nèi)容組合到一塊，就像菜市場把各個蔬菜分成不同種類區(qū)分擺放是一個道理。

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

<div>
  div 就是一個分類的存儲箱子
</div>

p標簽

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

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

H-標題標簽

h標簽分為六個

標簽	語義
h1	一級標題
h2	二級標題
h3	三級標題
h4	四級標題
h5	五級標題
h6	六級標題

引用標題標簽后，字體會加粗、字號一會變大

ul 無序標簽

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

值（type屬性）	描述
disc	默認值，實心圓
circle	空心圓
square	實心方框

舉例:

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




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

ol 有序標簽

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

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

設置start屬性，表示從哪個編號開始
加 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標簽表示自定義列表

dt表示數(shù)據(jù)項，dd表示數(shù)據(jù)定義， dd是dt標簽的解釋

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

img標簽

img 用來插入圖片，包括但不限于以下圖片格式

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

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

a 標簽

用a標簽來制作超級鏈接

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






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




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

audio標簽

audio標簽用來插入音頻標簽

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




<audio controls src="./video/demo.mp3" autoplay loop>
     您的瀏覽器不支持 audio標簽，請升級
</audio>

video標簽

video 標簽用于插入一段視頻

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

其它區(qū)塊標簽

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

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

其他的語義標簽

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

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

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

br 換行

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

strong 代表特別重要的文字

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

mark 高亮文字

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

表單

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

表單中大致可以分為三種標簽

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

一些表單的示例

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


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


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


<!---單選按鈕，name相等，表示選擇了一個，另一個就不能選擇了-->
<!--checked 表示默認被選中-->
<!-- value 屬性表示要提交到后端服務器的值-->
<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 中的標簽 通過for 屬性 和 其他標簽的id屬性進行綁定-->


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


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


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


<!--密碼框-->
<input type="password" placeholder="請輸入密碼">


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


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


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




<!--像 email 和 url 等格式，如果點擊提交按鈕，不符合格式，會有提示-->
<form>
    日期空間: <input type="date">  <br/>
    時間空間: <input type="time">  <br/>
    日期時間空間 <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 備選項示例 -->
<input type="text" list="province">
<datalist id="province">
  <option value="陜西"></option>
  <option value="山西"></option>
  <option value="河北"></option>
  <option value="山東"></option>
</datalist>

表格

可以用html渲染表格

table 標簽表示表格

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

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

單元格的合并, clospan 用來設置td 或者th的列跨度， rowspan屬性用來設置td或者th的行跨度

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


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

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

景

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

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

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

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

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

實驗說明

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

下面分模塊說明下每個部分的具體功能：

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

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

2.增加序號列

因為上傳的數(shù)據(jù)只有一個字段，通過增加序號列為每個數(shù)據(jù)增加主鍵，方便接下來的計算，處理后數(shù)據(jù)如下圖：

3.統(tǒng)計詞頻

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

4.生成詞向量

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

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

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

5.詞向量聚類

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

結(jié)果驗證

最后通過SQL組件，在聚類簇中隨意挑選一個類別出來，檢驗下是否將同一類別的標簽進行了自動歸類，這里選用第10組聚類簇。

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

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

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

其它

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

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

在線咨詢

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

您的項目需求

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

整合營銷服務商