HTML驚天地

時間 2019-12-11

標籤 html 驚天欄目 HTML 简体版

原文原文鏈接

1、HTML文檔結構

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

</body>
</html>

<!DOCTYPE html>聲明爲HTML5文檔。

<html> </html>是文檔的開始標記和結束的標記。是HTML頁面的根元素，在它們之間是文檔的頭部（head）和主體（body）。

<head> </head>定義了HTML文檔的開頭部分。它們之間的內容不會在瀏覽器的文檔窗口顯示。包含了文檔的元（meta）數據。

<title> </title>定義了網頁標題，在瀏覽器標題欄顯示。

<body> </body>之間的文本是可見的網頁主體內容。

2、頭標籤（head）

head標籤都放在頭部分之間。這裏麪包含了：<title>、<meta>、<link>，<style>css

標籤	意義
<title></title>	定義網頁標題
<style></style>	定義內部樣式表
<script></script>	定義JS代碼或引入外部JS文件
<link/>	引入外部樣式表文件
<meta/>	定義網頁原信息

Meta標籤

http-equiv屬性：至關於http的文件頭做用，它能夠向瀏覽器傳回一些有用的信息，以幫助正確地顯示網頁內容，與之對應的屬性值爲content，content中的內容其實就是各個參數的變量值。

<!--重定向 2秒後跳轉到對應的網址，注意分號-->
<meta http-equiv="refresh" content="2;URL=oeasys.cn">
<!--指定文檔的內容類型和編碼類型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告訴IE瀏覽器以最高級模式渲染當前網頁-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

name屬性：主要用於描述網頁，與之對應的屬性值爲content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。

用於頁面的關鍵字和描述，關鍵字能夠有多個用 ‘,’號隔開html

<meta name="keywords" content="開發者,博客園,開發者,程序猿,程序媛,極客,編程,代碼,開源,IT網站,Developer,Programmer,Coder,Geek,技術社區">

告訴搜索引擎，這個網頁是幹嗎的，可以提升搜索命中率。前端

<meta name="description" content="博客園是一個面向開發者的知識分享社區。自建立以來，博客園一直致力並專一於爲開發者打造一個純淨的技術交流社區，推進並幫助開發者經過互聯網分享知識，從而讓更多開發者從中受益。博客園的使命是幫助開發者用代碼改變世界。">

link定義文檔與外部資源

網站圖標java

<link rel="shortcut icon" href="//common.cnblogs.com/favicon.ico" type="image/x-icon">

連接導入css，css就是修飾標籤的編程

<link rel="stylesheet" type="text/css" href=""/>

3、body中的標籤　　

 1 <b>加粗</b>
 2 <i>斜體</i>
 3 <u>下劃線</u>
 4 <s>刪除</s>
 5 
 6 <h1>標題1</h1>
 7 <h2>標題2</h2>
 8 <h3>標題3</h3>
 9 <h4>標題4</h4>
10 <h5>標題5</h5>
11 <h6>標題6</h6>
12 
13 <!--換行-->
14 <br>
15 
16 <!--水平線--><hr>
17 
18 分割線<hr>
19 上標<sup>8</sup>
20 下標<sub>6</sub>
21 
22 <div>塊級標籤</div>
23 <span>內聯標籤</span>
24         
25 <!-- 顯示文本段落的，不能包含容器標籤 -->
26 <p>這是一個段落</p>
27 <p align="left">左對齊段落</p>
28 <p align="center">中對齊段落</p>
29 <p align="right">右對齊段落</p>

基本標籤（塊級標籤和內聯標籤）

特殊字符

內容	對應代碼
空格
>	>
<	<
&	&
¥	¥
版權	©
註冊	®

