HTML 基礎

時間 2019-11-12

標籤 html 基礎欄目 HTML 简体版

原文原文鏈接

HTML 基礎

今天開始就進入到前端的整理和總結了。javascript

1、HTML 的概念性知識css

html是 htyper text markup language 即超文本標記語言，超文本就是指頁面內能夠包含圖片、連接，甚至音樂、程序等非文字元素，而標記語言:即標記（標籤）構成的語言。html

　　網頁至關於HTML文檔，由瀏覽器解析（就像你寫.py文件用pyCharm解析同樣），用來展現的，靜態網頁即靜態的資源，如xxx.html，動態網頁是html代碼是由某種開發語言根據用戶請求動態生成的。前端

什麼是標籤:java

是由一對尖括號包裹的單詞構成例如: <html> *全部標籤中的單詞不可能以數字開頭.
標籤不區分大小寫.<html> 和 <HTML>. 推薦使用小寫.
標籤分爲兩部分: 開始標籤<a> 和結束標籤</a>. 兩個標籤之間的部分咱們叫作標籤體.
有些標籤功能比較簡單.使用一個標籤便可.這種標籤叫作自閉和標籤.例如: <br/> <hr/> <img />
標籤能夠嵌套.可是不能交叉嵌套.

標籤的屬性:web

一般是以鍵值對形式出現的. 例如 name="haishiniu"
屬性只能出如今開始標籤或自閉和標籤中.
屬性名字所有小寫. *屬性值必須使用雙引號或單引號包裹例如 name="haishiniu"
若是屬性值和屬性名徹底同樣.直接寫屬性名便可. 例如 readonly

塊級標籤和內聯標籤sql

　　塊級標籤：<p><h1><table><ol><ul><form><div><dl><hr><form>瀏覽器

　　內聯標籤：<a><input><img><span><lable><select>緩存

block（塊）元素的特色
　　① 老是在新行上開始；
　　② 高度，行高以及外邊距和內邊距均可控制；
　　③ 寬度缺省是它的容器的100%，除非設定一個寬度。
　　④ 它能夠容納內聯元素和其餘塊元素安全

inline元素的特色
　　① 和其餘元素都在一行上；
　　② 高，行高及外邊距和內邊距不可改變；
　　③ 寬度就是它的文字或圖片的寬度，不可改變
　　④ 內聯元素只能容納文本或者其餘內聯元素

對行內元素，須要注意以下
　　設置寬度width 無效。
　　設置高度height 無效，能夠經過line-height來設置。
　　設置margin 只有左右margin有效，上下無效。
　　設置padding 只有左右padding有效，上下則無效。注意元素範圍是增大了，可是對元素周圍的內容是沒影響的。

接下來看一下HTML的文檔樹：

2、HTML標籤的解析

一、head標籤

　　<head> 標籤用於定義文檔的頭部，它是全部頭部元素的容器。<head> 中的元素能夠引用腳本、指示瀏覽器在哪裏找到樣式表、提供元信息等等。文檔的頭部描述了文檔的各類屬性和信息，包括文檔的標題、在 Web 中的位置以及和其餘文檔的關係等。絕大多數文檔頭部包含的數據都不會真正做爲內容顯示給讀者。<title> 定義文檔的標題，它是 head 部分中惟一必需的元素。

下面這些標籤可用在 head 部分：<base>, <link>， <meta>, <script>, <style>, 以及 <title>。

咱們看幾個例子：

<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="搜索引擎根據這裏面的東西">   　　
    <meta name="description" content="網頁的描述信息">
    <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">   # 2秒後重定向到某網站
    <title>web</title>　　　　　　　　　　　　　　　　　　　　　　　　　　　　
    <link rel="icon" href="http://www.jd.com/favicon.ico">　　　　　　    # 網頁圖標
    <link rel="stylesheet" href="mycss.css">　　　　　　　　　　　　　　　　 # 外部css文件
</head>

base標籤：<base/>:標籤爲頁面上的全部連接規定默認地址或默認目標。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base href="http://images.cnblogs.com/"/>
    <base target="_blank" />
</head>
<body>
<img src="o_s.png" alt="圖片加載失敗。。。"/>
<a href="http://cnblogs.com/haishiniu123/">haishiniu blogs</a>

# 上面這段代碼中，<img>標籤的src屬性是一個相對路徑，由於<head>中經過base標籤設置了連接的默認地址，

因此img的src實際的地址是"http://images.cnblogs.com/"/

一樣的，<a>中只是指定了href，並未指定target屬性，因此也會使用base中設置的target屬性的值。

