HTML基礎知識

學習目标

能夠知道html的作用
能夠寫出html的基本結構
能夠知道單标簽和雙标簽的差別
知道相對路徑和絕對路徑的差別
掌握标簽的種類
了解表格的邊線合并
了解表單中常用的表單元素标簽
了解表單的送出方式
了解表單中action屬性的作用

一、HTML的介紹

1. 網頁效果圖 -- 百度

2. html的定義

HTML 的全稱為：HyperText Mark-up Language, 指的是超文本标記語言。

标記：就是标簽, <标簽名稱> </标簽名稱>, 比如: <html></html>、<h1></h1>等，标簽大多數都是成對出現的。

所謂超文本，有兩層含義:

因為網頁中還可以圖檔、視訊、音頻等内容(超越文本限制)
它還可以在網頁中跳轉到另一個網頁，與世界各地主機的網頁連結(超連結文本)

3. html的作用

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

二、html 的基本結構

1. 結構代碼

<!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>标簽是編寫網頁上顯示的内容。

2. 浏覽網頁檔案

網頁檔案的字尾是.html或者.htm, 一個html檔案就是一個網頁，html檔案用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用浏覽器打開，浏覽器會按照标簽描述内容将檔案渲染成網頁。

3. 小結

三、初始常用的 html 标簽

1. 常用的 html 标簽

<!-- 1、成對出現的标簽：-->

<h1>h1标題</h1>
<div>這是一個div标簽</div>
<p>這個一個段落标簽</p>


<!-- 2、單個出現的标簽： -->
<br>
<img src="images/pic.jpg" alt="圖檔">
<hr>

<!-- 3、帶屬性的标簽，如src、alt 和 href等都是屬性 -->
<img src="images/pic.jpg" alt="圖檔">
<a href="http://www.baidu.com">百度網</a>

<!-- 4、标簽的嵌套 -->
<div>
    <img src="images/pic.jpg" alt="圖檔">
    <a href="http://www.baidu.com">百度網</a>
</div>

提示:

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

2.标簽清單