行內標籤與塊級標籤

   一、行內標籤：
      （1）在一行內顯示
      （2）不能設置寬高
      行內塊標籤img input
         （有行內的特色）（能夠設置寬高）
   二、塊級標籤：
      （1）獨佔一行
      （2）能夠設置寬高
         若是不設置寬高，默認的寬是父親的100%，高度是內容的高度
   三、行內標籤與塊級標籤的轉換
      display
塊級元素與行內元素的區別：
所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行。
這兩個元素是專門爲定義CSS樣式而生的。瀏覽器

注意：服務器

關於標籤嵌套：一般塊級元素能夠包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。ide

img標籤

<img src="圖片的路徑" alt="圖片未加載成功時的提示" title="鼠標懸浮時提示信息" width="寬" height="高(寬高兩個屬性只用一個會自動等比縮放)">

a標籤

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

href屬性指定目標網頁地址。該地址能夠有幾種類型：網站

絕對URL - 指向另外一個站點（好比 href="http://www.jd.com）

相對URL - 指當前站點中確切的路徑（href="index.htm"）

錨URL - 指向頁面中的錨（href="#top"）

target：ui

_blank表示在新標籤頁中打開目標網頁

_self表示在當前標籤頁中打開目標網頁

列表標籤

一、無序列表<ul>，無序列表中的每一項是<li>

<ul>
         <li>張三</li>    
         <li>李四</li>    
         <li>王五</li>    
</ul>

type="屬性值"。屬性值能夠選： disc(實心原點，默認)，square(實心方點)，circle(空心圓)，none（無樣式）

二、有序列表<OL>，裏面的每一項是<li>

<ol>   
        <li>張三</li>
        <li>李四</li>
        <li>王五</li>
</ol>

　　type="屬性值"。屬性值能夠是：1(阿拉伯數字，默認)、a、A、i、I。結合start屬性表示從幾開始。

三、標題列表<dl>

dt、dd只能在dl裏面；dl裏面只能有dt、dd。

<dl>
        <dt>一</dt>
        <dd>1</dd>
        <dd>2</dd>
        <dd>3</dd>

        <dt>二</dt>
        <dd>1</dd>
        <dd>2</dd>
        <dd>3</dd>
</dl>

dd是描述dt的

表格標籤

<table>
  <thead>
  <tr>
    <th>序號</th>
    <th>姓名</th>
    <th>愛好</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>oeasys</td>
    <td>自學</td>
  </tr>
  <tr>
    <td>2</td>
    <td>DUAN</td>
    <td>閱讀</td>
  </tr>
  </tbody>
</table>

View Code

<table border="" style="border-collapse:collapse;" >
    <!-- <tr>：行 -->
    <!-- <th>：加粗的單元格。至關於<td> + <b> -->
    <tr><th>Header</th></tr>
    <!-- <td>：單元格 -->
    <tr><td>Data</td></tr>
    <!-- 若是要將兩個單元格合併，那確定就要刪掉一個單元格。
    單元格的屬性：
        colspan：橫向合併。例如colspan="2"表示當前單元格在水平方向上要佔據兩個單元格的位置。
        rowspan：縱向合併。例如rowspan="2"表示當前單元格在垂直方向上
        <caption>：表格的標題。使用時和tr標籤並列-->
</table>

View Code

<table>的屬性：

border：邊框。像素爲單位。

cellpadding: 內邊距

cellspacing: 外邊距

width：寬度。像素爲單位。

height：高度。像素爲單位。

style="border-collapse:collapse;"：單元格的線和表格的邊框線合併

rowspan: 單元格豎跨多少行（縱向合併單元格）　

colspan: 單元格橫跨多少列（即合併單元格）

bordercolor：表格的邊框顏色。

align：表格的水平對齊方式。屬性值能夠填：left right center。
注意：這裏不是設置表格裏內容的對齊方式，若是想設置內容的對齊方式，要對單元格標籤<td>進行設置）

bgcolor="#99cc66"：表格的背景顏色。

background="路徑src/..."：背景圖片。
背景圖片的優先級大於背景顏色。