<link/>
引用外部文檔，常見於引用外部樣式。重要屬性有三個：rel、href、type。
rel 規定文檔與被連接文檔之間的關係。
•　　 rel="dns-prefetch" 預先解析緩存文檔中使用的域名，目的是爲了提升網頁訪問速度。使用場景：在一個網頁頻繁使用其餘域名資源時。
•　　 rel="shortcut icon"或rel="icon" 在收藏和標題欄上用於顯示的圖標。示例：<link rel="icon" href="http://images.cnblogs.com/cn>。注意：IE瀏覽器只支持ico格式，爲了兼容IE，圖片文件採用ico格式。
•　　 rel="stylesheet" 引用外部樣式表。
•　　 rel="nofollow" 用於指示搜索引擎不要追蹤（爬蟲抓取），減小垃圾連接。用於<a>標籤，使用場景：網頁不被信任或是不但願唄搜索引擎錄入的網站。

href 資源的路徑（相對路徑/絕對路徑）。

type 規定被鏈接文檔的MIME類型，用於明確文件的打開方式。例如：.ico文件 image/x-icon。

<meta/>

定義關於HTML文檔的元數據。重要的屬性有三個：http-equiv、name、content
http-equiv 把content屬性值關聯到http頭部。
•Content-Type（瀏覽器接受的文檔類型，通常是text/html）
•refresh（網頁刷新，以秒爲單位）
•expires（設定網頁到期時間，一旦過時，必須到服務器上重傳）

<meta http-equiv="Content-Type" content="text/html ;charset=UTF-8"/>
<meta http-equiv="Refresh" content="2">
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">
<meta http-equiv="expires" content="6 Jun 2016"/>

name 把content屬性關聯到一個名稱。
•keywords（搜索關鍵字，用於搜索引擎抓取信息的顯示）
•description（搜索到網站後顯示的網頁內容簡描述）
•author（站點製做者信息）
• generator（用以說明生成工具）
•name也能夠根據特定的功能自定義，在新浪網中有使用360認證和搜狐認證（<meta name="360-site-verification"content="63349**********"/>、<meta name="haishiniu_site_verification"content="BVI*******"/>）。

<meta name="keywords" content="搜索關鍵字">
<meta name="description" content="簡要描述">
<meta name="author" content="http://cnblogs.com/suoning">
<meta name="generator" content="用以說明生成工具">

content 定義與http-equiv或name屬性相關的元信息，是必要的屬性。

二、body標籤　

　　body 元素定義文檔的主體。body 元素包含文檔的全部內容（好比文本、超連接、圖像、表格和列表等等）.

一、基本標籤

<h1>~<h6> 標題標籤(大小一次遞減).

<p>: 段落標籤. 包裹的內容被換行.而且也上下內容之間有一行空白.

　　　　style="text-indent: 2em"能夠設置樣式爲首行縮進兩個字符。

　　　　<blockquote></blockquote>能夠用來設置整個段落的縮進。

<b> <strong>: 加粗標籤.
<strike>: 爲文字加上一條中線.
<u>: 文字下方加下劃線.
<em> <i>: 文字變成斜體.
<sup>和<sub>: 上角標和下角標.
<br>:換行.
<hr>:水平線.
<div>

塊級標籤。塊級標籤經常使用於佈局，行級標籤經常使用語顯示內容。

　　 div的顯示一般使用id或class來標識。id爲惟一的標籤標識，class爲標籤的類標識。

　　 div的大小是由內容來決定的，默認狀況下，高度由內容的高度決定，寬度適應屏幕。

　　能夠容納其餘元素，是一個容器。

<span>

三、特殊符號

　　> >

　　< <

　　  空格

　 " 引號

四、<a> 超連接標籤(錨標籤)

重要屬性有三個：href、target、name
　　　　href 超連接地址：能夠是Web上任意資源，包括圖片，網頁，樣式，腳本文件等。href="#"時，表示被連接頁面就是當前頁面。
　　　　target 文檔打開時要顯示的目標位置，屬性值通常有：_blank（新窗口中打開）、_self（默認，在超連接所在的容器中打開）、_parent（在超連接的父容器中打開）、_top（整個容器中打開）、name（框架名稱）。
　　　　name 錨記名稱。做用：跳轉到文檔的某個地方。返回首頁。

