html學習筆記

時間 2019-11-09

標籤 html 學習筆記欄目 HTML 简体版

原文原文鏈接

1、標籤

1. 無歸屬標籤

address用於定義文章的聯繫信息
<cite> 元素定義著做的標題
<bdo> 元素用於定義文本的方向

2. <p>

瀏覽器會自動在段落的先後添加空行
若是但願在不產生新的段落的狀況下進行換行，使用<br/>標籤css

3. 引用 <q> <blockquote>

<q>用於定義短的引用，一般會爲<q>元素包含引號
<blockquote>用於定義塊引用，一般會進行縮進處理。示例, cite屬性用於表示引用的來源html

4. 縮寫 <abbr> <dfn>

<abbr>用於定義縮寫或首字母縮略語ios

<p><abbr title="World Health Organization">WHO</abbr> 成立於 1948 年。</p>

<dfn>用於定義項目，<dfn> 標籤可標記那些對特殊術語或短語的定義。、瀏覽器

5. a 標籤

有兩種使用 a 標籤的方式：緩存

經過使用 href 屬性 - 建立指向另外一個文檔的連接

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School</a>

經過使用 name 屬性 - 建立文檔內的書籤

<a name="tips">基本的注意事項 - 有用的提示</a>
<a href="#tips">有用的提示</a>

命名錨常常用於在大型文檔開始位置上建立目錄。能夠爲每一個章節賦予一個命名錨，而後把連接到這些錨的連接放到文檔的上部。若是您常常訪問百度百科，您會發現其中幾乎每一個詞條都採用這樣的導航方式。
假如瀏覽器找不到已定義的命名錨，那麼就會定位到文檔的頂端。不會有錯誤發生。

target屬性
a 標籤的 target 屬性規定在何處打開連接文檔。佈局
- （1）打開新窗口而且爲窗口定義一個名字，以後

6. <img>標籤

alt屬性用於定義一段可替換的文本，當瀏覽器沒法載入圖像時，瀏覽器將顯示替代性放入文本而不是圖像

7. table表格

<table border="1">
    <caption>Monthly savings</caption>  <!--標題必須跟在caption後面-->
    <tr>
        <th>Heading</th>    <!--表頭用th標籤進行定義-->
        <th>Another Heading</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

8. html列表

ul無序列表 ul>li
ol有序列表 ol>li
dl定義列表 dl>dt+dd

<dl>
    <dt>Coffee</dt>        <!--定義項目-->
    <dd>Black hot drink</dd>        <!--定義項目對應的描述-->
    
    <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

9. meta標籤

name屬性主要用於描述網頁，對應屬性是 content字體

Keywords 爲搜索引擎提供的關鍵字列表
name="viewport"

可以優化移動瀏覽器的顯示，設置屏幕的縮放屬性優化

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>

width [device-width | pixel_value]width, 若是直接設置pixel_value數值，大部分的安卓手機不支持，可是ios支持；網站

height – viewport 的高度（範圍從 223 到 10,000 ） ui

user-scalable [yes | no]是否容許縮放

initial-scale [數值] 初始化比例（範圍從 > 0 到 10）

minimum-scale [數值] 容許縮放的最小比例

maximum-scale [數值] 容許縮放的最大比例

Description 用來告訴搜索引擎你的網站主要內容
copyright 標註版權
http-equiv屬性
http-equiv相似於HTTP的頭部協議，它迴應給瀏覽器一些有用的信息，以幫助正確和精確地顯示網頁內容。與之對應的屬性值爲content，content中的內容其實就是各個參數的變量值。

Set-Cookie

瀏覽器訪問某個頁面時會將它存在緩存中，下次再次訪問時就可從緩存中讀取，以提升速度。當你但願訪問者每次都刷新你廣告的圖標，或每次都刷新你的計數器，就要禁用緩存了。

content-Type

設定頁面使用的字符集
meta標籤的charset的信息參數如UTF-8時，表明世界通用的語言編碼；
在HTML5中，咱們通常都是：

<meta charset="utf-8"/>

head>base元素

<base> 標籤爲頁面上的全部連接規定默認地址或默認目標（target）：

<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />

2、屬性

屬性提供了有關HTML元素的更多的信息，屬性值應該始終被包含在引號內。

3、html響應式設計

響應式設計就是可以以可變尺寸傳遞網頁

3.1 響應式佈局方法彙總

百分比佈局
對圖片和大塊佈局進行百分比設置
媒體查詢
利用媒體查詢設置不一樣分辨率下的css樣式

body{
            background-color: grey;
        }

        @media screen and (min-width:1200px){ /*當寬度大於1200px時*/
            body{
                background-color: pink;
            }
        }

        @media screen and (min-width:700px) and (max-width:1200px){
            body{
                background-color: blue;
            }
        }

        @media screen and (max-width:700px){ /*當寬度小於700px時*/
            body{
                background-color: orange;
            }
        }

vw響應式佈局

vw、vh是基於視口的佈局方案，故這個meta元素的視口必須聲明。

<meta name="viewport" content="width=device-width,initial-scale=1.0">

vw、vh、rem的使用

<template>
    <div class="box">
        
    </div>
</template>
<style>
    .box{
        width:50vw;
        height: 20vh;
        line-height: 20vh;
        font-size: 1.5rem;
        margin:0 auto;
        font-weight: bold;
        background-color: rgba(255,255,255,0.8);
    }
</style>

上面代碼中的50vw表明了此div佔據視口寬度的50%、高度佔據視口高度的20%，而且會隨着視口的變化，進行自適應;
字體則是1.5倍的html根字體大小。而且根據媒體查詢進行字號變化。