01-HTML

時間  2020-08-22
標籤 html 欄目 HTML 简体版
原文   原文鏈接

01- HTML簡介

  • HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超文本指的是超連接，標記指的是標籤，是一種用來製做網頁的語言，這種語言由一個個的標籤組成，用這種語言製做的文件保存的是一個文本文件，文件的擴展名爲html或者htm，一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，能夠用文本的方式編輯它，若是用瀏覽器打開，瀏覽器會按照標籤描述內容將文件渲染成網頁，顯示的網頁能夠從一個網頁連接跳轉到另一個網頁。javascript

  • 超文本: 就是指頁面內能夠包含圖片、連接，甚至音樂、程序等非文字元素。html是由不少標籤組成的，學習html其實就是學習標籤的使用css

  • 標準模板html

  • 1 <!DOCTYPE html>   <!--文檔聲明-->   
 2 <html lang="en">   <!--根標籤-->
 3 <head>                  
 4     <meta charset="UTF-8">  <!--編碼聲明-->     
 5     <title>Title</title>    <!--網頁標題-->
 6 </head>
 7 <body>
 8         網頁顯示內容          <!--網頁主體-->
 9 </body>
10 </html>

  • html是由不少標籤組成：html標籤（一個html文件裏面只能有一個html標籤），head標籤、body標籤。若是把html比做一個完整的人體框架，head就是html的頭，body是html的身體。java

02- HTML註釋

  • html文檔中的註釋使用<!--這裏是註釋內容-->，被註釋的內容不會在網頁中顯示
  • 快捷鍵：ctrl + /

03- head標籤

3-1 meta標籤

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

  • 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 2019"/>

  • 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="用以說明生成工具">

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

3-2 link標籤

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

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

3-3 style標籤

  • 在頁面中寫css樣式

04- body標籤

標題標籤h1-h6

  • 經過 h一、h二、h三、h四、h五、h6標籤能夠在網頁上定義6種級別的標題。
<h1>這是一級標題</h1>
         <h2>這是二級標題</h2>
         <h3>這是三級標題</h3>   
         <h4>這是四級標題</h4> 
         <h5>這是五級標題</h5> 
         <h6>這是六級標題</h6>

段落標籤p

  • 標籤訂義一個文本段落，一個段落含有默認的上下間距，段落之間會用這種默認間距隔開

  • <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>段落</title>
    </head>
    <body>
        <p>HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超
        文本指的是超連接，標記指的是標籤，是一種用來製做網頁的語言，這種語言由一個個的
        標籤組成，用這種語言製做的文件保存的是一個文本文件，文件的擴展名爲html或者htm。
        </p>

        <p>一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，能夠用文本的方
        式編輯它，若是用瀏覽器打開，瀏覽器會按照標籤描述內容將文件渲染成網頁，顯示的網
        頁能夠從一個網頁連接跳轉到另一個網頁。
        </p>
    </body>
</html>

換行標籤

  • 代碼中成段的文字，直接在代碼中回車換行，在渲染成網頁時候不認這種換行，若是真想換行，能夠在代碼的段落中插入<br />來強制換行

  • <p>
一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，能夠用<br />
文本的方式編輯它，若是用瀏覽器打開，瀏覽器會按照標籤描述內容將文件<br />
渲染成網頁，顯示的網頁能夠從一個網頁連接跳轉到另一個網頁。
</p>

圖片標籤<img>

  • <img>標籤能夠在網頁上插入一張圖片，它是獨立使用的標籤，它的經常使用屬性有：

    • src屬性 定義圖片的引用地址
    • alt屬性 定義圖片加載失敗時顯示的文字，搜索引擎會使用這個文字收錄圖片
    • title屬性 鼠標劃入圖片上有提示

  • 絕對路徑和相對路徑

    • 絕對路徑: 相對於磁盤的位置去定位文件的地址
    • 相對路徑: 相對於引用文件自己去定位被引用的文件地址

  • 「 ./ 」 表示當前文件所在目錄下，好比：「./xx.jpg」 表示當前目錄下的xx.jpg的圖片，這個使用時能夠省略。

  • 「 ../ 」 表示當前文件所在目錄下的上一級目錄，好比：「../images/xxx.jpg」 表示當前目錄下的上一級目錄下的images文件夾中的xxx.jpg的圖片。

  • <img src="圖片路徑"
         alt="圖片加載失敗是顯示" width="100px" title="鼠標劃入提示">
