038--HTML

時間 2019-11-13

標籤 html 欄目 HTML 简体版

原文原文鏈接

1、HTML的定義

　　1. 超文本標記語言（Hypertext Markup Language，HTML）經過標籤語言來標記要顯示的網頁中的各個部分。一套規則，瀏覽器認識的規則javascript

　　2. 瀏覽器按順序渲染網頁文件，而後根據標記符解釋和顯示內容。但須要注意的是，對於不一樣的瀏覽器，對同一標籤可能會有不徹底相同的解釋（兼容性）css

　　3. 靜態網頁文件擴展名：.html 或 .htmhtml

什麼是標籤:java

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

標籤的屬性:web

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

塊級標籤和內聯標籤編程

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

　　內聯標籤：<a>　　<input>　　<img>　　<span>　　<lable>　　<select>服務器

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

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

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

2、經常使用標籤　

　　meta介紹
　　<meta>元素可提供有關頁面的元信息（meta-information），針對搜索引擎和更新頻度的描述和關鍵詞。
　　<meta>標籤位於文檔的頭部，不包含任何內容。
　　<meta>提供的信息是用戶不可見的

　　meta標籤的組成：meta標籤共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不一樣的屬性又有不一樣的參數值，這些不一樣的參數值就實現了不一樣的網頁功能。

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

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

<head>
    <meta http-equiv="content-type" 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>

基本標籤

'''
<hn>: n的取值範圍是1~6; 從大到小. 用來表示標題.

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

<b> <strong>: 加粗標籤.

<strike>: 爲文字加上一條中線.

<em>: 文字變成斜體.

<sup>和<sub>: 上角標 和 下角表.

<br>:換行.

<hr>:水平線

特殊字符：
      &lt;    &gt;    &quot;    &copy;    &reg;

'''

div和span標籤

　　<div></div> ： <div>只是一個塊級元素，並沒有實際的意義。主要經過CSS樣式爲其賦予不一樣的表現.
　　<span></span>： <span>表示了內聯行(行內元素),並沒有實際的意義,主要經過CSS樣式爲其賦予不一樣的表現.

　　塊級元素與行內元素的區別
　　所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行。若是單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。
　　這兩個元素是專門爲定義CSS樣式而生的。

圖形標籤 <img>

'''
src: 要顯示圖片的路徑.

alt: 圖片沒有加載成功時的提示.

title: 鼠標懸浮時的提示信息.

width: 圖片的寬

height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)

'''

超連接標籤（錨標籤）<a></a>

　　什麼是超級連接？所謂的超連接是指從一個網頁指向一個目標的鏈接關係，這個目標能夠是另外一個網頁，也能夠是相同網頁上的不一樣位置，還能夠是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序

什麼是URL？
URL是統一資源定位器(Uniform Resource Locator)的縮寫，也被稱爲網頁地址，是因特網上標準的資源的地址。
URL舉例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html

URL地址由4部分組成
第1部分：爲協議：http://、ftp://等 
第2部分：爲站點地址：能夠是域名或IP地址
第3部分：爲頁面在站點中的目錄：stu
第4部分：爲頁面名稱，例如 index.html
各部分之間用「/」符號隔開。

URL

'''

<a href="" target="_blank" >click</a>

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

    絕對 URL - 指向另外一個站點（好比 href="http://www.jd.com）
    相對 URL - 指當前站點中確切的路徑（href="index.htm"）
    錨 URL - 指向頁面中的錨（href="#top"）

'''

列表標籤

'''
<ul>: 無序列表 [type屬性：disc(實心圓點)(默認)、circle(空心圓圈)、square(實心方塊)]

<ol>: 有序列表
         <li>:列表中的每一項.

<dl>  定義列表

         <dt> 列表標題
         <dd> 列表項

'''

表格標籤: <table>

<table>
         <tr>
                <td>標題</td>
                <td>標題</td>
         </tr>
         
         <tr>
                <td>內容</td>
                <td>內容</td>
         </tr>
</table>

'''

<tr>: table row

<th>: table head cell

<td>: table data cell


屬性:

    border: 表格邊框.

    cellpadding: 內邊距

    cellspacing: 外邊距.

    width: 像素 百分比.（最好經過css來設置長寬）

    rowspan:  單元格豎跨多少行

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

'''

表單標籤: <form>

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

表單可以包含input系列標籤，好比文本字段、複選框、單選框、提交按鈕等等。

