HTML基礎整理

時間 2020-04-20

標籤 html 基礎整理欄目 HTML 简体版

原文原文鏈接

html的基本結構

<!DOCTYPE html>    
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>html的基本結構</title>
    <head>
    <body>
            1.DOCTYPE:聲明文檔類型。此處爲文檔類型爲html5;
            2.html標籤聲明此文件爲html文件，[lang]表明語言，主要語言爲英語；
            3.head標籤內存放頁面信息，body標籤內書寫頁面結構；
            4.meta標籤提供元信息，[charset]定義字符編碼；
            5.title標籤內書寫頁面標題；
            
    </body>
</html>

[注]：保存文件時記得文件字符編碼和頁面字符編碼一致，避免出現亂碼。（文件—另存爲—編碼—保存）javascript

html的基本語法

註釋

格式：<!--註釋的內容-->
註釋方便程序員理解代碼，註釋的內容不會呈如今頁面上。

元素

html元素：由雙標籤或者單標籤組成。
<div></div>,<input/>

屬性

html屬性：寫在標籤名後面，用空格隔開，多個屬性之間用空格隔開，同一個屬性多個屬性值，屬性值之間也用空格隔開。
格式：html屬性="屬性值"
<div id="myBox" class="box active myDiv"></div>

html經常使用標籤

div(division) 塊級標籤

<div>標籤能夠把html文檔分割爲獨立區塊
<body>
    <div id="docHead">文檔頂部信息及導航區塊</div>
    <div id="docMain">文檔主體區塊</div>
    <div id="docFoot">文檔底部信息區塊</div>
</body>

span

<span>標籤被用來組合文檔中的行內元素。
<span>沒有固定的格式表現</span><span>當對它應用樣式時，它纔會產生視覺上的變化</span>

[注]塊級元素會獨佔一整行，而行內元素一行能夠顯示多個。html

標題標籤 h1-h6

視覺上文字字體從大到小，語義上從重到輕。一個頁面只有一個h1標籤。
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>

段落標籤 p

<p>這是一個段落</p>

換行標籤 br

<div>
    珠三角地區包括了廣州、深圳、東莞、珠海、中山<br/>以上都是我瞎寫的
</div>

加粗標籤 b、strong

<b>大寫加粗的牛掰</b>
<strong>大寫加粗的帥氣</strong>

傾斜標籤 i、em

<i>讓這世界爲我傾斜</i>
<em>而我爲你傾斜</em>

視覺標籤 b、i; 語義標籤(起強調做用) strong、em

實體標籤(標識符)   < > ……

書寫代碼時，多個空格及換行會被渲染成一個空格，因此要用標識符&nbsp;來輸出空格。空格大小不等於字體大小，但受字體大小的影響。
同理像<,>這些在html語言中有特殊含義的字符，想要在頁面中正常輸出也要使用標識符輸出。

列表標籤

1.無序列表(unordered list)

列表項(list item)

標籤：ul>li
<ul>
    <li>吃飯</li>
    <li>睡覺</li>
    <li>打機</li>
</ul>

2.有序列表(ordered list)

標籤：ol>li
<ol>
    <li>秩序廢鐵</li>
    <li>最強生鐵</li>
    <li>榮耀鋼鐵</li>
</ol>

3.自定義列表(definition list)

自定義列表項(definition term), 對自定義列表項的描述(definition description)

標籤：dl>dt+dd
<dl>
    <dt>端遊</dt>
    <dd>DOTA</dd>
    <dd>LOL</dd>
    <dd>DNF</dd>
    <dt>手遊</dt>
    <dd>王者榮耀</dd>
    <dd>吃雞</dd>
    <dd>陰陽師</dd>
</dl>

圖片標籤 img

代碼：<img src="../iamges/luozhao.jpg" alt="自拍" title="你的寫真"/>

[src]所引入圖片的路徑,../表明返回上一層目錄;
[alt]圖片沒法正常顯示時出現的文字
[titlt]鼠標懸停在圖片上出現的文字

超連接(錨連接)

<a href="#"><a/>
<a href="biaobai.html" "target"="_blank"></a>
<a href="http://xiaohuangpian.com">
    <img src="../img/chaming.png"/>
</a>

[href]錨連接跳轉的路徑;路徑通常爲網址，html文件(其餘頁面)或者#號，#表明不跳轉且回到當前頁的頂部
[target]跳轉方式，_self:在當前窗口跳轉(默認) _blank:打開一個新窗口並跳轉到路徑地址

