「HTML」概念和基本標簽

、www：

萬維網，建立在internet上，全球性的、交互、多平臺、分布的信息資源。

wwwf組成：

url：統一資源定位器，通俗來說就是訪問地址
HTTP：超文本傳輸協議
HTML：超文本標記語言

2、網頁的后綴名：html和htm

3、標簽：

雙標簽：<標簽名>內容</標簽名>

單標簽：<標簽名 />

注釋標簽：

各種標簽，以html文檔結構來做：

<!doctype html> <!--文檔類型標簽-->
<html> --最外層的標簽
<head> <!--頭部標簽，包含編碼、標題等-->
	<title>標題</title> <!--標題標簽-->
	<meta charset="utf-8"/> <!--編碼格式-->
</head>
  <body> <!--主體標簽，里面顯示的內容-->
  	<h1>哈哈哈哈</h1>
  </body>
</html>

4、標題標簽

h1~h6,h1最大的，h6最小的

屬性：align,對齊方式

屬性值：left-左對齊，center-居中，right-右對齊

示例：

<h1 align="left">標題左對齊</h1>

5、段落標簽：

屬性：

-title:提示信息

-style:行內樣式

-dir:文字方向，默認從左向右，ltl或者rtl

示例：

<p title="這是提示信息" dir="ltl"></p>

6、換行標簽：<br/>

7、水平線標簽：<hr/>

屬性：

align:對齊方式，默認center居中對齊

color:顏色

width:寬度，可以取值百分比或者像素

size:高度，只能取值像素

noshade:取消陰影

示例：

<hr color="red" width="50%" size="10"/>

8、強調標簽：加粗字體

9、圖片標簽：<img />

屬性：

src:圖片路徑

alt:圖片加載錯誤時提示信息

title:鼠標放在圖片上提示信息

width:寬度

border:邊框

示例：

<img src="1.jpg" alt="圖片加載失敗" title="提示信息"/>

10、超鏈接：<a>文本</a>

屬性：

href：要跳轉的地址

示例：

<a href="https://www.baidu.com">百度一下</a>

TML的作用

HTML是用來開發網頁的，它是開發網頁的語言

HTML的定義

全稱HyperText Mark-up Language，超文本標記語言

標記就是標簽

<標簽名稱></標簽名稱> 比如 <html></html> <h1></h1>等，標簽大多數都是成對出現的。

超文本兩層含義：

因為網頁中還可以有圖片、視頻、音頻等內容（超越文本限制）
它還可以在網頁中跳轉到另一個網頁，與世界各地主機的網頁鏈接（超鏈接文本）

HTML的基本結構

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>網頁標題</title>
    </head>
    <body>
        網頁顯示內容
    </body>
</html>

第一行<!DOCTYPE html>是文檔聲明
用來指定頁面所使用的html的版本, 這里聲明的是一個html5的文檔
<html>...</html>標簽是開發人員在告訴瀏覽器
整個網頁是從<html>這里開始的，到</html>結束
也就是html文檔的開始和結束標簽
<head>...</head>標簽用于定義文檔的頭部
是負責對網頁進行設置標題、編碼格式以及引入css和js文件的
<body>...</body>標簽是編寫網頁上顯示的內容

網頁文件的后綴是.html, 一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網頁

VS Code 安裝

VS Code全拼是 Visual Studio Code 是由微軟研發的一款免費、開源的跨平臺代碼編輯器
目前是前端(網頁)開發使用最多的一款軟件開發工具

下載網址: https://code.visualstudio.com/Download

選擇對應的安裝包進行下載:

安裝一切默認

VS Code 的插件安裝

Chinese(Simplified) Language Pack for VS Code 中文漢化包
open in browser 右擊在瀏覽器打開html

常用的HTML標簽

1 標簽不區分大小寫，但是推薦使用小寫
2 根據標簽的書寫形式，標簽分為雙標簽(閉合標簽)和單標簽(空標簽) 2.1 雙標簽是指由開始標簽和結束標簽組成的一對標簽，這種標簽允許嵌套和承載內容，比如: div標簽 2.2 單標簽是一個標簽組成，沒有標簽內容，比如: img標簽

標簽的使用形式

成對出現的標簽
標簽的嵌套
單個出現的標簽
帶屬性的標簽

列表標簽

無序列表標簽(ul標簽)
有序列表標簽(ol標簽)

網頁效果

表格標簽

<table>標簽：表示一個表格
<tr>標簽：表示表格中的一行
<td>標簽：表示表格中的列
<th>標簽：表示表格中的表頭

屬性設置
border: 1px solid black:設置邊框和顏色
border-collapse: collapse:設置邊框合并

網頁效果

表單標簽

表單用于搜集不同類型的用戶輸入的數據，然后可以把用戶數據提交到web服務器

<form>標簽表示表單標簽，定義整體的表單區域

一個表單中有很多信息組成,比如姓名,愛好,地址等,這些內容有很多其他標簽來承載

這些標簽稱為表單元素標簽

網頁效果

表單提交

表單用于搜集不同類型的用戶輸入的數據，然后可以把用戶數據提交到web服務器

action屬性設置表單數據提交地址
method屬性設置表單提交的方式，一般有“GET”方式和“POST”方式, 不區分大小寫

兩種方式的區別:

“GET”方式 : 沒有請求體
“POST”方式 : 有請求體

表單元素屬性設置

name: 表單元素的名稱，用于作為提交表單數據時的參數名
value: 表單元素的值，用于作為提交表單數據時參數名所對應的值

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