五、<img> 圖形標籤
行級標籤，用來顯示圖片。
重要屬性有：src、title、alt、width、height、align。
　　　　src 圖片地址。
　　　　title 鼠標懸浮在圖片上的文字。
　　 alt 圖片找不到時要替換的文字。若是圖片資源使用的是外網資源，則不會顯示要替換的文字。若是使用的是本網站的資源（相對路徑給出），則找不到圖片時會顯示替換的文字，並保留圖片設置的寬高結構。
　　　　align 圖片周圍文字的垂直對齊狀況。經常使用的屬性值有：top（與圖片的頂部對齊）、middle（與圖片的中部對齊）、bottom（默認，與圖片的底部對齊）。
width 圖片的寬
height 圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)

六、列表標籤　
<ul> :無序列表標籤
<li>:列表中的每一項.
<ol> :有序列表標籤
<li>:列表中的每一項.
<li>主要的屬性有：type、value兩個:
•type指明項目的類型，屬性值有：A，a，I，i，1，disc（實心圓），square（實心正方形），circle（空心圓）。
•value表示序號值從幾開始。
<dl> 定義列表
<dt> 列表標題
<dd> 列表項

簡單列表標籤舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仍是牛</title>
</head>
<body>

<ur>

    <li type="circle">A</li>

    <li type="1">B</li>

    <li type="1">C</li>

</ur>

<ol>

    <li value="3">3</li>

    <li>4</li>

</ol>

<dl>

    <dt><i>標題</i></dt>

    <dd>第一項</dd>

    <dd>第二項</dd>

    <dd>第三項</dd>

</dl>

</body>
</html>

七、表格標籤
<table> 表格標籤
•border:（表格邊框）
•align（水平對齊方式）
•bgcolor（背景顏色）
•cellpadding（內邊距，單元格與內容之間的距離）
•cellspacing（外邊距，單元格的間距，設置爲0時，表格變爲實線表格）
•width（表格的寬度，能夠用%或者像素，最好經過css來設置長寬）
<caption> 表格的標題
<tr> 表格的數據行，table row
<th> 表格的表頭名稱，與<td>不一樣在於文字採用加粗居中的形式顯示，table head cell
<td> 單元格，用來顯示錶格內容，table data cell
<thead> 表格頭部，使結構更加分明
<tbody> 表格主體部分，使結構更加分明
rowspan 單元格豎跨多少行，做用在th或者td上
colspan 單元格橫跨多少列（即合併單元格），做用在th或者td上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<table>
    <!-- 表格的標題 -->
    <caption>表格的標題</caption>
    <!-- 表格的頭部 -->
    <thead>
            <!-- 行數據 -->
            <tr>
                <!-- 列數據 -->
                <th>序號</th>

                <th>姓名</th>

                <th>年齡</th>

                <th>愛好</th>

            </tr>

        </thead>
        <!--  表格主體部分 -->
        <tbody>

            <tr>

                <th>1.</th>
                <!-- 表格主體部分，顯示內容 -->
                <td>nick</td>

                <td>18</td>

                <td>登山</td>

            </tr>

            <tr>

                <th>2.</th>

                <td>jenny</td>

                <td>21</td>

                <td>吃</td>

            </tr>

        </tbody>

</table>

</body>
</html>

八、<form>表單標籤
表單屬性
HTML 表單用於接收不一樣類型的用戶輸入，用戶提交表單時向服務器傳輸數據，從而實現用戶與Web服務器的交互。表單標籤, 要提交的全部內容都應該在該標籤中。
屬性：action、method、enctype
　　　　action 表單要提交的地址，用於處理表單的內容（通常是提交字典到後臺的一個接口，這個接口是java寫成的，提交到這個接口後後臺就知道如何處理這些數據了）。
　　　　method 提交的方法，默認是get方式提交。
get: 1.提交的鍵值對.放在地址欄中url後面. 2.安全性相對較差. 3.對提交內容的長度有限制.
post:1.提交的鍵值對不在地址欄. 2.安全性相對較高. 3.對提交內容的長度理論上無限制.
　　　　enctype 對錶單數據進行編碼，默認都是要編碼的。格式爲：application/x-www-form-urlencoded（表單默認的編碼格式，表單發送前對全部字符進行編碼。編碼規則：空格轉換爲「+」號，特殊符號轉換爲ASC HEX值）。提交普通的文本內容到服務器就能夠採用這種默認的編碼方式。當你須要提交的是一個文件時，編碼就須要採用另外一種格式：multipart/form-data（不對字符編碼，文件上傳時使用）。text/plain（是一種純文本編碼，空格轉換爲「+」號，可是不對特殊字符進行編碼）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <form action="https://www.baidu.com/s">
            <input type="text" name="wd">
            <input type="submit" value="百度一下">
        </form>
