HTML基礎

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>

點擊提交：

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

html是什么？html文檔基本結構

html（hyper text markup language）：超文本標記語言.它不是一種編程語言,而是一種標記語言,它有一套標記標簽(markup tag).html使用標記標簽來描述網頁.html文檔也叫web頁面

你可以使用html來建立自己的web站點.

網頁主要由3部分組成:

■html:結構(structure)

■css:表現(presentation)

■javascript：行為(behavior)

html實例:

<!doctype html>

<html>

<body>

<h1>我是第一個標題</h2>

<p>我是第一個段落</p>

</body>

</html>

●<html>元素定義了整個html文檔,這個元素有個開始標簽<html>,有個結束標簽</html>

●<head>元素必須包含文檔的標題(title),可以包含腳本,樣式,meta信息以及其他更多的信息

●<body>元素定義文檔的主體,<body>元素包含文檔的所有內容(比如文本,超鏈接,圖像,表格和列表等等)

二創建你的第一個html頁面

html文件是文本文件,因此你可以使用任何文本編輯器來創建你的第一個網頁.

給大家推薦幾款常用的編輯器:

●Notepad++

●Sublime Text

●HBuilder

●EditPlus

在編輯器中輸入:

<html>

<head>

</head>

<body>

<p>我的第一個段落.</p>

</body>

</html>

保存為first.html(后綴名也可以是.htm,推薦使用.html)

注意:對于中文網頁需要使用<meta charset="utf-8">聲明編碼,否則會出現亂碼.有些瀏覽器會設置GBK為默認編碼,則你需要設置為<meta charset="gbk">

<title>標簽定義了html文檔的標題,在所有html文檔中是必需的

<title>元素:

●定義瀏覽器工具欄中的標題

●提供頁面被添加到收藏夾時的標題

●顯示在搜索引擎結果的頁面標題

<html>

<head>

<title>我的第一個頁面</title>

</head>

<body>

<p>我的第一個段落.</p>

</body>

</html>

在editplus中運行的結果:

TML是超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創建網頁的標準標記語言。

您可以使用 HTML 來建立自己的 WEB 站點，HTML 運行在瀏覽器上，由瀏覽器來解析。

.HTML指的是超文本標記語言

.HTML不是編程語言，而是一種標記語言

.標記語言是一套標記標簽

.HTML使用標記標簽來描述網頁

.HTML文檔包含了HTML標簽和文本內容

.HTML文檔也叫做web頁面

HTML實例：

<!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8">
    <title> HTML教程實例</title>
  </head>
<body>
  <h1>我的第一個標題</h1>
<p>我的第一個段落</p>
  </body>
  </html>

注意：對于中文網頁需要使用<meta charset="udf-8">聲明編碼，否則出現亂碼。有些瀏覽器(如 360 瀏覽器)會設置 GBK 為默認編碼，則你需要設置為 <meta charset="gbk">。

實例解析：

<!DOCTYPE html>聲明為HTML5文檔

<html>元素是HTML頁面的根元素

<head>元素包含了文檔的元數據

<title>元素描述了文檔的標題

<body>元素包含了可見的頁面內容

<h1>元素定義一個大標題

<p>元素定義一個段落

在線咨詢

上一篇：手把手教大家編寫貪吃蛇小游戲（前端：html+css+javascript）
下一篇：讓騰訊大佬告訴你，寫python到底用什么IDE合適

您的項目需求

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

整合營銷服務商

HTML基礎

TML的作用

HTML的定義

HTML的基本結構

VS Code 安裝

VS Code 的插件安裝

常用的HTML標簽

表單提交

您的項目需求