前端開發之HTML+CSS

時間  2019-11-08
標籤 前端 開發 html+css html css 欄目 CSS 简体版
原文   原文鏈接

HTML(Hyper Text Mark-up Language):css

中文名稱爲，超文本標記語言。html

#超級文本標記語言是標準通用標記語言下的一個應用，也是一種規範，一種標準，它經過標記符號來標記要顯示的網頁中的各個部分。網頁文件自己是一種文本文件，經過在文本文件中添加標記符，能夠告訴瀏覽器如何顯示其中的內容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。

網頁的組成：python

一個網頁通常由兩部分組成即：web

  • HTML（Hypertext Markup Language）
  • 和CSS（Cascade Style Sheets）。

HTML負責描述網頁的結構和內容（如標題，導航欄等） CSS則負責網頁的表現（外觀）（如背景顏色，字體樣式等）。瀏覽器

HTML之Head:字體

一、Meta(metadata information)網站

 提供有關頁面的元信息，例：頁面編碼、刷新、跳轉、針對搜索引擎和更新頻度的描述和關鍵詞ui

 一、頁面編碼搜索引擎

<meta charset="UTF-8">  #指定編碼類型爲UTF-8

二、刷新和跳轉編碼

<meta http-equiv="refresh" content="5">  #指定每5秒刷新一次
<meta http-equiv="refresh" Content="1;Url=http://www.baidu.com" /> #指定1秒以後跳轉頁面至另外一個網頁

三、關鍵字

關鍵字的做用：通常是讓爬蟲之類的收錄程序，當他們在爬網站的時候，若是有關鍵字，那麼別人就會優先把關鍵字收錄到他們的記錄中，好比百度：若是他們收錄以後，經過搜索關鍵字就能找到具備該關鍵字的網站。

<meta name="keywords" content="蝦米猜電臺 在線試聽 電臺 在線試聽">#在瀏覽器搜索框中輸入該關鍵字，這樣就能找到蝦米音樂網了！

四、描述

例如cnblog裏的就是一個描述：

<meta name="description" content="博客園是一個面向開發者的知識分享社區。自建立以來，博客園一直致力並專一於爲開發者打造一個純淨的技術交流社區，推進並幫助開發者經過互聯網分享知識，從而讓更多開發者從中受益。博客園的使命是幫助開發者用代碼改變世界。">

二、title

網頁頭部信息，以下圖所示：

三、Link

網頁頭部的圖標

<link rel="shortcut icon" href="favicon.ico">  
以下圖：

導入CSS相似python中導入模塊相似
<link rel="stylesheet" href="css/css_model.css">

四、Style

一、在當前文件中寫Css樣式

二、在其餘文件中寫Css樣式相似python的模塊導入的方式把Css樣式導入到當前文件中使用

五、Script

一、在當前文件中寫JS

二、在其餘文件中寫JS相似python的模塊導入的方式把JS導入到當前文件中使用

HTML之Body:

基礎知識

一、body裏面分爲兩類標籤：塊級標籤和內聯標籤，塊級標籤佔用的是整行，內聯標籤佔用的他所使用的實際大小。

二、特殊符號特殊處理

     這裏記住經常使用的表示空格的特殊字符爲：&nbsp  更多特殊字符

經常使用標籤：

 一、<p></p>標籤和<br/>標籤

<p></p>標籤：段落標籤，每一對p標籤爲一段,代碼以下：

<p>adfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfadfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfadfasdfasdfasdfasdfasdfasdfasdfa</p>
<p>adfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfadfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfadfasdfasdfasdfasdfasdfasdfasdfa</p><p>adfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfadfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfadfasdfasdfasdfasdfasdfasdfasdfa</p>

在瀏覽器中顯示爲：

<br/>標籤：換行標籤；有一個<br/>爲一個換行，看下面的代碼

二、<a></a>標籤

<a></a>標籤用來跳轉和錨

<a>標籤之：跳轉

默認若是在<a><a/>標籤中不設置那麼他僅僅在瀏覽器中顯示文本，以下面代碼

<a>eric</a><a>eric</a>

顯示：

 指定跳轉後，代碼以下

<a href="http://www.baidu.com">帥哥博客</a>

效果以下：

若是讓他用一個新的標籤中打開鏈接地址代碼以下：

<a target="_blank" href="http://www.baidu.com">百度</a>

<a>標籤之：錨

錨的做用是相似於讀書時候的書籤，當你你點擊這個「錨」=「書籤」，的時候就跳轉到指定的位置

<a href="#a2">
        書籤
</a>
<!--在標籤裏，ID是這個標籤的惟一的值，咱們在作錨的時候指定他的ID便可-->
<!--<a href="#a2"> 上面的代碼href="#要跳轉的標籤"-->
<div id="a1" style="height:700px;">
    mark_1