<!--eg-->
 <img src="http://i1.mifile.cn/a1/pms_1537323963.1278763!220x220.jpg" alt="小米手機" title="小米手機">

連接標籤<a>

  • 在網頁上定義一個連接地址，它的經常使用屬性有：

  • href屬性 定義跳轉的地址

  • title屬性 定義鼠標懸停時彈出的提示文字框

  • target屬性 定義連接窗口打開的位置

    • target="_self" 缺省值，新頁面替換原來的頁面，在原來位置打開
    • target="_blank" 新頁面會在新開的一個瀏覽器窗口打開

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

  • <!--超連接-->
<a href="http://www.baidu.com" target="_blank">百度一下你就知道</a>

<!--死連接-->
 <a href="javascript:void(0);">死連接</a>
 <a href="#">#</a>

<!--錨點-->
<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>

<!--只有擁有name屬性的a標籤纔有錨點
其餘標籤能夠經過id屬性實現錨點-->
<a href="" name="box">這是頂部</a>
<div class="text">
    HTML是 <span>HyperText Mark-up Language</span>的首字母簡寫，
    意思是超文本標記語言，超文本指的是超連接，標記指的是標籤，
    是一種用來製做網頁的語言，這種語言由一個個的標籤組成，
    用這種語言製做的文件保存的是一個文本文件，文件的擴展名爲html或者htm，
    一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，
    能夠用文本的方式編輯它，若是用瀏覽器打開，瀏覽器會按
    照標籤描述內容將文件渲染成網頁，顯示的網頁能夠從一個網頁連接跳轉到另一個網頁。
</div>
<a href="http://www.baidu.com">百度一下</a>
<div style="height: 600px">11</div>
<a href="#box">去頂部</a>

列表標籤

有序列表

  • 在網頁上定義一個有編號的內容列表能夠用<ol>、<li>配合使用來實現

  • type屬性

    • A A B C D
    • a a b c d
    • 1 1 2 3 4
    • i i ii iii iv v vi
    • I I II III IV V VI
  • <ol type="A">
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ol>
無序列表

  • 在網頁上定義一個無編號的內容列表能夠用<ul>、<li>配合使用來實現

  • <ul>
    <li><a href="#">新聞標題一</a></li>
    <li><a href="#">新聞標題二</a></li>
    <li><a href="#">新聞標題三</a></li>
</ul>

  • type屬性

    • disc 默認 小黑圓點
    • circle 空心圓
    • square 小方框
  • <ul type="circle">
    <li><a href="#">新聞標題一</a></li>
    <li><a href="#">新聞標題二</a></li>
    <li><a href="#">新聞標題三</a></li>
</ul>
定義列表

  • 定義列表一般用於術語的定義。

    標籤表示列表的總體。
    標籤訂義術語的題目。
    標籤是術語的解釋。一個
    中能夠有多個題目和解釋 

  • <dl>
    <dt>html</dt>
    <dd>負責頁面的結構</dd>

    <dt>css</dt>
    <dd>負責頁面的表現</dd>

    <dt>javascript</dt>
    <dd>負責頁面的行爲</dd>
</dl>

表格<table>

  • table聲明一個表格，屬性以下：

    • border屬性 定義表格的邊框，設置值是數值
    • cellpadding屬性 定義單元格內容與邊框的距離，設置值是數值
    • cellspacing屬性 定義單元格與單元格之間的距離，設置值是數值
    • align屬性 設置總體表格相對於瀏覽器窗口的水平對齊方式,設置值有：left | center | right

  • caption 表格標題

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

  • tr 表格的數據行

  • th 表格的表頭名稱，與td不一樣在於文字採用加粗居中的形式顯示

  • td 單元格，用來顯示錶格內容

  • th、td屬性：

    • align 設置單元格中內容的水平對齊方式,設置值有：left | center | right
    • valign 設置單元格中內容的垂直對齊方式 top | middle | bottom
    • colspan 設置單元格水平合併，設置值是數值
    • rowspan 設置單元格垂直合併，設置值是數值
  • <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>html表格</title>
        <style>

            th,td{
                text-align: center;
                width: 50px;
                height: 30px;
            }
        </style>
    </head>
    <body>
        <!--border:添加表格框
            align: 表格相對瀏覽器居中
            cellspacing: 單元格之間沒有間隔
        -->
       <table border="1"  align="center" cellspacing="0">
           <!--表格標題-->
           <caption><strong>學生信息表</strong></caption>
           <!--表頭-->
           <thead>
                <tr>
                    <th>姓名</th>
                    <th>班級</th>
                    <th>年齡</th>
                    <th>身高(cm)</th>
                    <th>體重(kg)</th>
                </tr>
           </thead>
           <tbody>
                <tr>
                    <td>張三</td>
                    <!--合併行-->
                    <td rowspan="2">31709</td>
                    <td>21</td>
                    <td>170</td>
                    <td>60</td>

                </tr>
                <tr>
                    <td>李四</td>
                    <td>20</td>
                    <td>160</td>
                    <td>45</td>
                </tr>
                <tr>
                    <td>王二</td>
                    <td>31708</td>
                    <td>19</td>
                    <!--合併列-->
                    <td colspan="2">保密</td>
                </tr>
           </tbody>
       </table>
    </body>