<caption>：表格的標題。使用時和tr標籤並列

<tr>：行，一個表格就是一行一行組成的。

屬性：

dir：公有屬性，設置這一行單元格內容的排列方式。能夠取值：ltr：從左到右（left to right，默認），rtl：從右到左（right to left）

bgcolor：設置這一行的單元格的背景色。
注：沒有background屬性，即：沒法設置這一行的背景圖片，若是非要設置，能夠用css實現。

height：一行的高度

align="center"：一行的內容水平居中顯示，取值：left、center、right

valign="center"：一行的內容垂直居中，取值：top、middle、bottom

<td>：單元格

屬性：

align：內容的橫向對齊方式。屬性值能夠填：left right center。
若是想讓每一個單元格的內容都居中，這個屬性太麻煩了，之後用css來解決。

valign：內容的縱向對齊方式。屬性值能夠填：top middle bottom

width：絕對值或者相對值(%)

height：單元格的高度

bgcolor：設置這個單元格的背景色。

background：設置這個單元格的背景圖片。

單元格的合併

若是要將兩個單元格合併，那確定就要刪掉一個單元格。

表單標籤

表單用於向服務器傳輸數據，從而實現用戶與Web服務器的交互

表單屬性

屬性	描述
accept-charset	規定在被提交表單中使用的字符集（默認：頁面字符集）。
action	規定向何處提交表單的地址（URL）（提交頁面）。
autocomplete	規定瀏覽器應該自動完成表單（默認：開啓）。
enctype	規定被提交數據的編碼（默認：url-encoded）。
method	規定在提交表單時所用的 HTTP 方法（默認：GET）。
name	規定識別表單的名稱（對於 DOM 使用：document.forms.name）。
novalidate	規定瀏覽器不驗證表單。
target	規定 action 屬性中地址的目標（默認：_self）。

input

type屬性值	表現形式	對應代碼
text	單行輸入文本	<input type=text" />
password	密碼輸入框	<input type="password" />
date	日期輸入框	<input type="date" />
checkbox	複選框	<input type="checkbox" checked="checked" />
radio	單選框	<input type="radio" />
submit	提交按鈕	<input type="submit" value="提交" />
reset	重置按鈕	<input type="reset" value="重置" />
button	普通按鈕	<input type="button" value="普通按鈕" />
hidden	隱藏輸入框	<input type="hidden" />
file	文本選擇框	<input type="file" />
image	圖片

屬性說明:

name：表單提交時的「鍵」，注意和id的區別

value：表單提交時對應項的值

type="button", "reset", "submit"時，爲按鈕上顯示的文本年內容

type="text","password","hidden"時，爲輸入框的初始值

type="checkbox", "radio", "file"，爲輸入相關聯的值

checked：radio和checkbox默認被選中的項

readonly：text和password設置只讀

disabled：全部input均適用

<form action="" method="">
    用戶名：<input type="text" name="userName" src="" /><br>
    密碼：<input type="password" name="userPawd" /><br>
    郵箱：<input type="email"></inpuet><br>
    電話：<input type="telf"><br>
    網址：<input type="url" name="" id="" value="" /><br>
    <!-- number只能輸入數字包括小數點
            max最大值
            min最小值
            value默認值-->
    數量：<input type="number" max="90" min="20"><br>
    <!-- 能夠提供更人性化的輸入體驗，自帶刪除鍵X -->
    請輸入商品名稱：<input type="search"><br>
    範圍：<input type="range" max="89" min="28" value="50" /><br>
    顏色拾取：<input type="color" name="" id="" value="" /><br>
    時間：<input type="time" name="" id="" value="" /><br>
    日期：<input type="date"><br>
    <!-- datetime只有蘋果瀏覽器能夠使用 -->
    日期時間X：<input type="datetime" name="" id="" value="" /><br>
    日期時間：<input type="datetime-local" name="" id="" value="" /><br>
    月份：<input type="month" name="" id="" value="" /><br>
    星期：<input type="week" name="" id="" value="" /><br>
    <!-- 提交 -->
    <input type="submit" id=""  name="" />
