html語法-文本格式化標簽 #html5開發

eb前端開發課程：html語法文本格式化標簽。

講課人：波波老師。

講完段落，接下來看文本格式化標簽，像word中一樣，在文本中也可以為文字設置粗體、斜體、下劃線等效果。為此，html準備了專門的文本格式化標簽，使文本以特殊的方式顯示。常見的文本格式化標簽有這些。

然后是看斜體，然后是刪除線、下劃線、上標、下標文本、不要代碼片段。然后看還有small、小字體。

、常用的標簽

<h1>~<h6> 表示是一個標題

<p> 段落標簽

<hr/> 水平線標簽

<br/> 換行標簽

<sub> 下標

<sup> 上標

<pre> 原樣標簽：原樣標簽會保留空格和換行符。

<ol> <li> 有序的列表標簽、

<ul> <li> 無序的列表標簽。

項目列表標簽(dl dt dd)

行內標簽(span)

塊標簽<div> div標簽的內容會獨立占一行。

二、實體標簽

空格  

小于號 <

大于號 >

-----------------------------

人民幣 &yen；

版權 ©

商標 ®

三、媒體標簽

<embed></embed>

hidden ：設置隱藏插件是否隱藏。

src ：用于指定音樂的路徑

<marquee> 飄動標簽direction : 指定飄動的方向

scrollamount : 指定飄動的速度。

loop :指定飄動的次數

四、超鏈接標簽

<a> 超鏈接標簽

a標簽常用的屬性：

href : 用于指定鏈接的資源

target: 設置打開新資源的目標。

_Blank 在獨立的窗口上打開新資源

_self 在當前窗口打開新資源

file: file協議（文件協議）這種協議主要是用于搜索本地機器的資源文件的。

格式：

file:///f:/美女/1.jpg

郵件的協議： mailTo迅雷的協議： thunder

超鏈接標簽的作用：

1. 可以用于鏈接資源。

2. 錨點點位.

1. 首先編寫一個錨點錨點的格式： <a name="錨點名字"> 數據</a>

2. 使用a標簽的herf屬性連接到錨點出。 href=”#錨點的名字“

五、圖片標簽

img標簽常用的屬性:

width：設置圖片寬度

height 設置圖片高度

alt: 如果圖片資源無法找到，那么就顯示對應的文字對圖片進行說明。

六、表格標簽

表格使用到的標簽：

<table> 表格

<tr> 行

<td> 單元格

<th> 表頭默認的樣式是居中，加粗。

<caption> 表格的標題

表格常用的屬性：

border 設置表格的邊框

width : 設置表格的寬度

height: 設置表格的高度的。

colspan: 設置單元格占據指定的列數。

rowspan : 設置單元格占據指定的行數。

<thead> 標簽用于組合 HTML 表格的表頭內容。

<thead> 元素應該與 <tbody> 和 <tfoot> 元素結合起來使用，用來規定表格的各個部分（表頭、主體、頁腳）。

通過使用這些元素，使瀏覽器有能力支持獨立于表格表頭和表格頁腳的表格主體滾動。當包含多個頁面的長的表格被打印時，表格的表頭和頁腳可被打印在包含表格數據的每張頁面上。

<thead> 標簽必須被用在以下情境中：作為 <table> 元素的子元素，出現在 <caption>、<colgroup> 元素之后，<tbody>、 <tfoot> 和 <tr> 元素之前。

七、表單標簽

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<!-- 表單標簽： 表單標簽的作用是用于提交數據給服務器的表單標簽的根標簽是<form>標簽常用的屬性action: 該屬性是用于指定提交數據的地址。method： 指定表單的提交方式。get : 默認使用的提交方式。 提交的數據會顯示在地址欄上。post ： 提交的數據不會顯示在地址欄上。注意： 表單項的數據如果需要提交到服務器上面，那么表單項必須要有name的屬性值 -->

</head>
<body>
<form action="http://www.baidu.com" method="post"> <!-- 文本輸入框 單 行- -> 用戶名：<input name="userName" type="text"/><br/>
<!-- 密碼框 -->
密碼：<input name="password" type="password"/><br/>
<!-- 單選框 -->
性別： 男<input checked="true" value="man" name="sex" type="radio"/>
女<input name="sex" value="woman" type="radio"/><br/>
< !-- 下拉框 -->
來自的城市：<select name="city">
<option value="BJ">北京</option>
<option value="SH">上海</option>
<option value="GZ">廣州</option>
<option value="SZ">深圳</option>
</select><br/>
<!-- 復選框 同一組的復選框name的屬性值要一致 -->
興趣愛好：java <input value="java" name="hobit" checked="checked" type ="checkbox" />
javascript <input type="checkbox" value="javascript" name="hobit" />
android <input value="android" name="hobit" type="checkbox" /><br/> <!-- 文件上傳框-->
大頭照：<input name="image" type="file" /><br/>
個人簡介:
<!-- 文本域 -->
<textarea name="intro" rows="10" cols="30"></textarea><br/>
<!-- 提交按鈕 -->
<input type="submit" value="注冊"/>
<!-- 重置按鈕 -->
<input type="reset" value="重置"/>
</form>
</body>
</html>