</body>
</html>

表單元素

<input> type 屬性：

text 文本框輸入（默認text文本框類型）。

autocomplete（自動完成輸入的內容，要求表單元素要有name屬性纔有自動完成的效果，off表示自動完成不可用，on表示自動完成可用）

disabled（設置或者獲取控件的狀態，默認是false便可用，等於true時不可用，不能輸入內容）

password 密碼框。（如下屬性text和password共有）

size（指定表單元素的初始寬度。當type爲text或password時，表單元素的大小以字符爲單位，對於其餘元素，寬度以像素爲單位）

maxlength（type爲text或password時，表示輸入的最大字符數），有利於防止sql的注入攻擊

readonly 只讀.　

　　placeholder 框內預置內容(灰色)，寫上內容時才消失

radio 單選按鈕。屬性：

name（將name的值設置爲相同值，才表示一組數據，才能實現單選功能）

value（必需要寫，提交到服務器的key值，實際開發過程當中value通常是編號）

checked（是否被選中的狀態）

checkbox 複選框。

name（名字必定要同樣同樣的，才表示是一組數據，添加到同一value值列表提交到服務器）

value（必需要寫，提交到服務器的key值，實際開發過程當中value通常是編號）

checked（是否被選中的狀態）

file 文件域，上傳文件（不一樣的瀏覽器表現形式不一樣）

submit 提交按鈕。用於提交表單。

reset 重置按鈕。清空表單的輸入，恢復到表單默認的狀態。

button 普通按鈕。通常結合javascript使用。

image 圖片按鈕，用來提交表單，與submit是同樣的效果。

src（圖片路徑）

　　　idden 隱藏字段。

value（隱藏的內容）

　　　　color 顏色標籤。value指定顏色值（採用#十六進制數表示）。

　　　　date 日期。value值指定默認的日期，格式爲****-**-**（年月日）。

　　　　datetime-local 顯示本地時間，value值指定默認的時間，格式爲2016-05-20T11:10:10（年月日T時分秒）。

　　　　number 數字向上或者向下滑動。能夠填數字而後向上或者向下選擇不一樣的值。

　　　　range 滑動標籤。min（指定最小值）、max（指定最大值）、value（指定當前默認值）。

　　　　week 每一年的週數。value指定哪一年第幾周，格式爲2016-W25（2016年第25周）。

<textarea> 文本域標籤。默認表現形式是能夠輸入不少行文本的文本框。

name （表單提交項的key）

　　　cols（設置文本域寬度）

rows（設置文本域高度，即行數）

<select> 下拉框標籤。使用時要結合<option>子標籤一塊兒使用。

name:表單提交項的key

size：選項個數

multiple：多選

<option> 下拉選中的每一項
• value（表單提交項的值）
• selected（selected下拉選默認被選中）

<optgroup>爲每一項加上分組

<label> 把元素與文本結合起來

友好設計：不僅是選中複選框才能選中並打鉤，要求點擊對應的文字也能選中該複選框。
這種狀況下要用到<label>標籤的for屬性（設置或獲取給定標籤對象指定到的對象，值=另外一個元素的id號便可）

<fieldset> 對錶單中的相關元素進行分組

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<fieldset>

    <legend>舒適提示</legend>

    <div align="middle">您的票子很少啦 ==</div>

</fieldset>

</body>
</html>

value: 表單提交項的值

對於不一樣的輸入類型，value 屬性的用法也不一樣：

type="button", "reset", "submit" - 定義按鈕上的顯示的文本
type="text", "password", "hidden" - 定義輸入字段的初始值
type="checkbox", "radio", "image" - 定義與輸入相關聯的值

實例一：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <!--頁面標題-->
        <title>仍是牛</title>
        <!--頁面標題前顯示的小圖標-->
        <link rel="shortcut icon" href="1.jpg" />
    </head>
    <body>
        <!--佔整行全部位置-->
        <div style="background-color: red;">我自生來就牛逼</div>
        <!--只佔內容相對應位置-->
        <span style="background: green;">1234</span>
        <!--特殊符號-->
        &lt;&nbsp;&gt;
        <!--換行符號-->
        <p>段落符號<br />段落符號</p>
        <p>默認段落之間是有間隔的</p>
        <p>段落段落段落段落段落段落段落</p>
        <!--當前頁面直接跳轉-->
        <a href="https://www.baidu.com">點我呀，點我就跳轉</a>
        <!--打開一個新頁面進行跳轉-->
        <a href="https://www.baidu.com" target="_blank">點我就會出現新頁面哦</a>
        <!--尋找對應id號的標籤置頂顯示-->
        <a href="#i1">第一章</a>
        <a href="#i2">第二章</a>
        <!--爲標籤設置一個id號，任何標籤均可以設置，可是不能夠id號重複-->
        <div id="i1" style="height: 500px;">第一章內容</div>
        <div id="i2" style="height: 500px;">第二章內容</div>
        <!--默認狀況下h1-h6不一樣字體大小顯示-->
        <h1>aaa</h1>
        <h2>aaa</h2>
        <h3>aaa</h3>
        <h4>aaa</h4>
        <h5>aaa</h5>
        <h6>aaa</h6>
    </body>