标簽	描述
<!--...-->	定義注釋
<!DOCTYPE>	定義文檔類型
<a>	定義超文本連結
<abbr>	定義縮寫
<acronym>	定義隻取首字母的縮寫，不支援HTML5
<address>	定義文檔作者或擁有者的聯系資訊
<applet>	HTML5中不贊成使用。定義嵌入的 applet。
<area>	定義圖像映射内部的區域
<article>	定義一個文章區域
<aside>	定義頁面的側邊欄内容
<audio>	定義音頻内容
<b>	定義文本粗體
<base>	定義頁面中所有連結的預設位址或預設目标。
<basefont>	HTML5不支援，不贊成使用。定義頁面中文本的預設字型、顔色或尺寸。
<bdi>	允許您設定一段文本，使其脫離其父元素的文本方向設定。
<bdo>	定義文字方向
<big>	定義大号文本，HTML5不支援
<blockquote>	定義長的引用
<body>	定義文檔的主體
<br>	定義換行
<button>	定義一個點選按鈕
<canvas>	定義圖形，比如圖表和其他圖像,标簽隻是圖形容器，您必須使用腳本來繪制圖形
<caption>	定義表格标題
<center>	HTML5不支援，不贊成使用。定義居中文本。
<cite>	定義引用(citation)
<code>	定義計算機代碼文本
<col>	定義表格中一個或多個列的屬性值
<colgroup>	定義表格中供格式化的列組
<command>	定義指令按鈕，比如單選按鈕、複選框或按鈕
<datalist>	定義選項清單。請與 input 元素配合使用該元素，來定義 input 可能的值。
<dd>	定義定義清單中項目的描述
<del>	定義被删除文本
<details>	用于描述文檔或文檔某個部分的細節
<dfn>	定義定義項目
<dialog>	定義對話框，比如提示框
<dir>	HTML5不支援，不贊成使用。定義目錄清單。
<div>	定義文檔中的節
<dl>	定義清單詳情
<dt>	定義清單中的項目
<em>	定義強調文本
<embed>	定義嵌入的内容，比如插件。
<fieldset>	定義圍繞表單中元素的邊框
<figcaption>	定義<figure> 元素的标題
<figure>	規定獨立的流内容（圖像、圖表、照片、代碼等等）。
<font>	HTML5不支援，不贊成使用。定義文字的字型、尺寸和顔色。
<footer>	定義 section 或 document 的頁腳。
<form>	定義了HTML文檔的表單
<frame>	定義架構集的視窗或架構
<frameset>	定義架構集
<h1> to <h6>	定義 HTML 标題
<head>	定義關于文檔的資訊
<header>	定義了文檔的頭部區域
<hr>	定義水準線
<html>	定義 HTML 文檔
<i>	定義斜體字
<iframe>	定義内聯架構
<img>	定義圖像
<input>	定義輸入控件
<ins>	定義被插入文本
<kbd>	定義鍵盤文本
<keygen>	規定用于表單的密鑰對生成器字段。
<label>	定義 input 元素的标注
<legend>	定義 fieldset 元素的标題。
<li>	定義清單的項目
<link>	定義文檔與外部資源的關系
<main>	定義文檔的主體部分。
<map>	定義圖像映射
<mark>	定義帶有記号的文本。請在需要突出顯示文本時使用 <em> 标簽。
<menu>	不贊成使用。定義菜單清單。
<meta>	定義關于 HTML 文檔的元資訊。
<meter>	定義度量衡。僅用于已知最大和最小值的度量。
<nav>	定義導航連結的部分
<noframes>	定義針對不支援架構的使用者的替代内容。HTML5不支援
<noscript>	定義針對不支援用戶端腳本的使用者的替代内容。
<object>	定義内嵌對象
<ol>	定義有序清單。
<optgroup>	定義選擇清單中相關選項的組合。
<option>	定義選擇清單中的選項。
<output>	定義不同類型的輸出，比如腳本的輸出。
<p>	定義段落。
<param>	定義對象的參數。
<pre>	定義預格式文本。
<progress>	定義運作中的進度（程序）。
<q>	定義短的引用。
<rp>	<rp> 标簽在 ruby 注釋中使用，以定義不支援 ruby 元素的浏覽器所顯示的内容。
<rt>	<rt> 标簽定義字元（中文注音或字元）的解釋或發音。
<ruby>	<ruby> 标簽定義 ruby 注釋（中文注音或字元）。
<s>	不贊成使用。定義加删除線的文本。
<samp>	定義計算機代碼樣本。
<script>	定義用戶端腳本。
<section>	<section> 标簽定義文檔中的節（section、區段）。比如章節、頁眉、頁腳或文檔中的其他部分。
<select>	定義選擇清單（下拉清單）。
<small>	定義小号文本。
<source>	<source> 标簽為媒介元素（比如 <video> 和 <audio>）定義媒介資源。
<span>	定義文檔中的節。
<strike>	HTML5不支援，不贊成使用。定義加删除線文本。
<strong>	定義強調文本。
<style>	定義文檔的樣式資訊。
<sub>	定義下标文本。
<summary>	<summary> 标簽包含 details 元素的标題，"details" 元素用于描述有關文檔或文檔片段的詳細資訊。
<sup>	定義上标文本。
<table>	定義表格。
<tbody>	定義表格中的主體内容。
<td>	定義表格中的單元。
<textarea>	定義多行的文本輸入控件。
<tfoot>	定義表格中的表注内容（腳注）。
<th>	定義表格中的表頭單元格。
<thead>	定義表格中的表頭内容。
<time>	定義日期或時間，或者兩者。
<template>	定義在頁面加載時隐藏的一些内容。
<title>	定義文檔的标題。
<tr>	定義表格中的行。
<track>	<track> 标簽為諸如 video 元素之類的媒介規定外部文本軌道。
<tt>	定義打字機文本。
<u>	不贊成使用。定義下劃線文本。
<ul>	定義無序清單。
<var>	定義文本的變量部分。
<video>	<video> 标簽定義視訊，比如電影片段或其他視訊流。
<wbr>	規定在文本中的何處适合添加換行符。

3.HTML 屬性