</html>

  • 效果圖

　　

表單<form>

  • 表單用於蒐集不一樣類型的用戶數據，表單由不一樣類型的標籤組成

  • \<form\>標籤 定義總體的表單區域

    • action屬性 定義表單數據提交地址
    • method屬性 定義表單提交的方式，通常有「get」方式和「post」方式
    • get提交的鍵值對.放在地址欄中url後面. 2.安全性相對較差. 3.對提交內容的長度有限制.
    • post提交的鍵值對不在地址欄. 2.安全性相對較高. 3.對提交內容的長度理論上無限制.

  • \<label\>標籤 把標籤與文本關聯起來（獲取光標）,提升用戶體驗

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

  • \<input\>標籤 定義通用的表單元素

    • type屬性

      • type="text" 定義單行文本輸入框

      • type="password" 定義密碼輸入框

        • text和password共有的屬性

        • size（指定表單元素的初始寬度。當type爲text或password時，表單元素的大小以字符爲單位，對於其餘元素，寬度以像素爲單位）

        • maxlength（表示輸入的最大字符數，有利於防止sql的注入）

        • readonly （只讀）

        • placeholder （提示用戶輸入信息）

        • <p>
    <label for="username">用戶名：</label>
    <input type="text" id="username" name="user" placeholder="請輸入用戶名" maxlength="8">
    <br />
<P/>

<p>
    <label for="password">密&emsp;碼：</label>
    <input type="password" name="pwd" id="password" placeholder="請輸入密碼" maxlength="16">
</p>

      • type="radio" 定義單選框

        • name爲同一個屬性時才表示一組數據，才能實現單選功能

        • value（必需要寫，提交到服務器的key值）

        • checked（爲true時默認選中該選項）

        • <form action="" method="get">	
    <p>
        <label for="">性&emsp;別：</label>

        <label for="male">男</label>
        <input type="radio" id="male" name="gender" value="male" checked="true">

        <label for="female">女</label>
        <input type="radio" id="female" name="gender" value="female">

        <label for="secret">保密</label>
        <input type="radio" id="secret" name="gender" value="secret" disabled="true">
    </p>
</form>

      • type="checkbox" 定義複選框

        • name爲同一個屬性時才表示一組數據，才能實現單選功能

        • value（必需要寫，提交到服務器的key值）

        • checked（爲true時默認選中該選項）

        • <p>
    <label>愛好：</label>

    <label for="sleeping">睡覺</label>
    <input type="checkbox" id="sleeping" name="hobby" value="sleeping" disabled="true">

    <label for="singing">唱歌</label>
    <input type="checkbox" id="singing" name="hobby" value="singing">

    <label for="dancing">跳舞</label>
    <input type="checkbox" id="dancing" name="hobby" value="dancing">

    <label for="drawing">繪畫</label>
    <input type="checkbox" name="hobby" id="drawing" value="drawing" checked="true">
    