表單還能夠包含textarea、select、fieldset和 label標籤。

表單屬性

action: 表單提交到哪.通常指向服務器端一個程序,程序接收到表單提交過來的數據（即表單元素值）做相應處理，好比https://www.sogou.com/web

method: 表單的提交方式 post/get默認取值就是get

表單元素

　　基本概念：
　　HTML表單是HTML元素中較爲複雜的部分，表單每每和腳本、動態頁面、數據處理等功能相結合，所以它是製做動態網站很重要的內容。
　　表單通常用來收集用戶的輸入信息
　　表單工做原理：
　　訪問者在瀏覽有表單的網頁時，可填寫必需的信息，而後按某個按鈕提交。這些信息經過Internet傳送到服務器上。
　　服務器上專門的程序對這些數據進行處理，若是有錯誤會返回錯誤信息，並要求糾正錯誤。當數據完整無誤後，服務器反饋一個輸入完成的信息

'''
<1> 表單類型

type:        text 文本輸入框

             password 密碼輸入框

             radio 單選框

             checkbox 多選框  

             submit 提交按鈕            

             button 按鈕(須要配合js使用.) button和submit的區別？

             file 提交文件：form表單須要加上屬性enctype="multipart/form-data" 
            
            上傳文件注意兩點：

                     1 請求方式必須是post
                     2 enctype="multipart/form-data"

 <2> 表單屬性

 name:    表單提交項的鍵.

           注意和id屬性的區別：name屬性是和服務器通訊時使用的名稱；
           而id屬性是瀏覽器端使用的名稱，該屬性主要是爲了方便客戶端編程，而在css和javascript中使用的

value:    表單提交項的值.對於不一樣的輸入類型，value 屬性的用法也不一樣：

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


checked:  radio 和 checkbox 默認被選中

readonly: 只讀. text 和 password

disabled: 對所用input都好使.

'''

<body>
    <h1>用戶註冊</h1>
    <form action="" method="post">
        <p>姓名:<input type="text" name="username"></p>
        <p>密碼:<input type="password" name="pwd"></p>
        <p>愛好:籃球<input type="checkbox" name="hobby" value="basketball">
                足球<input type="checkbox" name="pwd" value="football">
                乒乓球<input type="checkbox" name="pwd" value="pingpangball"></p>
        <p>性別:男<input type="radio" name="sex" value="male"> 女<input type="radio" name="sex" value="female"> 其它<input type="radio" name="sex" value="qita"></p>

        <p><input type="button" value="buttom"></p>
        <p><input type="file" value="文件"></p>
        <p><input type="hidden" value="文件"></p>

        <select name="province" size="2" multiple>
            <optgroup label="中國">
                <option value="hebei">河北省</option>
                <option value="hainan">海南省</option>
                <option value="fujian" selected>福建省</option>
                <option value="jiangsu">江蘇省</option>
            </optgroup>
        </select>
        
        <p>簡介</p>
        <p>
            <textarea name="jianjie" rows="8" cols="30"></textarea>
        </p>
        <p><input type="submit" value="submit"></p>
        <label for="username">用戶名</label>
        <input type="text" name="username" id="username">
        <fieldset>
            <legend>登陸</legend>
            <input type="text">
        </fieldset>

    </form>

</body>

View Code

select標籤

'''
 <select> 下拉選標籤屬性


          name:表單提交項的鍵.

          size：選項個數

          multiple：multiple 
                 <optgroup>爲每一項加上分組

                 <option> 下拉選中的每一項 屬性：

                       value:表單提交項的值.   
                       selected: selected下拉選默認被選中

'''

<textarea> 多行文本框

'''

<form id="form1" name="form1" method="post" action="">
        <textarea cols=「寬度」 rows=「高度」 name=「名稱」>
                   默認內容
        </textarea>
</form>

'''

<label>標籤

　　定義：

　　<label> 標籤爲 input 元素定義標註（標記）。
　　說明：
　　1 label 元素不會向用戶呈現任何特殊效果。
　　2 <label> 標籤的 for 屬性值應當與相關元素的 id 屬性值相同。

'''

<form method="post" action="">

        <label for=「username」>用戶名</label>
        <input type=「text」 name=「username」 id=「username」 size=「20」 />
</form>

'''

<fieldset>標籤

'''

<fieldset>
    <legend>登陸吧</legend>
    <input type="text">
</fieldset>

'''

更多相關文章...

相關標籤/搜索

HTML

每日一句

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