屬性	描述
accesskey	設定通路元素的鍵盤快捷鍵。
class	規定元素的類名（classname）
contenteditable	規定是否可編輯元素的内容。
contextmenu	指定一個元素的上下文菜單。當使用者右擊該元素，出現上下文菜單
data-*	用于存儲頁面的自定義資料
dir	設定元素中内容的文本方向。
draggable	指定某個元素是否可以拖動
dropzone	指定是否将資料複制，移動，或連結，或删除
hidden	hidden 屬性規定對元素進行隐藏。
id	規定元素的唯一 id
lang	設定元素中内容的語言代碼。
spellcheck	檢測元素是否拼寫錯誤
style	規定元素的行内樣式（inline style）
tabindex	設定元素的 Tab 鍵控制次序。
title	規定元素的額外資訊（可在工具提示中顯示）
translate	指定是否一個元素的值在頁面載入時是否需要翻譯

4.小結

學習 html 語言就是學習标簽的用法，常用的标簽有20多個。
編寫 html 标簽建議使用小寫
根據書寫形式，html 标簽分為雙标簽和單标簽
單标簽沒有标簽内容，雙标簽可以嵌套其它标簽和承載文本内容

四、資源路徑

當我們使用img标簽顯示圖檔的時候，需要指定圖檔的資源路徑，比如:

<img src="images/logo.png">

這裡的src屬性就是設定圖檔的資源路徑的，資源路徑可以分為相對路徑和絕對路徑。

1. 相對路徑

從目前操作 html 的文檔所在目錄算起的路徑叫做相對路徑

示例代碼:

<!-- 相對路徑方式1 -->
<img src="./images/logo.png">
<!-- 相對路徑方式2 -->
<img src="images/logo.png">

2. 絕對路徑

從根目錄算起的路徑叫做絕對路徑，Windows 的根目錄是指定的盤符，mac OS 和Linux 是/

示例代碼:

<!-- 絕對路徑 -->
<img src="/Users/apple/Desktop/demo/hello/images/logo.png">
<img src="C:\demo\images\001.jpg">

提示:

一般都會使用相對路徑，絕對路徑的操作在其它電腦上打開會有可能出現資源檔案找不到的問題

五、清單标簽

1. 清單标簽的種類

無序清單标簽(ul标簽)
有序清單标簽(ol标簽)

2. 無序清單

<!-- ul标簽定義無序清單 -->
<ul>
    <!-- li标簽定義清單項目 -->
    <li>清單标題一</li>
    <li>清單标題二</li>
    <li>清單标題三</li>
</ul>

3. 有序清單

<!-- ol标簽定義有序清單 -->
<ol>
    <!-- li标簽定義清單項目 -->
    <li><a href="#">清單标題一</a></li>
    <li><a href="#">清單标題二</a></li>
    <li><a href="#">清單标題三</a></li>
</ol>

六、表格标簽

1. 表格的結構

表格是由行和列組成，好比一個excel檔案

2. 表格标簽

<table>标簽：表示一個表格

<tr>标簽：表示表格中的一行

<td>标簽：表示表格中的列
<th>标簽：表示表格中的表頭

示例代碼:

<table border="1" cellspacing="3">
    <tr>
        <th>姓名</th>
        <th>年齡</th>
    </tr>
    <tr>
        <td>張三</td>
        <td>18</td> 
    </tr>
</table>

表格邊線合并:

border-collapse 設定表格的邊線合并，如：border-collapse:collapse;

七、表單标簽

1. 表單的介紹

表單用于搜集不同類型的使用者輸入(使用者輸入的資料)，然後可以把使用者資料送出到web伺服器。

2. 表單相關标簽的使用

<form>标簽表示表單标簽，定義整體的表單區域
<label>标簽表示表單元素的文字标注标簽，定義文字标注
<input>标簽表示表單元素的使用者輸入标簽，定義不同類型的使用者輸入資料方式
type屬性
type="text" 定義單行文本輸入框
type="password" 定義密碼輸入框
type="radio" 定義單選框
type="checkbox" 定義複選框
type="file" 定義上傳檔案
type="submit" 定義送出按鈕
type="reset" 定義重置按鈕
type="button" 定義一個普通按鈕
<textarea>标簽表示表單元素的多行文本輸入框标簽定義多行文本輸入框
<select>标簽表示表單元素的下拉清單标簽定義下拉清單
<option>标簽與<select>标簽配合，定義下拉清單中的選項

