前端開發【第1篇：HTML】

時間 2019-12-11

標籤前端開發第1篇：HTML 欄目 HTML 简体版

原文原文鏈接

HTML初識

一、什麼是HTMLjavascript

HTML是英文Hyper Text Mark-up Language(超文本標記語言)的縮寫，他是一種製做萬維網頁面標準語言（標記）。至關於定義統一的一套規則，你們都來遵照他，這樣就可讓瀏覽器根據標記語言的規則去解釋它。css

你可能早已經注意到了這點，全部的 HTML 元素本質上是小的矩形塊，表明着某一小塊區域。
瀏覽器負責將標籤翻譯成用戶「看得懂」的格式，呈現給用戶

二、網頁的組成html

咱們平時看到的網頁通常由3個部分組成：java

HTML（Hypertext Markup Language）
CSS（Cascade Style Sheets）
JavaScript

上面3個分別能夠理解爲：視圖、表現、行爲(HTML能夠理解爲一個動畫小人，CSS爲它穿上美麗的衣服，JavaScript讓它變的能夠跳舞）windows

HTML頁面

head

一、頁面編碼瀏覽器

<meta charset="UTF-8">

二、設置刷新時間和頁面跳轉app

<!-- 設置頁面每5秒刷新一次 -->
<meta http-equiv="refresh" content="5">
<!-- 設置進入到當前頁面1秒後,跳轉到指定的Url-->
<meta http-equiv="refresh" Content="1;Url=https://www.cnblogs.com/zhouxiaoming123/" />

三、關鍵字佈局

關鍵字的做用：通常是讓爬蟲之類的收錄程序，當他們在爬你的網站的時候，若是你有關鍵字，那麼他們會優先把關鍵字收錄到他們的記錄中，好比搜狗：若是他們收錄以後，他們搜索你的關鍵字的時候，就能找到我們的網站。測試

<!-- 關鍵字設定 -->
<meta name="keywords" content="博客,HTML博客">

四、描述動畫

<!-- 描述網站或頁面 -->
<meta name="description" content="描述性內容:這是一個測試頁面">

五、title

<!-- 網頁頭部標題 -->
<title>Title</title>

六、style

通常建議css放在head中不論是引用仍是直接在當前頁面定義css,由於頁面加載自上而下

<!-- 引入CSS樣式文件 -->
<link href="/statics/assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<!-- 在當前頁面寫入CSS樣式 -->
<style>
    .class-shuaige{
        color:red;
    }
</style>

七、JavaScript

通常建議放到body裏面,固然這也不是絕對的,根據實際須要來吧

<!-- 引入外部JavaScript文件 -->
<script src="/statics/assets/scripts/flatpickr.min.js"></script>
<!-- 在當前頁面定義JavaScript -->
<script type="application/javascript">
    console.log("Hello World")
</script>

body

body是內容的存放地

HTML經常使用標籤

標籤分類

HTML中的標籤分爲兩類：塊級標籤和內聯標籤

塊級標籤：

每一個塊級元素都重新的一行開始，而且其後的元素也另起一行
元素的高度、寬度、行高以及頂和底邊距均可設置
元素寬度在不設置的狀況下，是它自己父容器的100%（和父元素的寬度一致），除非設定一個寬度

內聯標籤：根據實際使用的大小展現

和其餘元素都在一行上
元素的高度、寬度、行高及頂部和底部邊距不可設置；
元素的寬度就是它包含的文字或圖片的寬度，不可改變。

在html中，<span>、<a>、<label>、<input>、 <img>、 <strong> 和<em>就是典型的內聯元素（行內元素）（inline）元素。固然塊狀元素也能夠經過代碼display:inline將元素設置爲內聯元素。

以下代碼就是將塊狀元素div轉換爲內聯元素，從頁使用div元素具備內聯元素特色。

例子：

<!--在這裏寫內容,且這是html中的註釋-->
<div style="color:green;  " >這是塊級標籤</div>
<!-- 定義內聯標籤,這裏定義內聯標籤的高度屬性樣式無效 -->
<span style="height: 100px;color:blueviolet">這是內聯標籤</span>

經常使用標籤

一、p標籤和br標籤

每個P標籤是獨立的一行它是塊級標籤,<br/>的做用是換行

    <p>每個P標籤包含的內容是獨立的一行</p>
    <p>每個P標籤包含的內容是獨立的一行</p>
    <p>每個P標籤包含的內容<br>是獨立的一行</p>

二、a標籤

它有兩個做用：跳轉和錨點[跳轉或者設定錨點]

    <div>
        <!-- a標籤跳轉,在當前頁打開a標籤內的Url -->
        <a href="https://www.cnblogs.com/zhouxiaoming123/">個人博客</a>
        <!-- a標籤跳轉,在新的頁打開a標籤內的Url.默認target=_self -->
        <a target="_blank" href="https://www.cnblogs.com/zhouxiaoming123/">個人博客</a>
    </div>

    <!-- 跳轉至錨點標籤 -->
    <a href="#anchor">destination</a>
    <div style="height: 1000px"> 爲了達到跳轉效果在跳轉點和錨點之間加了1個1000px的塊級標籤</div>
    <!-- 定義錨點標籤/這個錨點也能夠是id="anchor"-->
    <a name="anchor">destination is here!!!</a>

三、H標籤

即標題標籤,代碼以下

    <h1>H1</h1>
    <h2>H2</h2>
    <h3>H3</h3>
    <h4>H4</h4>
    <h5>H5</h5>
    <h6>H6</h6>

四、select標籤

select標籤:title屬性和默認選中

            <!--
            這裏默認是成都由於selected="selected" 這裏設置了默認的！
            select標籤中title屬性的做用就是當鼠標移動到select標籤上後的提示
            而且通常咱們的select/input/file/textarea 等標籤都會在使用的時候放到form標籤中
            -->
            <select title="地名選擇">
                <option value="1">上海</option>
                <option value="2">北京</option>
                <option value="3" selected="selected">成都</option>
            </select>

select標籤：size屬性-展現幾個元

select標籤：multiple屬性-多選

在不一樣操做系統中，選擇多個選項的差別：

- 對於 windows：按住 Ctrl 按鈕來選擇多個選項
- 對於 Mac：按住 command 按鈕來選擇多個選項

因爲上述差別的存在，同時因爲須要告知用戶可使用多項選擇，對用戶更友好的方式是使用複選框。

提示：能夠把 multiple 屬性與 size 屬性配合使用，來定義可見選項的數目。

<select title="地名選擇" multiple="multiple" >
    <option value="1">上海</option>
    <option value="2">北京</option>
    <option value="2">廣東</option>
    <option value="4">江蘇</option>
    <option value="5">成都</option>
</select>

select標籤：label屬性-分組

<select title="地名選擇">
    <optgroup label="四川省">
        <option>成都</option>
        <option>宜賓</option>
    </optgroup>
    <optgroup label="山西省">
        <option>太原</option>
        <option>平遙</option>
    </optgroup>
</select>

五、input標籤

input:checkbox標籤-複選框

<p>
    用戶愛好：吃
    <input type="checkbox" name="chkhobby" value="吃" checked> 喝
    <input type="checkbox" name="chkhobby" value="喝"> 玩
    <input type="checkbox" name="chkhobox" value="玩"> 樂
    <input type="checkbox" name="chkhobox" value="樂" checked>
</p>
<!--這裏加一個標識checked="checked，爲默認選擇"-->

input:radio標籤-單選框

<!--對於input標籤來講只要，radio的name值相同，那麼他們就會互斥通常用在給用戶幾個選項用戶單選-->
<p>
    用戶性別：
    <input type="radio" name="sexrdo" value="男">男
    <input type="radio" name="sexrdo" value="女" checked=''>女
</p>

input:text普通文本框 & password 密碼輸入框

<!--標準的輸入框-->
<input title="普通文本框" type="text"/>
<!--密碼的輸入框（輸入的內容是保密的）-->
<input title="密碼輸入框" type="password"/>

input:button 普通按鈕& submit 表單提交按鈕

<!-- 普通的按鈕 disabled屬性有值就禁用該按鈕-->
<input type="button" value="普通按鈕"/>
<!-- 用來提交表單的按鈕,通常放在form表單裏面 -->
<input type="submit" value="表單提交按鈕"/>

從表現形式上來看他們很像，可是從功能上來區分他們功能不一樣

file標籤-用來提交文件時使用

<input type="file"/>

效果圖以下:

六、多行文本框

<textarea style="height: 100px;width: 100px;"></textarea>

效果圖以下：

七、form表單

      <form action="http://www.baidu.com" method="get">
            <!-- input -->
            <!--文本框-->
            <p>
                用戶名稱：
                <input type="text" name="txtUsename" value="請輸入用戶名稱" readonly>
            </p>
            <p>
                用戶密碼：
                <input type="password" name="txtUsepwd">
            </p>
            <p>
                確認密碼：
                <input type="password" name="txtcfmpwd" disabled>
            </p>
            <!-- 按鈕 -->
            <p>
                <input type="submit" name="btnsbt" value="提交">
                <input type="reset" name="btnrst" value="重置">
                <input type="button" name="btnbtn" value="普通按鈕">
            </p>
        </form>

效果圖以下：

八、label標籤

有一種狀況，看下圖，在不使用label標籤的時候，咱們只能點進框體裏去，不然就不能輸入或選擇，這樣用戶體驗不是很好：

代碼以下：

<div>
    <h1>Label標籤</h1>
    姓名:<input type="text"/>
    婚否:<input type="checkbox"/>
</div>

使用label標籤，代碼以下：

<div>
    <label for="name_1">
        姓名:
        <input id="name_1" type="text"/>
    </label>

    <label for="name_2">
        婚否:<input id="name_2" type="checkbox"/>
    </label>
</div>

顯示效果，這裏我選擇文字的時候也會進入到相應的框體，他相似一個跳轉：

九、列表 ul/ol/dl

ul列表在前面自動加「點」，代碼以下：

<ul>
    <li>line1</li>
    <li>line2</li>
    <li>line3</li>
</ul>

效果以下：

ol列表在前面自動加「數字」，代碼以下：

<ol>
    <li>line1</li>
    <li>line2</li>
    <li>line3</li>
</ol>

效果以下：

dl列表自動分組，代碼以下：

<dl>
    <dt>河北省</dt>
    <!--dt是標籤，dd是標籤裏的內容-->
        <dd>石家莊</dd>
        <dd>衡水市</dd>
    <dt>山東省</dt>
    <!--dt是標籤，dd是標籤裏的內容-->
        <dd>濟南市</dd>
        <dd>煙臺市</dd>
</dl>

效果以下圖：

十、表格

rowspan 合併行(豎着合併) colspan 合併列(橫着合併)

    <div class="table">
        <table border="1" cellspacing="0">
            <!--表格頭-->
            <thead>
                <!--表格行-->
                <tr>
                    <!--表格列，【注意】這裏使用的是th-->
                    <th></th>
                    <th>星期一</th>
                    <th>星期二</th>
                    <th>星期三</th>
                    <th>星期四</th>
                    <th>星期五</th>
                </tr>
            </thead>
            <!--表格主體-->
            <tbody>
                <!--表格行-->
                <tr>
                    <td rowspan="3">上午</td>
                    <!--表格列，【注意】這裏使用的是td-->
                    <td>語文</td>
                    <td>數學</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化學</td>
                </tr>
                <tr>
                    <!--表格列，【注意】這裏使用的是td-->
                    <td>語文</td>
                    <td>數學</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化學</td>
                </tr>
                <tr>
                    <!--表格列，【注意】這裏使用的是td-->
                    <td>語文</td>
                    <td>數學</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化學</td>
                </tr>
                <tr>
                    <td rowspan ="2">下午</td>
                    <!--表格列，【注意】這裏使用的是td-->
                    <td >語文</td>
                    <td>數學</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化學</td>
                </tr>
                <tr>
                    <!--表格列，【注意】這裏使用的是td-->
                    <td>語文</td>
                    <td>數學</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化學</td>
                </tr>
            </tbody>
            <!--表格底部-->
            <tfoot>
                <tr>
                    <td colspan="6">課程表</td>
                </tr>
            </tfoot>
        </table>
    </div>

標籤分類

HTML中標籤元素三種不一樣類型：塊狀元素，行內元素，行內塊狀元素。

經常使用的塊狀元素：

<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>

經常使用的行內元素

<a> <span> <br> <i> <em> <strong> <label>

經常使用的行內塊狀元素：

<img> <input>

塊級元素特色：display:block;

一、每一個塊級元素都重新的一行開始，而且其後的元素也另起一行。獨佔一行

二、元素的高度、寬度、行高以及頂和底邊距均可設置。

三、元素寬度在不設置的狀況下，是它自己父容器的100%（和父元素的寬度一致），除非設定一個寬度。

行內元素特色：display:inline;

一、和其餘元素都在一行上；

二、元素的高度、寬度及頂部和底部邊距不可設置；

三、元素的寬度就是它包含的文字或圖片的寬度，不可改變。

行內塊狀元素的特色：display:inline-block;

一、和其餘元素都在一行上；

二、元素的高度、寬度、行高以及頂和底邊距均可設置

注意

咱們能夠經過display屬性對塊級元素、行內元素、行內塊元素進行轉換，爲後面頁面佈局作好了準備。

標籤嵌套規則

塊元素能夠包含內聯元素或某些塊元素，但內聯元素卻不能包含塊元素，它只能包含其它的內聯元素，例如：

<div><div></div><h1></h1><p><p></div> ✔️

<a href=」#」><span></span></a> ✔️

<span><div></div></span> ❌

塊級元素不能放在p標籤裏面，好比

<p><ol><li></li></ol></p> ❌

<p><div></div></p> ❌

有幾個特殊的塊級元素只能包含內嵌元素，不能再包含塊級元素，這幾個特殊的標籤是：

h一、h二、h三、h四、h五、h六、p

相關標籤/搜索

每日一句

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