Web前端學習——HTML

Rangle發表於2017-12-04
Web前端HTML

HTML其實還是蠻容易學習的，無非就是一些標籤、格式的填寫，大學的時候也做過網站設計，所以這裡主要記錄一些常用的HTML標籤、屬性以及書寫方法等。
一、常見HTML格式
主要包含檔案type，html標籤、head標籤、body標籤三個主題標籤，其中Head主要包含字符集、描述、關鍵字等資訊，而Body標籤裡是HTML的主要內容 

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

</body>
</html>

 二、head標籤

1、自閉合標籤
（1）<meta>標籤
    <meta charset="UTF-8"> ##設定html內容字符集
    <meta http-equiv="refresh" content="3"> ##每隔3秒重新整理一次  
    <meta http-equiv="refresh" content="3;Url=http://www.hao123.com">  ##隔3秒重新整理並跳轉值url指定網頁
    <meta name="keywords" content="測試網頁,網頁頭部"> ##指定網頁關鍵字，利於SEO，網頁搜尋排序
    <meta name="description" content="描述資訊">  ##指定網頁描述資訊
（2）link
    <link rel="shortcut icon"  href="image/fac.ico">  ##頭部圖示
（3）stype
（4）script
2、主動閉合標籤
（1）title
    <title>網頁頭部標題內容</title>   ##網頁頭部顯示內容　　
三、body標籤
1、a標籤：
定義超連結，最重要的屬性為href,超連結和錨使用

##普通超連結
<a href="http://www.hao123.com" target="_blank">  中國人</a>

##通過a標籤做錨點
<a href="#id1" > 第一章 </a>
<a href="#id2"> 第二章 </a>
<a href="#id3"> 第三章 </a>

<div id="id1" style="height:100px"> 第一章內容 </div>
<p id="id2"style="height:300px"> 第二章內容 </p>
<div id="id3"style="height:500px"> 第三章內容 </div>

 2、p標籤：
定義段落，不換行,段落段落之間有間距

<p>  段落標籤，不換行</p>

 3、br標籤：
換行標籤

<p>段落標籤，不<br>換行</p>

 4、h標籤：
標題標籤，從h1-h6表示字型從大到小，加粗顯示

<h1>中國人</h1>
<h2>中國人</h2>
<h3>中國人</h3>
<h4>中國人</h4>
<h5>中國人</h5>
<h6>中國人</h6>

 5、span標籤
白板，行內標籤，段與段之間只有空格，不換行

<span>中國人</span>
<span>中國人</span>
<span>中國人</span>

 6、div標籤
白板，塊級標籤

<div>中國人</div>
<div>中國人</div>
<div>中國人</div>

 7、input標籤
標準輸入框

<input type="text"  name="username" value="Tom" ><br>
<input type="password" name="pwd" value="123456" >
<input type="button" value="註冊"  >
<input type="submit" value="提交"  >
<input type="reset" value="重置"  >
<input type="checkbox" name="雙選" value="1" checked="checkted" >
<input type="radio" name="單選" value="1" checked="checkted" >
<input type="file" name="fname" enctype="multipart/form-data" >

 8、form標籤
表單使用,get方式提交資料拼接顯示在url，post方式提交資料不拼接顯示在url上（更安全）

<form action="http://www.hao123.com" method="get">
    <input type="text"  name="username" value="Tom" ><br>
    <input type="password" name="pwd" value="123456" >
    <input type="button" value="註冊"  >
    <input type="submit" value="提交"  >
    <input type="checkbox" name="雙選"  value="1" >
    <input type="radio" name="單選"  value="1" >
</form>

 9、textarea標籤
接受多行文字輸入，其中可以輸入多行資料

<textarea  name="username" >預設值</textarea>

 10、select標籤

下拉框標籤，通過option指定下拉框內容

<select name="city"  >
    <option value="1" selected="selected">北京</option>
    <option value="2">上海</option>
    <option value="3">南京</option>
</select>

<select name="city" size=10 mutiple="mutiple">
    <option value="1" selected="selected">北京</option>
    <option value="2">上海</option>
    <option value="3">南京</option>
</select>

<select name="city">
    <optgroup label="省分">
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">南京</option>
     </optgroup>
</select>

 11、img標籤
圖片標籤

<img src="C:\Users\Desktop\001.jpg" style="height: 200px;width: 200px" >
<img src="file:///C:/Users/Desktop/001.jpg">

<a href="http://www.hao123.com">
    <img src="001.jpg" style="height: 200px;width: 200px" title="名稱" alt="描述">
</a>

 12、ul標籤
無序列表，對應的li標籤標記列表行

<ul>
    <li>第一行</li>
    <li>第二行</li>
    <li>第三行</li>
</ul>

 13、ol標籤
有序列表，對應的li標籤標記列表

<ol>
    <li>第一行</li>
    <li>第二行</li>
    <li>第三行</li>
</ol>

 14、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>

 15、table標籤
表格標籤，通過tr表示行，td表示單表格

（1）第一種table寫法

<table border="1.5">
    <tr>
        <td>第一個行第一個表格</td>
        <td>第一個行第二個表格</td>
        <td>第一個行第三個表格</td>
        <td>第一個行第四個表格</td>
    </tr>
     <tr>
        <td>第二個行第一個表格</td>
        <td>第二個行第二個表格</td>
        <td>第二個行第三個表格</td>
        <td>第二個行第四個表格</td>
    </tr>
</table>

 （2）第二種table寫法 

<table border="1.2">
    <thead>
        <tr>
            <th>表頭1</th>
            <th>表頭2</th>
            <th>表頭3</th>
            <th>表頭4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>第一列資料</td>
            <td>第二列資料</td>
            <td>第三列資料</td>
            <td>第四列資料</td>
        </tr>
        <tr>
            <td>第一列資料</td>
            <td>第二列資料</td>
            <td>第三列資料</td>
            <td>第四列資料</td>
        </tr>
    </tbody>
</table>

<td colspan="2">第一個行第二個表格</td>　　 ##橫向合併合併單元格
<td rowspan="2">第一個行第四個表格</td>　　##縱向合併單元格

16、lable標籤
用於標記文字輸入

<label for="username"> 使用者名稱: </label>
<input id="username"type="text"  >

 

17、fieldset標籤

用於文字框

 

<fieldset>
    <legend>
        登陸
    </legend>
    <label for="username"> 使用者名稱: </label>
    <input id="username"type="text"  ><br>
    <label for="password"> 密&nbsp;&nbsp;&nbsp;碼: </label>
    <input id="password"type="password"  >
</fieldset>

 







 

相關文章