<form action="http://192.168.1.106:8080" method="POST">
<label>姓名:</label>
<input type="text" name="username" >
<br>
<label>密碼:</label>
<input type="password" name="password">
<br>
<label>性別:</label>
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="0">女
<br>
<label>愛好:</label>
<input type="checkbox" name="like" value="睡覺">睡覺
<input type="checkbox" name="like" value="吃飯">吃飯
<input type="checkbox" name="like" value="打豆豆">打豆豆
<br>
<label>照片:</label>
<input type="file" name="pic">
<br>
<label>個人描述:</label>
<textarea name="desc"></textarea>
<br>
<label>地址:</label>
<select name="addr">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">廣州</option>
<option value="4">深圳</option>
</select>
<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按鈕">
</form>
</body>
</html>

點擊提交：

可以看到服務器收到了請求報文。

.br 強制換行標簽

讓后面的文字、圖片、表格等等，顯示在下一行

碼海無際<br>碼海無際

2.p 換段落標簽

在網頁中要把文字有條理地顯示出來，離不開段落標簽，就如同我們平常寫文章一樣，整個網頁也可以分為若干個段落，而段落的標簽就是

<p>碼海無際</p><p>碼海無際</p>

3.hr 水平分割線標簽

在網頁中常常看到一些水平線將段落與段落之間隔開，使得文檔結構清晰，層次分明。這些水平線可以通過插入圖片實現，也可以簡單地通過標簽來完成，hr 就是創建橫跨網頁水平線的標簽。

碼海無際<hr>碼海無際

4.div 分區顯示標簽

分區顯示標簽，也稱之為層標簽，常用來編排一大段的HTML段落，也可以用于格式化表，和 p 很相似，是塊狀元素，經常嵌套使用。

<div>碼海無際</div><div>碼海無際</div><div>  <div>碼海無際</div>  <div>碼海無際</div></div>

5.span 行內標簽

用來組合文檔中的行內元素，沒有固定的格式表現。當對它應用樣式時，它才會產生視覺上的變化。

<span>碼海無際</span><span>碼海無際</span>

6.pre 預格式化標簽

pre 元素可定義預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。而文本也會呈現為等寬字體。

<pre>  碼海無際  碼海無際</pre>

7.ul 無序列表標簽

無序列表的各個列表項之間沒有順序級別之分，是并列的。

<ul>  <li>碼海無際</li>  <li>碼海無際</li>  <li>碼海無際</li></ul>

注意：

 1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標簽中輸入其他標簽或者文字的做法是不被允許的。 2. <li>與</li>之間相當于一個容器，可以容納所有元素。 3. 無序列表會帶有自己樣式屬性，但是不推薦使用，一般會用CSS設置。

8.ol 有序列表標簽

有序列表即為有排列順序的列表，其各個列表項按照一定的順序排列定義

1.格式：

<ol type="符號類型">    <li type="符號類型"></li>    <li type="符號類型"></li></ol>

2.有序列表的type屬性值:

1：阿拉伯數字1.2.3等等，默認type屬性值
A：大小字母A、B、C等等
a：小寫字母a、b、c等等
Ⅰ：大寫羅馬數字Ⅰ、Ⅱ、Ⅲ、Ⅳ等等
ⅰ：小寫羅馬數字ⅰ、ⅱ、ⅲ、ⅳ等等

3.有序列表的value屬性值:

指定一個新的序列數字起始值

4.列表可以進行嵌套

<ol>  <li>碼海無際</li>  <li>碼海無際</li>  <li>碼海無際</li></ol><hr><ol type="A">  <li>碼海無際</li>  <li>碼海無際</li>  <li>碼海無際</li></ol><hr><ol>  <li>碼海無際</li>  <li type="A">碼海無際</li>  <li>碼海無際</li></ol><hr><ol>  <li>碼海無際</li>  <li>碼海無際</li>  <li value="6" type="A">碼海無際</li>  <li>碼海無際</li>  <li>碼海無際</li></ol><hr><ol>  <li>碼海無際</li>  <li>碼海無際</li>  <li>    <ol type="A">      <li>志存高遠</li>      <li>志存高遠</li>    </ol>  </li>  <li>碼海無際</li>  <li>碼海無際</li></ol>

9.dl 自定義型列表標簽

對列表條目進行簡短的說明

<dl>  <dt>軟件說明：</dt>  <dd>這是軟件說明</dd>  <dt>軟件界面：</dt>  <dd>這是軟軟件界面</dd></dl>

10.center 居中對齊標簽

居中對齊

<center>碼海無際</center>

在線咨詢

上一篇：前端入門-html 表單控件使用
下一篇：10款Web程序員必備的CSS工具

您的項目需求

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

整合營銷服務商

「HTML」概念和基本標簽

、www：

2、網頁的后綴名：html和htm

3、標簽：

4、標題標簽

5、段落標簽：

6、換行標簽：<br/>

7、水平線標簽：<hr/>

8、強調標簽：加粗字體

9、圖片標簽：<img />

10、超鏈接：<a>文本</a>

TML的作用

HTML的定義

HTML的基本結構

VS Code 安裝

VS Code 的插件安裝

常用的HTML標簽

表單提交

.br 強制換行標簽

2.p 換段落標簽

3.hr 水平分割線標簽

4.div 分區顯示標簽

5.span 行內標簽

6.pre 預格式化標簽

7.ul 無序列表標簽

8.ol 有序列表標簽

9.dl 自定義型列表標簽

10.center 居中對齊標簽

您的項目需求