html+css

時間 2020-02-22

標籤 html+css html css 欄目 CSS 简体版

原文原文鏈接

1. 什麼是html

hyper 超級 text 文本 markup 標記 language 語言
超文本標記語言，俗稱網頁css

2. html 文件結構

以 .html 或 .htm 結尾的文本文件html

1) 標籤通常成對出現：<標籤名> </標籤名>
2) 最外層的標籤<html></html> 其它標籤必須在它以內
3) doctype 用來講明html的版本如：<!DOCTYPE html>服務器

###1 .格式ide

<html>
    <head>
        <meta charset="utf-8">
        <title>網頁標題</titie>
    </head>
    <body>
        要顯示的內容
    </body>
</html>

head標籤主要用來引入外部的樣式和腳本文件, 還能夠用來定義編碼和標題
主要的是網頁中與內容無關的部分佈局

body標籤裏放的是要顯示的內容部分字體

3. 經常使用標籤

3.1 標題標籤
<h1>...<h6> 標題從1到6，字號依次減少網站

3.2 段落標籤（正文）
<p> 能夠起到內容換行的做用，普通文本是不會自動換行的ui

3.3
分隔符 <hr> 不須要結束標籤, 加一道橫線
換行符 <br> 不須要結束標籤, 起到換行的做用編碼

3.4 標籤的屬性: 格式：屬性名="屬性值"
能夠用來定義標籤的寬、高、顏色等等url

3.5 圖片標籤 img
src 屬性表明圖片路徑
更多註釋內容
alt 是圖片訪問不到時的提示文字
width 表示寬度（單位是像素）
height 表示高度（單位是像素）

3.6 超連接 a 【重點】
href 屬性表示跳轉的目標
方式1:兩個網頁之間跳轉：

<a href="目標網頁的地址">超連接提示文字</a>

方式2：網頁內跳轉 (錨點)

<a href="#另外一個標籤的id值">超連接提示文字</a>

方式3：圖片做爲超連接
<a href=""> <img src="圖片路徑"> </a>

3.7 列表
有序列表 (order)

<ol>
   <li>列表項</li>
</ol>

無序列表 (unorder)

<ul>
   <li>列表項</li>
</ul>

3.8表格

<table>
    <thead></thead>  頭
    <tbody></tbody>  體
    <tfoot></tfoot>  腳
</table>

其中 thead, tbody, tfoot 裏又能夠分爲行與列
<tr> 表示行 '<td>' 表示列
例：
<table border="1" width="100%">

<thead>
<tr>
<td>編號</td><td>姓名</td>
</tr>
</thead>

<tbody>
<tr>
<td>1</td><td>張三</td>
</tr>
<tr>
<td>2</td><td>李四</td>
</tr>
</tbody>
</table>
與<td>相似的'<th>'，他們都是表明一列，但'<th>'其中的文本默認是居中並加粗

簡寫 table[border=1] [width=100%]>tbody>tr2>td2

同時生成thead和tbody 須要用() 把他們分組，平級的用+連在一塊兒
table>(thead>tr>td3)+(tbody>tr4>td*3)

<td colspan="2">行1列1</td>  conlspan用來合併行 2：表明合併2行
<td rowspan="2">行1列1</td>  rowspan用來合併列

表單標籤

<input type="text">  文本框
<input type="password">  密碼框
<input type="radio" name="" checked>  單選, name取值相同的爲一組 checked表示默認值爲
<input type="checkbox" name="" checked>  複選, name取值相同的爲一組
<input type="button" value="文字">  <button type="button">文字</button>    普通按鈕
<input type="reset" value="文字">  <button type="reset">文字</button>    重置按鈕
<input type="submit" value="文字">  <button type="submit">文字</button>    提交按鈕
<select>  下拉列表
    <option>值1</option>
    <option selected>值2</option>
    ...
    若是但願某個option默認被選中，在option上添加屬性selected
    <option>值n</option>
</select>
<textarea> 文本域

全部標籤都有 name="" 帶有name的表單在提交時纔會把表單值發送給服務器
都有 value=""
都有 readonly 只讀能夠提交給服務器
都有 disabled 禁用不會提交給服務器
required 是否必填，若是空值，不容許提交表單

<form action="服務器地址">

</form>

4. 行內樣式

<標籤 style="多個樣式"></標籤>

4.1 顏色控制

color:顏色值
顏色值能夠是英文單詞：red，blue，green，yellow, black, white
也能夠是紅綠藍三原色： rgb(255,0,0)
還能夠是16進制的值來表示： #FF0000

