HTML基礎

時間 2019-11-12

標籤 html 基礎欄目 HTML 简体版

原文原文鏈接

前言：javascript

HTML不是腳本語言，不能執行的。它全稱叫「超文本標記語言」，須要瀏覽器來解析。HTML由一個又一個的標籤組成（標籤也被稱呼爲：元素）。css

HTML包含了：head，body。（有且只有一個）。其中<head>中的<metal>是元信息。html

HTML的註釋是：java

最基本的一個HTML頁面：python

<!DOCTYPE html>
<html lang="en"><!--表示網頁是英語。當第一次訪問，瀏覽器會提示「是否翻譯」-->
<!-- 中文 : zh-cn；簡體中文 : zh-hans -->
<head>
    <meta charset="UTF-8"><!-- 編碼格式。斜槓在H5中，不提倡寫 -->
    <meta name="author" content="quanquan616"><!-- 斜槓在H5中，不提倡寫 -->
    <meta name="keywords" content="quanquan616,張一貝"><!-- 關鍵字，對搜索引擎友好 -->
    <meta name="description" content="150 words">
    <title>整個網頁的標題</title>
</head>
<body>

</body>
</html>

View Code

在pycharm中，不要直接run。否則用的是pycharm自帶的服務器，圖片路徑是不對的，會照成破圖。後端

這麼打開：（在pycharm代碼界面右擊，而後選紅框框，會打開個新窗口，你會看到你的html文件）瀏覽器

1、HTML的經常使用標籤服務器

（一）.標題標籤<h1>~<h6>ide

（二）.段落標籤<p>佈局

（三）.列表標籤。經常使用於配合<div>使用

(1).有序列表<ol><li></li></ol>

(2).無序列表<ul><li></li></ul>

(3).定義列表

<dl>
    <dt>列表項</dt>
    <dd>描述</dd>
    <dd>描述</dd>
</dl>

（四）.<div>標籤。用於分化一個個的區域。網頁佈局就用它！

（五）.圖片標籤<img src="" alt="" width="" title="">

(1).注意src中的路徑寫法，若是當前html文件沒有與圖片文件夾同級時要寫"../images/1.jpg"，（".."是回到上一級目錄）

(2).當圖片路徑錯誤的時候，出現了破圖，alt中的內容就會顯示出來。

(3).width能夠給定一個數值，能夠寫百分比。給定了一個數值，就會按同比例縮放。若是寫百分比，圖片會根據當前網頁的寬度自適應。

（六）.斜體/粗體標籤

(1).斜體：<em>或<i>，推薦寫前面一種。

(2).粗體：<strong>或<b>，推薦寫前面一種。

（七）.文字標籤<span>

單純的文字標籤，須要配合CSS樣式纔能有效果。

（八）.超連接標籤<a href="" target=""></a>

<a href="" target="">必需要有文字，否則不會出來</a>

(1).href中能夠寫死鏈，無論怎麼點都不會有反應。這麼寫："javascript:void(0);"，作特效時用獲得。

(2).href能夠作錨點：

<span id="to_top">這是頂部</span>
<a href="#python">點擊，到python</a><!-- 錨點經過id來錨 -->
<p id="python">這裏是python</p>
<a href="#to_top">返回頂部</a><!-- 要與上面的id一一對應起來，否則沒效果 -->

(3).target中經常使用的屬性："_blank"在新的頁面打開，"_self"在本頁打開，覆蓋本頁。

（九）.塊級元素和行內元素的區別（標籤分爲塊級和行內）

（一）~（四）是塊級標籤。（四）~（九）是行內標籤。文字都是行內元素。

(1).塊級元素的先後會自動換行，行內元素不會。

(2).塊級元素能夠包含行內和塊級，行內元素包含文本或其餘行內元素，但不建議包含塊級。

(3).塊級元素能夠給寬高度，行內元素不能。

(4).塊級元素能夠給上下外邊距，行內元素不能。

2、特殊符號

特殊符號以與"&"開頭，分號";"結束。

&gt;<!-- 大於號 -->
&lt;<!-- 小於號 -->
&equals;<!-- 等於號 -->
&amp;<!-- &符號 -->
&nbsp;<!-- 空格 -->
&emsp;<!-- 空白位 -->
&copy;<!-- 版權符 -->

其中： 只是一個空格。&emsp;一個空白位，英文兩個空格，中文四個空格。

3、表格

如今佈局全都是div+css，表格對搜索引擎不友好，通常只用於後臺展現數據。

<table border="1" style="border-collapse: collapse;">
    <caption>表格標題</caption>
    <thead>
    <tr>
        <th>name</th>
        <th>age</th>
        <th>gender</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>quanquan616</td>
        <td>29</td>
        <td rowspan="2">男</td><!-- rowspan合併行，上下合併。下邊的td要對應去掉，否則會多出來 -->
    </tr>
    <tr>
        <td>大佬</td>
        <td>88</td>
    </tr>
    <tr>
        <td>小妹妹</td>
        <td colspan="2">不要問</td><!-- colspan合併列，左右合併 -->
    </tr>
    </tbody>
</table>

View Code

4、表單

這個很是重要！先後端交互的方式之一：表單負責收集用戶數據，發送給後端。沒有表單把數據提交過去，後端接收不到任何東東。

表單的應用：常應用於登陸、註冊、搜索、文件上傳。

看下面的案例，例1：

<form action="" method="get" name="self_introduce" id="" enctype="multipart/form-data">
        <div>
            <ul>
                <p style="color: #900;"><strong>自我介紹</strong></p>
                <li>
                    <label for="username">用戶名：</label>
                    <input type="text" name="username" id="username" value="張三" readonly>
                </li>
                <li>
                    <label for="password">密&emsp;碼：</label>
                    <input type="password" name="password" id="password">
                </li>
                <li>
                    性&emsp;別：
                    <input type="radio" name="gender" value="male" id="male" checked><label for="male">男</label>&emsp;
                    <input type="radio" name="gender" value="female" id="female"><label for="female">女</label>&emsp;
                    <input type="radio" name="gender" value="secret" id="secret"><label for="secret">保密</label>
                </li>
                <li>
                    愛&emsp;好：
                    <input type="checkbox" name="hobby" value="papapa" id="papapa"><label for="papapa">啪啪啪</label>&emsp;
                    <input type="checkbox" name="hobby" value="racing" id="racing"><label for="racing">看書</label>&emsp;
                    <input type="checkbox" name="hobby" value="games" id="games"><label for="games">電腦遊戲</label>
                </li>
                <li>
                    地&emsp;址：
                    <select name="address">
                        <option value="0">--請選擇--</option>
                        <option value="ningbo" selected>江蘇</option>
                        <option value="beijing">北京</option>
                        <option value="qingdao">重慶</option>
                    </select>
                </li>
                <li>
                    <label for="introduce">我的簡介：</label>
                    <textarea name="introduce" id="introduce" cols="25" rows="10" style="vertical-align: top;">i love you</textarea>
                </li>
                <li>
                    上傳頭像：
                    <input type="file">
                </li>
                <li>
                    <input type="submit" value="提交">&emsp;
                    <input type="reset" value="重置">
                </li>
            </ul>
        </div>
    </form>