沃土前端系列 - HTML經常使用標籤
html是什麼
HTML是Hyper Text Markup Language的縮寫，中文的意思是「超文本標記語言」，它是製做網頁的標準語言。因爲網頁中不只包含普通文本，還包含超文本，故被稱做超文本描述語言。
那什麼是超文本呢？所謂超文本，就是指圖像、視頻、動畫、聲音、表格、連接等多媒體的內容。javascript
第一個網頁Hello world
打開記事本,寫上Hello world,而後保存爲index.html,接着用瀏覽器把index.html打開,就看到了
Hello world,這就是一個最簡單的網頁。css
認識標籤
- 什麼是標籤（元素）
<!-- DOCTYPE 這個文檔類型，一開始無需深究 -->
<!DOCTYPE html>
<html>
<!-- 網頁的一些設置放在head -->
<head>
<!-- 設置字符集 -->
<meta charset="UTF-8">
<!-- 設置標題-->
<title>demo</title>
</head>
<!-- 看得見的部分放在body -->
<body>
hello world
</body>
</html>
html、body、head、meta都是標籤，不一樣的標籤做用也不一樣html
經常使用標籤一
- 標題標籤H1~H6
- 分割線標籤 hr
- div標籤
- 段落p標籤
- span標籤
- 塊級標籤和行內標籤
- 換行標籤 br
- 圖片標籤
- 列表標籤
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 標題標籤 -->
<h1>這是h1標籤</h1>
<h2>這是h1標籤</h2>
<h3>這是h1標籤</h3>
<h4>這是h1標籤</h4>
<h5>這是h1標籤</h5>
<h6>這是h1標籤</h6>
<!--分割線標籤-->
<hr />
<!-- div標籤 -->
<div>
這是div標籤
</div>
<!-- 段落標籤 -->
<p>
這是段落標籤，文字的上下會有間隔
</p>
<!-- span標籤 -->
<span>
第一個span標籤
</span>
<span>
第二個span標籤
</span>
<!-- 換行標籤 -->
<br />
<!-- 圖片標籤 -->
<img src="tupian.jpg"/>
<!-- 列表標籤，包括有序列表和無序列表 -->
<h3>無序列表</h3>
<ul>
<li>內容1</li>
<li>內容2</li>
<li>內容3</li>
<li>內容4</li>
<li>內容5</li>
</ul>
<h3>有序列表</h3>
<ol>
<li>內容1</li>
<li>內容2</li>
<li>內容3</li>
<li>內容4</li>
</ol>
</body>
</html>
經常使用標籤二：表格標籤
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- border加上邊框，width設置寬度 -->
<table border width="500">
<!-- thead 表頭 -->
<thead>
<!-- tr 行 -->
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
</thead>
<!-- tbody 表的主體內容 -->
<tbody>
<!-- tr行 -->
<tr>
<!-- td列 -->
<td>楚留香</td>
<td>22</td>
<td>男</td>
</tr>
<tr>
<td>胡鐵花</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>范冰冰</td>
<td>30</td>
<td>女</td>
</tr>
</tbody>
</table>
</body>
</html>
經常使用標籤三：表單標籤
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- form表單標籤，用來包各類表單相關的元素 -->
<form action="">
<!-- 輸入元素 -->
<!-- 文本域type爲text，value是默認值，placeholder爲提示語 -->
<input type="text" value="" placeholder="請輸入文字"/><br />
<!-- 密碼框type=password -->
<input type="password" value="" placeholder="請輸入密碼"/><br />
<!-- 單選按鈕type=radio，必須擁有相同的name -->
男：<input type="radio" name="sex" value="" />
女：<input type="radio" name="sex" value="" /><br />
<!-- 複選框checkbox -->
足球：<input type="checkbox" name="ball" value="" />
籃球：<input type="checkbox" name="ball" value="" />
羽毛球球：<input type="checkbox" name="ball" value="" />
乒乓球：<input type="checkbox" name="ball" value="" /><br />
<!-- 按鈕 -->
<input type="button" name="" id="" value="按鈕" /><br />
<!-- 提交按鈕 -->
<input type="submit" name="" id="" value="提交" />
<!--重置按鈕 -->
<input type="reset" name="" id="" value="重置" />
</form>
</body>
</html>
經常使用標籤四：連接標籤、下拉列表標籤和iframe標籤
連接標籤html5
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p {
width: 300px;
line-height: 3;
}
</style>
</head>
<body>
<a href="helloWorld.html">hello world</a><br />
<a href="https://www.baidu.com">百度</a><br />
<!-- 打開新頁面 -->
<a href="https://www.sina.com" target="_blank">新浪</a><br />
<a href="#aaa">錨點aaa</a>
<p>
HTML是Hyper Text Markup Language的縮寫，中文的意思是「超文本標記語言」，它是製做網頁的標準語言。因爲網頁中不只包含普通文本，還包含超文本，故被稱做超文本描述語言。 那什麼是超文本呢？所謂超文本，就是指圖像、視頻、動畫、聲音、表格、連接等多媒體的內容。 HTML是網頁的基本描述語言，由Tim Berners-Lee在1990年提出，其目的是方便地把一臺電腦中的文本或圖形，與另外一臺電腦中的文本或圖形聯繫在一體，造成一個有機的總體，讓人們沒必要考慮這些信息是在當前的電腦上，仍是在網絡上的其餘電腦上。 HTML 不是一種編程語言，而是一種描述性的標記語言 (markup language)，它使用標籤來描述網頁，負責將網頁內容進行格式化，使內容更具邏輯性。 HTML文檔不須要編譯，直接由瀏覽器解釋執行，瀏覽器（IE、FireFox、Chrome、Opera、Safari、UC等）軟件知道HTML的語法，知道如何解釋HTML文檔。目前互聯網上的絕大部分網頁，都是使用HTML編寫的。
</p>
<p>
HTML是Hyper Text Markup Language的縮寫，中文的意思是「超文本標記語言」，它是製做網頁的標準語言。因爲網頁中不只包含普通文本，還包含超文本，故被稱做超文本描述語言。 那什麼是超文本呢？所謂超文本，就是指圖像、視頻、動畫、聲音、表格、連接等多媒體的內容。 HTML是網頁的基本描述語言，由Tim Berners-Lee在1990年提出，其目的是方便地把一臺電腦中的文本或圖形，與另外一臺電腦中的文本或圖形聯繫在一體，造成一個有機的總體，讓人們沒必要考慮這些信息是在當前的電腦上，仍是在網絡上的其餘電腦上。 HTML 不是一種編程語言，而是一種描述性的標記語言 (markup language)，它使用標籤來描述網頁，負責將網頁內容進行格式化，使內容更具邏輯性。 HTML文檔不須要編譯，直接由瀏覽器解釋執行，瀏覽器（IE、FireFox、Chrome、Opera、Safari、UC等）軟件知道HTML的語法，知道如何解釋HTML文檔。目前互聯網上的絕大部分網頁，都是使用HTML編寫的。
</p>
<p id="aaa">
這是個錨點
</p>
<a href="#">回頂部</a>
<p>
那什麼是超文本呢？所謂超文本，就是指圖像、視頻、動畫、聲音、表格、連接等多媒體的內容。 HTML是網頁的基本描述語言，由Tim Berners-Lee在1990年提出，其目的是方便地把一臺電腦中的文本或圖形，與另外一臺電腦中的文本或圖形聯繫在一體，造成一個有機的總體，讓人們沒必要考慮這些信息是在當前的電腦上，仍是在網絡上的其餘電腦上。 HTML 不是一種編程語言，而是一種描述性的標記語言 (markup language)，它使用標籤來描述網頁，負責將網頁內容進行格式化，使內容更具邏輯性。 HTML文檔不須要編譯，直接由瀏覽器解釋執行，瀏覽器（IE、FireFox、Chrome、Opera、Safari、UC等）軟件知道HTML的語法，知道如何解釋HTML文檔。目前互聯網上的絕大部分網頁，都是使用HTML編寫的。
</p>
</body>
</html>
下拉列表標籤java
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<select name="">
<!-- 列表選項 -->
<option value="xigua">西瓜</option>
<option value="apple">蘋果</option>
<option value="xueli">雪梨</option>
<option value="banner">香蕉</option>
</select>
</body>
</html>
iframe標籤編程
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<iframe src="https://www.baidu.com" width="800" height="600"></iframe>
</body>
</html>
經常使用標籤五：html5新標籤
- html5是什麼
- Html5經常使用新增標籤
- header頭部標籤
- footer底部標籤
- nav導航標籤
- audio音頻標籤
- video視頻標籤
- canvas畫布標籤
- 其餘標籤
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 頭部標籤 -->
<header>
<!-- 導航標籤 -->
<nav>
<a href="https://www.baidu.com" target="_blank">百度</a>
<a href="https://www.sina.com" target="_blank">新浪</a>
<a href="https://www.qq.com" target="_blank">騰訊</a>
</nav>
</header>
<hr />
<!-- input type=tel移動端點擊輸入框，彈出的數字鍵盤 -->
<input type="tel" value="" placeholder="請輸入手機號碼" /><br />
<!-- 音頻 -->
<audio src="jiaobu.mp3" controls="controls"></audio><br />
<!-- 視頻 -->
<video width="800" height="400" controls="controls">
<source src="zhanlang.mp4" type="video/mp4"></source>
</video><br />
<!-- 畫布 -->
<canvas id="myCanvas" width="200" height="100"></canvas>
<hr />
<footer>
底部標籤
</footer>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
cxt.fillStyle = "#FF0000";
cxt.fillRect(0, 0, 150, 75);
</script>
</body>
</html>
更多標籤
更多標籤請訪問：canvas
相關文章
- 1. WEB前端-HTML-經常使用標籤
- 2. HTML經常使用標籤
- 3. Html經常使用標籤
- 4. html經常使用標籤
- 5. Html-經常使用標籤
- 6. HTML 經常使用標籤
- 7. 前端學習筆記一一HTML經常使用標籤之列表標籤
- 8. 黑馬pink前端HTML(一) —— HTML簡介 - 經常使用標籤
- 9. 經常使用html標籤
- 10. [HTML] HTML經常使用基礎標籤
- 更多相關文章...
- • SVN 標籤（tag） - SVN 教程
- • Mybatis select標籤 - MyBatis教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Composer 安裝與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. WEB前端-HTML-經常使用標籤
- 2. HTML經常使用標籤
- 3. Html經常使用標籤
- 4. html經常使用標籤
- 5. Html-經常使用標籤
- 6. HTML 經常使用標籤
- 7. 前端學習筆記一一HTML經常使用標籤之列表標籤
- 8. 黑馬pink前端HTML(一) —— HTML簡介 - 經常使用標籤
- 9. 經常使用html標籤
- 10. [HTML] HTML經常使用基礎標籤