更多精彩內容在微信公眾平臺：網頁設計自學平臺

干貨！免費領取Adobe高級講師前端教程

點我領取

傳統的技術相比，HTML5 的語法特征更加明顯，可以更加便捷地處理多媒體內容，而且 HTML5 中還結合了其他元素，對原有的功能進行調整和修改，進行標準化工作。HTML5 在 2012 年已形成了穩定的版本。

HTML5 的優勢

1. 解決了跨瀏覽器問題

在 HTML5 之前，各大瀏覽器廠商為了爭奪市場占有率，會在各自的瀏覽器中增加各種各樣的功能，并且不具有統一的標準。使用不同的瀏覽器，常常看到的頁面效果也不同。在 HTML5 中，納入了所有合理的擴展功能，具備良好的跨平臺性能。針對不支持新標簽的老式 IE 瀏覽器，只需簡單地添加 JavaScript 代碼就可以使用新的元素。

2. 新增了多個新特性

HTML 語言從 1.0 到 5.0 經歷了巨大的變化，從單一的文本顯示功能到圖文并茂的多媒體顯示功能，許多特性經過多年的完善，已經發展成為一種非常重要的標記語言。 HTML5 新增的特性如下。

新的語義標簽，比如 header、nav、section、article、footer。
新的表單元素，比如 calendar、date、time、email、url、search。
用于繪畫的 canvas 元素。
用于媒介回放的 video 和 audio 元素。
對本地離線存儲的更好支持。
地理位置、拖曳、攝像頭等 API。

3. 用戶優先的原則

HTML5 標準的制定是以用戶優先為原則的，一旦遇到無法解決的沖突時，規范會把用戶放在第一位。另外，為了增強 HTML5 的使用體驗，還加強了以下兩方面的設計。

安全機制的設計

為確保 HTML5 的安全，在設計 HTML5 時做了很多針對安全的設計。HTML5 引入了一種新的基于來源的安全模型，該模型不僅易用，而且對不同的 API（Application Programming Interface ，應用程序編程接口）都通用。使用這個安全模型，不需要借助于任何不安全的 hack 就能跨域進行安全對話。

表現和內容分離

表現和內容分離是 HTML5 設計中的另一個重要內容。實際上，表現和內容的分離早在 HTML4.0 中就有設計，但是分離得并不徹底。為了避免可訪問性差、代碼復雜度高、文件過大等問題，HTML5 有了更加明晰的規范。但是考慮到 HTML5 的兼容性問題，一些陳舊的內容還是可以兼容使用的。

4. 化繁為簡的優勢

作為當下流行的通用標記語言，HTML5 盡可能地簡化，嚴格遵循了簡單至上的原則，主要體現在這幾個方面：

簡化的字符集聲明;
簡化的 DOCTYPE;
簡單而強大的 HTML5 API;
以瀏覽器原生能力替代復雜的 JavaScript 代碼。

從新增的標簽來看，HTML5 有以下幾個特點：

HTML5 的文檔類型可以簡寫為 <!DOCTYPE html>。
HTML5 的字符編碼可以簡寫為 <meta charset=“utf-8”/>。
標簽不分大小寫，但實際開發中，建議所有標簽都使用小寫。
允許屬性值不加引號。
允許部分屬性值可以省略。

隨著 HTML 的不斷發展，其經歷了“從 HTML4 的寬松到 XHTML 的嚴格再到 HTML5 寬松”的發展路程。

相比較 HTML4 和 XHTML 的結構標簽而言，HTML5 對結構標簽進行了較大簡化，精簡了聲明部分標簽的定義過程，使得結構標簽更加的簡潔。

語義化標簽

在引入語義化標簽之前，我們常常采用 DIV + CSS 來布局，這樣的布局方式使得文檔的結構不清晰。為了解決這個問題，在 HTML5 中新增了一些標簽，來幫助我們更清晰地展現文檔的結構。

所謂語義化標簽就是一看標簽名，我們就知道該標簽里內容的作用。

語義標簽的優點：

在樣式丟失的情況下，頁面也能呈現出很好地內容結構、代碼結構。
比 <div> 標簽有更加豐富的含義，方便開發與維護。
有利于 SEO，提高搜索引擎的有效爬取。
方便其他設備解析（如移動設備）。

在我們的課程中會給大家講解如下所示的語義化標簽：

header 標簽
nav 標簽
section 標簽
article 標簽
aside 標簽
footer 標簽

在線咨詢

上一篇：HTML 顏色
下一篇：用 vue3 + phaser 實現經典小游戲：飛機大戰

您的項目需求

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

整合營銷服務商

html語法-文本格式化標簽 #html5開發

HTML5 的優勢

語義化標簽

您的項目需求