</html>

實例二：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>仍是牛</title>
        <link rel="shortcut icon" href="1.jpg" />
    </head>
    <body>
        <form>
            <!--外邊框顏色-->
            <div style="border: 1px solid red">
                <!--明文輸入框-->
                <p>用戶名：<input type="text" /></p>
                <!--密文輸入框-->
                <p>密碼：<input type="password" /></p>
                <!--郵箱格式輸入框，不是xxx@xxx會報錯，此報錯是瀏覽器提供的，不一樣瀏覽器報錯不一樣-->
                <p>郵箱：<input type="email" /></p>
                <!--定義相同的name標識爲互斥-->
                <p>性別（單選框）
                    <br />男<input type="radio" name="sex" />
                    <br />女<input type="radio" name="sex" />
                </p>
                <!--多選框，能夠屢次選擇-->
                <p>愛好（多選框）
                    <br />打籃球<input type="checkbox" />
                    <br />打人<input type="checkbox" />
                    <br />打你<input type="checkbox" />
                    <br />吃<input type="checkbox" />
                    <br />喝<input type="checkbox" />
                </p>
                <p>城市
                    <!--下拉式單選框-->
                    <select>
                        <option>北京</option>
                        <option>上海</option>
                        <option>廣州</option>
                        <option>成都</option>
                    </select>
                    <!--展開下拉式單選框，可定義默認顯示幾條選項-->
                    <select multiple size="10">
                        <option>北京</option>
                        <option>上海</option>
                        <option>廣州</option>
                        <option>北京</option>
                        <option>上海</option>
                        <option>廣州</option>
                        <option>北京</option>
                        <option>上海</option>
                        <option>廣州</option>
                        <option>北京</option>
                        <option>上海</option>
                        <option>廣州</option>
                        <option>北京</option>
                        <option>上海</option>
                        <option>廣州</option>
                    </select>
                    <!--分類下拉式單選框-->
                    <select>
                        <optgroup label="a">
                            <option>北京</option>
                            <option>上海</option>
                        </optgroup>
                        <optgroup label="b">
                            <option>廣州</option>
                         </optgroup>
                    </select>
                </p>
                <!--上傳文件-->
                <p>文件：<input type="file" /></p>
                <!--備註框-->
                <p>備註：<textarea>我是備註</textarea></p>
                <!--提交from內內容，數據是能夠提交到後天的-->
                <input type="submit" value="submit" />
                <!--沒卵用，只是觸發一個事件-->
                <input type="button" value="button" />
                <!--重置from內容-->
                <input type="reset" value="reset" />
            </div>
        </form>
    </body>
</html>

實例三:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>仍是牛</title>
    </head>
    <body>
        <!--表格展現，合併單元格時須要注意到底佔用了其餘哪些單元格，而後註釋掉便可-->
        <table border="1">
            <thead>
            <!-- tr爲行 td 爲列-->
                <tr>
                    <!--th會對字體加粗，體現出是表格頭部-->
                    <!--標題一 兩列合併-->
                    <th colspan="2">標題一</th>
                    <th>標題二</th>
                    <!--<th>標題三</th>-->
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td rowspan="2" >標題一</td>
                    <td>標題二</td>
                    <td>標題三</td>
                </tr>
                <tr>
                    <!--<td>標題一</td>-->
                    <td>標題二</td>
                    <td>標題三</td>
                </tr>
                <tr>
                    <td>標題一</td>
                    <td>標題二</td>
                    <td>標題三</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

實例四;

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <!--加一個外邊框，內部可隨意添加內容-->
        <fieldset>
            <legend>仍是牛</legend>
            <!--在框內引用對應頁面-->
            <iframe style="width: 100%;height: 1000px" src="https://www.hao123.com"></iframe>
        </fieldset>
    </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。