</form>

View Code

`<select>`：下拉列表標籤

 1 <form>
 2         <select>
 3             <option>小學</option>
 4             <option>初中</option>
 5             <option>高中</option>
 6             <option>大學</option>
 7             <option selected="">研究生</option>
 8         </select>
 9         <br><br><br>
10 
11         <select size="3">
12             <option>小學</option>
13             <option>初中</option>
14             <option>高中</option>
15             <option>大學</option>
16             <option>研究生</option>
17         </select>
18         <br><br><br>
19 
20         <select multiple="">
21             <option>小學</option>
22             <option>初中</option>
23             <option selected="">高中</option>
24             <option selected="">大學</option>
25             <option>研究生</option>
26         </select>
27         <br><br><br>
28 
29     </form>

View Code

屬性說明：

multiple：布爾屬性，設置後爲多選，不然默認單選

disabled：禁用

selected：默認選中該項

value：定義提交時的選項值

label標籤

定義：<label> 標籤爲 input 元素定義標註（標記）。
說明：

label 元素不會向用戶呈現任何特殊效果。

<label> 標籤的 for 屬性值應當與相關元素的 id 屬性值相同。

<form action="">
  <label for="username">用戶名</label>
  <input type="text" id="username" name="username">
</form>

textarea多行文本

<textarea name="memo" id="memo" cols="30" rows="10">
  默認內容
</textarea>

屬性說明：

name：名稱

rows：行數

cols：列數

disabled：禁用

其餘

        <form id="myform" method="">
            <!-- placeholder提示文本，提示佔位
                 autofocus自動獲取焦點
                 autocomplete:自動完成：on打開  off關閉-->
            用戶名：<input type="text" name="userName" placeholder="請輸入用戶名" autofocus="" autocomplete="on" value="" /><br>
            <!-- required必須輸入，若是沒有輸入將會阻止當前的提交
                 pattern正則驗證
             -->
            手機號：<input type="tel" required="" id="" value="" pattern="^(\+86)?\d{10}$" /><br>
            <!-- multiple選擇多個文件 -->
            文件：<input type="file" name="photo" multiple="">
            <!-- 提交 -->
            <input type="submit" name="" id="" value="提交" />
        </form>



        <form action="">
            專業：
            <select>
                <option value ="">前端</option>
                <option value ="">java</option>
                <option value ="">JavaScript</option>
                <option value ="">cSharp</option>
            </select>
            <br>
            <br>
            <br>
            <br>
            
            專業：
            <input type="text" list="sub" name="" id="" value="" />
            <datalist id="sub">
                <!-- 建立選項值 -->
                <option value ="前端移動開發" label="前景很是好"></option>
            </datalist>
        </form>



        <form action="" method="">
            用戶名：<input type="text" name="userName" id="" value="" /><br>
            密碼：<input type="password" name="userPwd"><br>
            加密：<keygen>
            <input type="submit" name="" id="" value="提交" />
        </form>
        <!-- 只能顯示，不能修改 -->
        <output>只能顯示，不能修改</output>
        <form action="" method="">
            用戶名：<input type="text" name="userName" id="" value="" /><br>
            密碼：<input type="password" name="userPwd"><br>
            加密：<keygen>
            <input type="submit" name="" id="" value="提交" />
        </form>
        <!-- 只能顯示，不能修改 -->
        <output>只能顯示，不能修改</output>


        <!-- max最大值
         value：當前進度值-->
         <progress max="100" value=100""></porgress>
         
         <!-- 度量器：衡量當前的進度值
            high:規定的較高的值
            low：規定的較低的值
            max：最大值
            min：最小值
            value：當前度量值-->
         <meter max="100" min="0" high="80" low="40" value="30"></meter>