background-color: 背景色

4.2 字體相關的樣式

font-size 像素 n px; 字體自己大小 n em;
font-family 字體名稱：如宋體，隸書 ...
font-style: italic; 斜體
font-weight: bold; 粗體
文字修飾 text-decoration: 值(line-through 貫穿線， underline 下劃線)

4.3 對齊方式

text-align: center 居中， left 左對齊， right 右對齊

4.4 背景相關

background-image: url(背景圖片路徑)
background-repeat: 控制背景圖片如何重複 no-repeat(不重複) repeat-x repeat-y repeat(xy方向上都重複)
background-size: 110px 縮放背景圖大小

4.5 div 標籤

容器標籤，能夠容納其它標籤
<div>
<p>
<table>
...
</div>
做用：1）頁面佈局， 2) 統一處理

4.6 寬高

width: 寬度
height: 高度
單位能夠以像素爲單位 n px, 還能夠是百分比 n %(以父元素爲基準)

4.7 邊框

border-color: 顏色
border-style: 樣式（實線等）
border-width: 寬度
能夠把它們合併爲一個
border: blue solid 100%;
border-top 上邊框
border-right 右邊框
border-bottom 下邊框
border-left 左邊框
style="border-collapse: collapse" 去掉多餘的空隙

1. 內間距

標籤和內容之間的間隙，稱爲內間距
padding 能夠同時控制4個方向上的內間距
padding : 10px 10px 10px 10px;
上右下左

padding : 20px 5px;
上下左右

padding : 10px
上下左右

padding-top
padding-right
padding-bottom
padding-left

2. 外間距

同級標籤之間的間隙，稱爲外間距
margin: 10px 10px 10px 10px;
上右下左
margin :10px
上下左右
margin-top
margin-right
margin-bottom
margin-left

<body style="margin:0">去掉和網頁間的間隙

3. 盒子模型

外間距 --》邊框 --》內間距 --》內容

4. z-index

表明該元素在z軸的位置，數字越大越向外, 要配合絕對定位使用
position:absolute; left:x座標（向右）; top:y座標(向下)
絕對定位

rgba(紅, 綠, 藍, 透明度)
0~1 0 表示徹底透明， 1 表示不透明

5. 樣式表

重用樣式
格式：

<html>
  <head>  
    <style>
     樣式表
    </style>
  </head>
</html>

選擇器 { 樣式 }
首先使用選擇器去匹配標籤，匹配到的標籤就會應用{}之中的樣式

5.1 元素選擇器

根據標籤的名稱進行匹配
例如div 是匹配頁面中全部的div標籤，p匹配頁面中全部的p標籤 ...

5.2 class 選擇器

根據標籤的 class 屬性的值進行匹配

<p class="值">    
<td class="">    
<input class="">    
.class值 { 樣式 }

5.3 id選擇器

根據標籤的id屬性值進行匹配

<p id="值">
<td id="值">
<input id="值">   id的取值要惟一
#id值 {樣式  }

5.4 父子選擇器

父選擇器>子選擇器
最終選中的是子選擇器匹配的標籤，但必須知足條件：父標籤要和父選擇器匹配

5.5 後代選擇器

祖先選擇器後代選擇器

5.6 僞類選擇器

:hover 當鼠標懸浮在標籤之上，算匹配
:nth-child 看成爲第n個孩子元素, n從1開始
:last-child 看成爲最後一個孩子元素

5.7 選擇器的優先級

1) 當多個選擇器都匹配到同一個標籤時，會產生優先級問題：

!important > style行內樣式 > #id > .class > 元素

!important 用來提高某個樣式的優先級, 寫法：

樣式 !important

2) 子標籤能夠從父標籤繼承某個樣式，例如color
子標籤本身定義了同名樣式，那麼它會覆蓋父標籤的樣式

3) 同優先級別的選擇器，後定義的會覆蓋前面定義的

6. 在網頁之間重用樣式

須要用到外部樣式表，能夠把選擇器，樣式的定義放在一個 *.css 的文件當中（樣式表文件）
引入外部的樣式表：

<link rel="stylesheet" href="路徑/css文件名">

好處：能夠更大程度地在多個網頁間重用樣式，讓網站的風格統一

內部樣式表能夠實現本網頁特殊的樣式，採用覆蓋的方法，能夠覆蓋掉外部樣式表的樣式

相關標籤/搜索

htmlcss

HTML

CSS

每日一句

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