1.HTML

本文轉載自查看原文 2018-01-18 23:47 1540 前端

HTML簡介

hyper text markup language 即超文本標記語言。

超文本: 就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。

標准模板

<!DOCTYPE html>    
<html lang="en">
<head>                  
    <meta charset="UTF-8">      
    <title>Title</title>       
</head>
<body>
        <p>主體內容</p>         
</body>
</html>

Head 標簽

1.<meta/>

定義關於HTML文檔的元數據。重要的屬性有三個：http-equiv、name、content

（1）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"/>

（2）name 把content屬性關聯到一個名稱。

keywords（搜索關鍵字，用於搜索引擎抓取信息的顯示）
description（搜索到網站后顯示的網頁內容簡描述）
author（站點制作者信息）
generator（用以說明生成工具）

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

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

2.<link/>

引用外部文檔，常見於引用外部樣式。重要屬性有三個：rel、href、type。

<link rel="stylesheet" href="...">

Body標簽

1.塊級標簽和內聯標簽

block（塊）元素的特點

① 總是在新行上開始；
② 高度，行高以及外邊距和內邊距都可控制；
③ 寬度缺省是它的容器的100%，除非設定一個寬度。
④ 它可以容納內聯元素和其他塊元素

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

2.基本標簽

<h1>標題1</h1>
<h6>標題6</h6>
<p>段落</p>

<br />            換行
<hr>              水平線
<u></u>           文字下方加下划線
<div></div>       塊級標簽
<span></span>     行內標簽

&nbsp; &nbsp;     空格
&gt;              >
&lt;              <

3.<a> 超鏈接標簽(錨標簽)

重要屬性有三個：href、target、name

href 超鏈接地址：可以是Web上任意資源，包括圖片，網頁，樣式，腳本文件等。href="#"時，表示被鏈接頁面就是當前頁面。

target 文檔打開時要顯示的目標位置，屬性值一般有：_blank（新窗口中打開）、_self（默認，在超鏈接所在的容器中打開）、_parent（在超鏈接的父容器中打開）、_top（整個容器中打開）、name（框架名稱）。

name 錨記名稱。作用：跳轉到文檔的某個地方。返回首頁。

（1）超鏈接　　　　

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

（2）錨點

<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>

<div id="i1" style="height: 600px;">第一章的內容</div>
<div id="i2" style="height: 600px;">第二章的內容</div>
<div id="i3" style="height: 600px;">第三章的內容</div>

4.<form>表單標簽

（1）表單屬性

HTML 表單用於接收不同類型的用戶輸入，用戶提交表單時向服務器傳輸數據，從而實現用戶與Web服務器的交互。表單標簽, 要提交的所有內容都應該在該標簽中

action表單要提交的地址，用於處理表單的內容（一般是提交字典到后台的一個接口，這個接口是java寫成的，提交到這個接口后后台就知道如何處理這些數據了）。

method提交的方法，默認是get方式提交。

get提交的鍵值對.放在地址欄中url后面. 2.安全性相對較差. 3.對提交內容的長度有限制.

post提交的鍵值對不在地址欄. 2.安全性相對較高. 3.對提交內容的長度理論上無限制.

（2）表單元素input

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使用。

<textarea> 文本域標簽。默認表現形式是可以輸入很多行文本的文本框。

　　name （表單提交項的key）

　　cols（設置文本域寬度）

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

<select> 下拉框標簽。使用時要結合<option>子標簽一起使用。

　　name:表單提交項的key

　　size：選項個數

　　multiple：多選

　　<option> 下拉選中的每一項

　　value（表單提交項的值）

　　selected（selected下拉選默認被選中）

(3) radio和checkbox

<body>
    <form action="ip" method="get">
        <div>
            <!--單選-->
            <p>請選擇性別</p>
            男：<input type="radio" name="gender" value="M">
            女：<input type="radio" name="gender" value="F" checked="checked">
    
            <!--/多選-->
            <p>愛好</p>
            籃球：<input type="checkbox" name="favor" value="1">
            足球：<input type="checkbox" name="favor" value="2">
            台球：<input type="checkbox" name="favor" value="3" checked="checked">
        </div>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </from>
</body>

(4)textarea多行文本

<textarea name="memo" id="" cols="30" rows="10">請寫上你的評價</textarea>

（5）select下拉框

<select name="city" size="2" multiple="multiple">
                <option value="1">紐約</option>
                <option value="2">深圳</option>
                <option value="3" selected="selected">北京</option>
 </select>

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

<body>
    <form action="ip" method="get">
        <div>
            <!--單選-->
            <p>請選擇性別</p>
            男：<input type="radio" name="gender" value="M">
            女：<input type="radio" name="gender" value="F" checked="checked">
    
            <!--/多選-->
            <p>愛好</p>
            籃球：<input type="checkbox" name="favor" value="1">
            足球：<input type="checkbox" name="favor" value="2">
            台球：<input type="checkbox" name="favor" value="3" checked="checked"> <br /><br />

            <!--下拉標簽-->
            <!--size一次顯示的個數，multiple可以多選-->
            <select name="city" size="2" multiple="multiple">
                <option value="1">紐約</option>
                <option value="2">深圳</option>
                <option value="3" selected="selected">北京</option>
            </select>
            <p><textarea name="memo" id="" cols="30" rows="10">請寫上你的評價.....</textarea></p>
        </div>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </from>

        
</body>

</html>

全部代碼

5.img 圖片

<!-- a標簽作用：點擊圖片鏈接到對應地址-->
<!-- title鼠標移動到圖片上面顯示的內容-->
<!--alt圖片加載不出來的時候的提示信息-->


<a href="http://www.baidu.com">
    <img src="fanye.jpg" title="范冰冰" alt="美女">
</a>

6.ul、ol、dl 列表

無序，有序，標題列表

  <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>

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

7.table表格

caption: 表格標題

<thead> 表格頭部，使結構更加分明

<tbody> 表格主體部分，使結構更加分明

<tr> 表格的數據行

<th> 表格的表頭名稱，與<td>不同在於文字采用加粗居中的形式顯示

<td> 單元格，用來顯示表格內容

（1）簡單表格

<body>
    <table border="1">
        <caption>小學一班</caption>
            <thead>
                <tr>
                    <th>序號</th>
                    <th>姓名</th>
                    <th>年齡</th>
                    <th>性別</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>小明</td>
                    <td>6</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>小紅</td>
                    <td>8</td>
                    <td>女</td>
                </tr>
            </tbody>
    </table>
</body>

（2）合並單元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <td>表頭1</td>
        <td>表頭2</td>
        <td>表頭3</td>
        <td>表頭4</td>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td colspan="2">1</td>
        <!--<td>2</td>-->
        <td>3</td>
        <td>4</td>
    </tr>
       <tr>
        <td>1</td>
        <td>2</td>
        <td rowspan="2">3</td>
        <td>4</td>
    </tr>
        <tr>
        <!--<td>1</td>-->
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
        <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    </tbody>
</table>
</body>
</html>

合並單元格.html

View Code

8.label 標簽

把標簽與文本關聯起來（獲取光標）

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

點“用戶名”也可以開始輸入信息

9.<fieldset>

對表單中的相關元素進行分割

<fieldset>
    <legend>溫馨提示</legend>
    <div align="middle">不要忘記點贊哦 ==</div>
</fieldset>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 1.HTML介紹和規范 HTML html html HTML(4) HTML HTML系列 -> !DOCTYPE html HTML URL與HTML總結什么是“HTML”？HTML的“標記”是什么？ html調用html的方法