html基礎-認識html

1.什么是html

html是瀏覽器可以識別的的標記語言，我們在瀏覽器瀏覽的網頁就是一個個的html文檔

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>認識html</title>
</head>
<body><h1>我的第一個標題</h1><p>我的第一個段落。</p></body>
</html>

將這串代碼用記事本保存起來，更改.txt后綴名為.html，拖到瀏覽器中就可以看到效果了。

html的組成部分

html是有html標簽（元素）組成的，有時候叫html標簽，有時候叫html元素，都一個意思。
例如上面的<h1></h1>標簽代表標題 <p></p>標簽代表段落

html 常用標簽

雙標記標簽:
有開始有結尾例如<h1> 是開始標簽 </h1>是結尾標簽
單標記標簽：只有一個標記。如<img /> 圖片標簽， <input />輸入框標簽

1.標題標簽：html標題是通過`<h1> -<h6>`標簽來定義的

<h1></h1> 顯示的標題字體最大。
<h6></6> 顯示的標題字體最小。

2.段落標簽：p標簽

<p>這是一個段落</p>

3.超鏈接標簽：a標簽

<a href = "https://www.baidu.com">點擊網址進入某個頁面</a>

4.容器標簽 div標簽

網頁布局容器標簽

網頁由一個個div容器組成的，是網頁布局排版中最常用的標簽。

5.列表標簽

有序列表標簽

<ol><li>這是有序標簽</li><li>這是有序標簽</li><li>這是有序標簽</li>
</ol>

網頁效果是這樣子的
在這里插入圖片描述

有序標簽

 <ul><li>這是無序標簽</li><li>這是無序標簽</li><li>這是無序標簽</li></ul>

瀏覽器顯示的效果是這樣子的
在這里插入圖片描述

6.表格標簽

<table><tr><td>id</td><td>姓名</td><td>年齡</td><td>性別</td></tr>
</table>

table 代表這是一個表格容器，tr是表格中的行，td是表格中的單元格，相當于列的意思。

標簽相對于標簽有加粗和居中的效果

<table><tr><th>id</th><th>姓名</th><th>年齡</th><th>性別</th></tr><tr><td>1</td><td>張三</td><td>13</td><td>男</td></tr><tr><td>2</td><td>李四</td><td>14</td><td>女</td></tr><tr><td>3</td><td>王五</td><td>15</td><td>男</td></tr></table>

瀏覽器顯示效果是這樣子的
在這里插入圖片描述

7.表單標簽

<form>注冊用戶<br/><input  type="text" placeholder="請輸入昵稱"/><br/><input  type="password" placeholder="請輸入密碼"/><br/><input type="radio" name="sex" />男  <input type="radio" name="sex" >女<br/>興趣愛好有哪些？<br/><input type="checkbox">足球 <input type="checkbox"> 籃球 <input type="checkbox"><br/>請選擇圖像上傳<br/><input type="file"><br/>您來自那個省份？<br/><select><option>湖北</option><option>湖南</option><option>河南</option><option>廣東</option></select>
</form>

在這里插入圖片描述

<form></form>標簽代表這是一個表單容器 <input />是輸入框標簽，它有不同的類型 type="text | password |radio |checkbox |file"
type="text" 代表這是一個文字輸入框
type="password" 這是一個密碼輸入框
type="radio" 這是一個單選框
type="checbox" 這是一個復選框
type="file" 這是一個文件選擇器
type="reset" 這是一個重置按鈕
type="submit"這是一個確認提交按鈕
type="button" 這是一個普通按鈕

8.文本域標簽

文本域標簽也是表單組件里面的一種

<textarea cols="30" rows="10"></textarea>

在這里插入圖片描述

9.塊級標簽

<div>標簽也是塊級標簽但是div是一個標簽獨占一整行，<span>標簽只占一小塊
<span>hello</span>

10.音視頻標簽

音頻

<audio src="" controls></audio>

視頻

<video src="" controls width="500px" height="100px"></video>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/63339.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/63339.shtml
英文地址，請注明出處：http://en.pswp.cn/web/63339.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！