</div>

<div id="a2" style="height:700px;">
    mark_2
</div>

上面的代碼中，若是點擊了書籤以後，那麼就會跳轉到id=a2的書籤的位置！

三、H標籤

即標題標籤,代碼以下

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

顯示效果以下：

四、Select標籤

第一種select標籤

<select>
    <option value="1">上海</option>
    <option value="2">北京</option>
    <option value="3" selected="selected">廣州</option>
    <!--這裏默認是廣州由於selected="selected" 這裏設置了默認的！-->
</select>

顯示效果以下圖：

第二種select標籤

<select size="2">
    <option>上海</option>
    <option>北京</option>
    <option>廣州</option>
    <option>山東</option>
</select>

顯示效果以下圖：

第三種select標籤,能夠進行多選

<select multiple="multiple" size="2">
    <option>上海</option>
    <option>北京</option>
    <option>廣州</option>
    <option>山東</option>
</select>

第4中select標籤，能夠進行分組

<select>
    <optgroup label="河北省">
        <option>石家莊</option>
        <option>邯鄲</option>
    </optgroup>
    <optgroup label="山西省">
        <option>太原</option>
        <option>平遙</option>
    </optgroup>
</select>

效果圖以下：

五、input系列標籤

input:checkbox標籤-複選框

<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox" checked="checked"/>
<!--這裏加一個標識checked="checked，爲默認選擇"-->

效果以下圖：

input:radio標籤-單選框

<!--第一中狀況不互斥    -->
<input type="radio"/>
<input type="radio"/>
<input type="radio"/>
<hr/>
<!--對於input標籤來講只要，radio的name值相同，那麼他們就會互斥-->
<input type="radio" name="gender"/>
<input type="radio" name="gender"/>
<input type="radio" name="gender"/>

input:text & password 輸入框

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

input:button & submit 提交按鈕

<input type="button" value="提交"/>
<input type="submit" value="提交"/>

效果圖以下：

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

<input type="file"/>

效果圖以下:

六、多行文本框

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

七、form表單

<form>
    <p>用戶名:<input type="text"/></p>
    <p>密碼:<input type="password"/></p>
    <input type="submit" value="提交"/>
    <input type="button" value="按鈕"/>
    <!--這裏按提交纔有反映，submit是用來提交當前的表單的，固然能夠有多個表單-->
    <!--可是，這個submit須要寫入表單內，那麼提交的時候是提交的當前表單-->
</form>

效果圖以下：

<form action="www.baidu.com" method="get">
    <!--這裏action是告訴html提交到那裏-->
    <!--method是經過什麼方法去action指定的地址-->
    <p>
        用戶名:<input type="text" name="username"/>
        <!--這裏的name="username" 這裏當我們指定的action接收到的數據以後縣會找到是否有這個name標籤-->
        <!--而後把這裏的用戶的輸入複製給name爲一個字典key:value模式-->
    </p>
    <p>
        密碼:<input type="password" name="password"/>
                <!--這裏的name="username" 這裏當我們指定的action接收到的數據以後縣會找到是否有這個name標籤-->
        <!--而後把這裏的用戶的輸入複製給name爲一個字典key:value模式-->
    </p>
    <p>
        部門:<select name="department">
                    <option value="1">CTO</option>
                    <option value="2">DBA</option>
        <!--這裏在選擇以後，會把選擇的value值賦予給name，當用戶點擊提交後就會提交到後臺-->
    </select>
    </p>
    <input type="submit" value="提交"/>

</form>

八、label標籤

在不使用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>111</li>
    <li>222</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>

以下圖：

十、表格

<table border="1">
    <!--border這裏是加上邊框-->
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <!--一個tr是1行，一個td是一列，一行裏可能有不少列。-->
    <!--若是想加多個行就加多個tr便可-->
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

合併單元格

<table border="1">
    <!--border這裏是加上邊框-->
    <tr>
        <td colspan="3">1</td>
        <!--這裏colspan，就告訴html解析的時候佔3個格-->
    </tr>
    <!--一個tr是1行，一個td是一列，一行裏可能有不少列。-->
    <!--若是想加多個行就加多個tr便可-->
    <tr>
        <td rowspan="2">1</td>
        <td>2</td>
        <td>3</td>
    </tr>
        <tr>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

以下圖：

以上的表格標籤其實還不是很標準，正常標準的標籤以下：

<table border="1">
    <thead>
    <!--表頭-->
        <tr>
            <th>表1</th>
            <th>表2</th>
            <th>表3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
            <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
            <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </tbody>
</table>

以下圖：

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