</p>

      • type="file" 定義上傳文件

        • 上傳文件：<input type="file">

      • type="submit" 定義提交按鈕。用於提交表單。

        • <input type="submit" value="提交">

      • type="reset" 重置按鈕。清空表單的輸入，恢復到表單默認的狀態。

        • <input type="reset" value="重置">

      • type="button" 普通按鈕。通常結合javascript使用。

      • type="hidden" 定義一個隱藏的表單域，用來存儲值

    • value屬性 定義表單元素的值

    • name屬性 定義表單元素的名稱，此名稱是提交數據時的鍵名

  • <textarea>標籤 定義多行文本輸入框

    • name （表單提交項的key）

    • cols（設置文本域寬度）

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

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

  • <select>標籤 定義下拉表單元素

    • name:表單提交項的key

    • size：選項個數

    • multiple：多選

    • value（表單提交項的值）

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

    • <select name="city" id="" size="2" multiple="multiple">
    <optgroup label="貴州省">
        <option value="guiyang" selected="true">貴陽市</option>
        <option value="anshun">安順市</option>
        <option value="liupanshui">六盤水市</option>
    </optgroup>

    <optgroup label="湖南省">
        <option value="yueyang">岳陽市</option>
        <option value="changsha" selected="true">長沙市</option>
        <option value="loudi">婁底市</option>
    </optgroup>

</select>

    • 效果圖

加粗、斜體標籤em i b strong

  • em、i標籤：斜體

    • <!--i標籤 只是斜體   em 不只斜體 還利於seo搜索-->
    <em>是斜體標籤</em>
    <i>這也是斜體標籤</i>

  • b、strong標籤：加粗

    • <!--b標籤 只是物理加粗   strong 不只加粗 還利於seo搜索-->
	<b>粗體標籤</b>
	<strong>粗體標籤</strong>

div+span

  • 塊級元素div display:block;能夠包含任何塊和行內元素獨佔一行，支持設置寬高若是沒有設置寬高，高度由內容撐開，寬度默認瀏覽器寬度沒有內容，在網頁上肉眼看不到東西，可是審查元素，寬度是瀏覽器寬度，高度0

  • 行內（內聯）元素span display:inline;能夠和其餘行內元素位於同一行行內元素不要包塊級元素不支持設置寬高內容撐開寬高

  • 行內塊元素 display:inline-block;塊級元素能夠橫排展現行內元素能夠設置寬高元素既能設置寬高 也能排在一排

  • display:none隱藏元素,包括他的子標籤，在頁面中不佔位置，等同於消失了

  • <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 50px;
            height: 50px;
            background: skyblue;
            /*display: inline;*/
            display: inline-block;
        }
        span{
            width: 50px;
            height: 50px;
            background: rebeccapurple;
            /*display: block;*/
            display: inline-block;
        }
        ul{
            width: 200px;
            height: 20px;
            background: skyblue;
        }
        ul li{
            display: none;
        }
        ul:hover li{
            display: inline;
        }
    </style>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
    <span>span1</span>
    <span>span2</span>

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

  • 效果圖

特殊符號

  • 大於 小於 水平線 版權符號 空格 空白字符

  • <p>
    大於號：---&gt;<br>
    小於號：---&lt;<br>
    空格符號：---12&nbsp;34<br>
    空白位：---12&emsp;&emsp;&emsp;34<br>
    版權符號：---&copy;<br>
   	水平線表橋---<hr />
</p>

頁面佈局概述

  • 佈局也能夠叫作排版，它指的是把文字和圖片等元素按照咱們的意願有機地排列在頁面上，佈局的方式分爲兩種：

  1. table佈局：經過table元素將頁面空間劃分紅若干個單元格，將文字或圖片等元素放入單元格中，隱藏表格的邊框，從而實現佈局。這種佈局方式也叫傳統佈局，目前主要使用在EDM(廣告郵件中的頁面)中，主流的佈局方式不用這種。

  2. HTML+CSS佈局(DIV+CSS)：主要經過CSS樣式設置來佈局文字或圖片等元素，須要用到CSS盒子模型、盒子類型、CSS浮動、CSS定位、CSS背景圖定位等知識來佈局，它比傳統佈局要複雜，目前是主流的佈局方式。

頁面佈局實例

  • table來作總體頁面的佈局，佈局的技巧概括爲以下幾點：

    1. 按照設計圖的尺寸設置表格的寬高以及單元格的寬高。

    2. 將表格border、cellpadding、cellspacing所有設置爲0，表格的邊框和間距就不佔有頁面空間，它只起到劃分空間的做用。

    3. 針對局部複雜的佈局，能夠在單元格里面再嵌套表格，嵌套表格劃分局部的空間。

    4. 單元格中的元素或者嵌套的表格用align和valign設置對齊方式

    5. 經過屬性或者css樣式設置單元格中元素的樣式

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程