HTML - Hyper Text Markup Language 超文本標記語言
網頁的三要素:
1. Tag - 標簽 - 承載內容
1) 文本標簽
文本標簽 |
功能 |
h1- h6 |
標題 |
p |
段落 |
title |
斜體 |
strong |
加粗 |
ins |
下劃線 |
del |
刪除線 |
sup |
上標 |
sub |
下標 |
<p><em>我</em>如果<strong>愛你</strong></p>
<p>絕不學<ins>攀援</ins>的凌霄花<sup>1</p>
<p>借你<del>的高枝</del>炫耀自己<sub>2</p>
<p></p>
我如果愛你<br>
絕不學癡情的鳥兒<br>
為綠蔭重復單調的歌曲<br>
2)列表標簽
列表標簽 |
功能 |
ul |
無序列表 |
ol |
有序列表 |
li |
列表下的list item |
dl |
定義列表 |
dt |
定義標題 |
dd |
定義內容 |
<dl>
<!-- definition title 定義標題 -->
<dt>Python</dt>
<dd>一種簡單好用的面向對象的解釋型語言</dd>
<dd>由荷蘭人吉多·范·羅蘇母在1989年發明的標稱語言</dd>
</dl>
<h2>今天為你推薦的水果是</h2>
<!-- unordered list 無序列表-->
<ul>
<!-- list item -->
<li>蘋果</li>
<li>草莓</li>
<li>山竹</li>
</ul>
<!-- ordered list 有序列表-->
<ol>
<!-- list item -->
<li>蘋果</li>
<li>草莓</li>
<li>山竹</li>
</ol>
3) 圖片標簽<img>
<!-- alt 圖片加載失敗的替換文字 -->
<!-- align 圖片位置(默認居左顯示) -->
<figure>
<img title="背景圖" width="200" src="images/1.jpg">
<!-- figcaption 圖片標題 -->
<figcaption>圖1. 背景圖</figcaption>
</figure>
<img align="right" width="250" title="Python" src="images/python-logo@2x.png" alt="Python">
4)超鏈接標簽<a>
a. 頁面鏈接
<a target="_blank">百度</a>
`href` 網址
`target` 打開方式(默認在當前頁面打開,_blank在新的空白頁打開)
b. 錨點鏈接
<a name='top'></a>
<a href="#top">回頂部</a>
c. 功能鏈接
<a target="_blank" ><img border="0" src="http://wpa.qq.com/pa?p=2:123:53" alt="點擊這里給我發消息" title="點擊這里給我發消息"/></a>
<a href="mailto:123@126.com">聯系站長</a>
5)表格標簽<table>
<table>
<!-- 表格標題 -->
<caption>學生信息表</caption>
<tr>
<td width="80">學號</td>
<td width="100">姓名</td>
<td width="80">性別</td>
<td width="100">生日</td>
<td width="100">籍貫</td>
<td width="100">語文</td>
<td width="100">數學</td>
<td width="100">英語</td>
</tr>
</table>
6)表單標簽<form>
<form action="" method="post" enctype="multipart/form-data">
action
: 表單處理方法
method
: 表單提交方法
enctype
: 文件傳輸方式
表單信息:
標簽 |
作用 |
<input type="text"> |
文本信息 |
<input type="password"> |
密碼信息 |
<input type="radio"> |
單選框 |
<input type="checkbox"> |
復選框 |
<input type="date"> |
日期 |
<select><option></option></select> |
選擇下拉框 |
<input type="tel"> |
手機號 |
<input type="email"> |
郵箱 |
<input type="file"> |
文件 |
<input type="number"> |
數字 |
<textarea cols="30" rows="10"></textarea> |
文本域 |
<input type="range"> |
滑動條 |
<input type="hidden"> |
隱藏域 埋點 |
<input type="submit" value="提交"> |
提交 |
<input type="reset" value="重置"> |
重置 |
7)字符實體(實體替換符)
空格:
2. CSS - 層疊樣式表 - 顯示
3. JavaScript - JS - 交互式行為
最后編輯于 :
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。