HTML/CSS標籤（慕課網上截圖，東西很少，有點亂）

時間 2019-11-13

標籤 html css 標籤網上截圖東西很少有點欄目 HTML 简体版

原文原文鏈接

部分標籤的使用方法：php

<hx>標題 css

<p>段落 html

<q>對簡短文本的引用 chrome

<blockquote>對長文本的引用瀏覽器

<em><strong>編輯器

em 是句意強調，加與不加會引發語義變化。 strong 是重要性強調，和局部仍是全局無關，局部強調用strong也能夠，strong強調的是重要性，不會改變句意。 post

<span> spa

<address>地址設計

<code>顯示一行代碼語言 3d

<pre>在網頁中加入大段代碼

<ul><li></li></ul>無先後順序列表信息

<ol><li></li></ol>有先後順序的列表信息

<table><tr><td></td></tr></table> <table summary="摘要"> <caption>標題

<a href="#" target="_blank"></a>連接在新窗口打開

<form    method="post"   action="save.php">
        <label for="username">用戶名:</label>
        <input type="text" name="username" />
        <label for="pass">密碼:</label>
        <input type="password" name="pass" />
</form>表單

結果：

label標籤不會向用戶呈現任何特殊效果，它的做用是爲鼠標用戶改進了可用性。若是你在 label 標籤內點擊文本，就會觸發此控件。就是說，當用戶單擊選中該label標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上（就自動選中和該label標籤相關連的表單控件上）。

一、使用內聯式CSS設置「超酷的互聯網」文字爲粉色。

二、而後使用嵌入式CSS來設置文字爲紅色。

三、最後又使用外部式設置文字爲藍色（style.css文件中設置）。

但最終你能夠觀察到「超酷的互聯網」這個短詞的文本被設置爲了粉色。由於這三種樣式是有優先級的，記住他們的優先級：內聯式 > 嵌入式 > 外部式

可是嵌入式>外部式有一個前提：嵌入式css樣式的位置必定在外部式的後面。如右代碼編輯器就是這樣，<link href="style.css" ...>代碼在<style type="text/css">...</style>代碼的前面（實際開發中也是這麼寫的）。感興趣的小夥伴能夠試一下，把它們調換順序，再看他們的優先級是否變化。

其實總結來講，就是--就近原則（離被設置元素越近優先級別越高）。

但注意上面所總結的優先級是有一個前提：內聯式、嵌入式、外部式樣式表中css樣式是在的相同權值的狀況

p{text-indent:2em;}段落縮進

p{line-height:2em;}行間距

css代碼：

div{
    width:200px;
    padding:20px;
    border:1px solid red;
    margin:10px;    
}

html代碼：

<body>
   <div>文本內容</div>
</body>

元素的實際長度爲：10px+1px+20px+200px+20px+1px+10px=262px。在chrome瀏覽器下可查看元素盒模型，以下圖：

不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都不少）：

加入 table 標籤
設置 display: inline 方法：與第一種相似，顯示類型設爲行內元素，進行不定寬元素的屬性設置
設置 position:relative 和 left:50%：利用相對定位的方式，將元素向左偏移 50% ，即達到居中的目的

設計步驟：

相關標籤/搜索

每日一句

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