特殊用法：href="javascript:void(0);" || href="javascript:;"
此用法表示保留a標籤的特性,但阻止跳轉。

表格標籤 table (行 tr ,單元格 td)

代碼:table>tr>td
<table border="2" cellspacing="0" cellpadding="30" width="200" height="3000">
    <tr align="center">
        <td>遊戲ID</td>
        <td>段位</td>
    </tr>
    <tr>
        <td>haha</td>
        <td>倔強廢鐵</td>
    </tr>
    <tr>
        <td>xixi</td>
        <td>固執鋼鐵</td>
    </tr>
</table>


<table border="1" cellspacing="0" width="400" height="300">
    <tr>
        <td>部門</td>
        <td>姓名</td>
        <td colspan="2">電話號碼</td>
    </tr>
    <tr>
        <td>BUG修復部</td>
        <td>技術宅</td>
        <td>123456789</td>
        <td rowspan="2">020-1234567</td>
    </tr>
    <tr>
        <td>BUG測試部</td>
        <td>測試神</td>
        <td>987654321</td>
    </tr>
</table>

table的屬性
    [border]表格邊框
    [cellspacing]單元格之間的間距
    [cellpadding]單元格的邊框與內容之間的間距
    [width]表格寬度
    [height]表格高度

tr的屬性
    [align]內容水平對齊方式。值爲:left、center、right;
    [valign]內容垂直對齊方式。值爲:top、middle、bottom等
    
td的屬性
    [colspan]單元佔據的列數
    [rowspan]單元格佔據的行數
    以上兩個屬性用於合併單元格(合併行:往下合併;合併列:往右合併)

表單標籤 form

<form action="#" method="get" name="video">
    <label>用戶名：</label><input type="text" name="username" value="用戶名"/><br/>
    <label>密碼：</label><input type="password" name="pwd" /><br/>
    <label>性別：</label><input type="radio" name="gender"/>male 
    <input type="radio" name="gender" checked/>female<br/>
    <label>愛好：</label><input type="checkbox" name="hobby" checked/>吃飯 <input type="checkbox" name="hobby"/>睡覺 <input type="checkbox" name="hobby"/>打機 <br/>
    <label>idol<label/>
    <select>
        <option></option>
        <option value="彭于晏" selected>彭于晏</option>
        <option value="吳彥祖">吳彥祖</option>
        <option value="蔡徐坤">蔡徐坤</option>
    </select/>
    <textarea name="biaobaiqiang" cols="30" rows="10"></textarea>
    <input type="submit" value="登陸"/>
    <input type="reset" value="重置"/>
</form>

1.form屬性：
    [action]表單信息提交的後臺地址
    [method]提交方式,有兩種方式：get、post
    
2.表單控件:input ,[type]表單控件的類型
    [name]給同一組的表單控件加上相同的名字(寫了名字就能提交)
    [value] 給表單控件添加內容
    [checked] 默認選中
    
3.type的屬性值：
    text 文本框 
    password 密碼框
    radio 單選框 
    checkbox 多選框 
    submit 提交按鈕 
    button 普通按鈕 
    reset 重置按鈕
    
4.下拉列表:select,選項:option[value][selected默認選中]

5.文本域 textarea[cols列數][rows行數]

textarea限制字數的兼容方法html5

在input標籤中限制字數只須要設置maxlength="number"便可，可是在textarea標籤中，IE9及IE9如下瀏覽器是不支持的

eg:限制字數長度爲231。
<textarea rows="5"  maxlength="231" onchange="this.value=this.value.substring(0, 231)" onkeydown="this.value=this.value.substring(0, 231)" onkeyup="this.value=this.value.substring(0, 231)" ></textarea>

[注] onchange、onkeydown、onkeyu三者缺一不可.java

如省略onchange，當你用複製功能，此時一直按着ctrl不鬆開，鼠標去點擊其餘地方（焦點移出textarea）時，不會自動取消超出部分；
如省略onkeydown，快速錄入的時候會有不少個字符忽然不見；
如省略onkeyup，原想預計200的狀況下，會變成201，而且最後一個字符是最後敲進去的。程序員

Maxlength 也不可省略，加上maxlength 當碰到IE10及以上版本時，能夠完美的實現限制輸入框字數的功能。不像其餘低版本的IE瀏覽器還可能出現一個字母后消失。瀏覽器