示例代碼:

<form>
    <p>
        <label>姓名：</label><input type="text">
    </p>
    <p>
        <label>密碼：</label><input type="password">
    </p>
    <p>
        <label>性别：</label>
        <input type="radio"> 男
        <input type="radio"> 女
    </p>
    <p>
        <label>愛好：</label>
        <input type="checkbox"> 唱歌
        <input type="checkbox"> 跑步
        <input type="checkbox"> 遊泳
    </p>
    <p>
        <label>照片：</label>
        <input type="file">
    </p>
    <p>
        <label>個人描述：</label>
        <textarea></textarea>
    </p>
    <p>
        <label>籍貫：</label>
        <select>
            <option>北京</option>
            <option>上海</option>
            <option>廣州</option>
            <option>深圳</option>
        </select>
    </p>
    <p>
        <input type="submit" value="送出">
        <input type="reset" value="重置">
    </p>
</form>

3. 小結

表單标簽是<form>标簽
常用的表單元素标簽有: <label>、<input>、<textarea> 、 <select>等标簽

八、表單送出

1. 表單屬性設定

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

action屬性設定表單資料送出位址
method屬性設定表單送出的方式，一般有“GET”方式和“POST”方式, 不區分大小寫

2. 表單元素屬性設定

name屬性設定表單元素的名稱，該名稱是送出資料時的參數名
value屬性設定表單元素的值，該值是送出資料時參數名所對應的值

3. 示例代碼

<form action="https://www.baidu.com" method="GET">
    <p>
        <label>姓名：</label><input type="text" name="username" value="11" />
    </p>
    <p>
        <label>密碼：</label><input type="password" name="password" />
    </p>
    <p>
        <label>性别：</label>
        <input type="radio" name="gender" value="0" /> 男
        <input type="radio" name="gender" value="1" /> 女
    </p>
    <p>
        <label>愛好：</label>
        <input type="checkbox" name="like" value="sing" /> 唱歌
        <input type="checkbox" name="like" value="run" /> 跑步
        <input type="checkbox" name="like" value="swiming" /> 遊泳
    </p>
    <p>
        <label>照片：</label>
        <input type="file" name="person_pic">
    </p>
    <p>
        <label>個人描述：</label>
        <textarea name="about"></textarea>
    </p>
    <p>
        <label>籍貫：</label>
        <select name="site">
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">廣州</option>
            <option value="3">深圳</option>
        </select>
    </p>
    <p>
        <input type="submit" name="" value="送出">
        <input type="reset" name="" value="重置">
    </p>
</form>

4.小結

表單标簽的作用就是可以把使用者輸入資料一起送出到web伺服器。
表單屬性設定

action: 是設定表單資料送出位址
method: 是表單送出方式，送出方式有GET和POST

表單元素屬性設定

name: 表單元素的名稱，用于作為送出表單資料時的參數名
value: 表單元素的值，用于作為送出表單資料時參數名所對應的值

1-html基本知識

HTML基礎知識

一、HTML的介紹

1. 網頁效果圖 -- 百度

2. html的定義

3. html的作用

二、html 的基本結構

1. 結構代碼

2. 浏覽網頁檔案

3. 小結

三、初始常用的 html 标簽

1. 常用的 html 标簽

2.标簽清單

3.HTML 屬性

4.小結

四、資源路徑

1. 相對路徑

2. 絕對路徑

五、清單标簽

1. 清單标簽的種類

2. 無序清單

3. 有序清單

六、表格标簽

1. 表格的結構

2. 表格标簽

七、表單标簽

1. 表單的介紹

2. 表單相關标簽的使用

3. 小結

八、表單送出

1. 表單屬性設定

2. 表單元素屬性設定

3. 示例代碼

4.小結

繼續閱讀