我的IT夢——web前端開發之HTML,CSS（一）

最後更新：2017-07-30 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：length 取資料 after inpu hover checkbox sel 權重 www.

HTML

HTML全稱HyperText Markup Language（超文字標記語言 (HTML)）
標籤成對出現
<!DOCTYPE html> 文件類型定義
< > 標記||標籤
charset=UTF-8 字元編碼集，萬國碼
<head></head> 頭部
<body></body> 內容
 注釋
標題
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
無序排列
<ul>
    <li>第一項</li>
    <li>第二項</li>
    <li>第三項</li>
    <li>第四項</li>
</ul>
有序排列
<ol>
    <li>第一項</li>
    <li>第二項</li>
    <li>第三項</li>
    <li>第四項</li>
</ol>
定義列表
<dl>
<dt>第一項</dt>
<dd>第二項</dd>
</dl>
<p></p> 文章段落
<br/> 換行
&nbsp 空格
引用
<blockquote></blockquote>
<q></q>
超連結
<a href="" target=""></a>
插入圖片 <img src="圖片所在地址" alt="自己命名，方便尋找">
粗體
<strong></strong>（強調）
<b></b>
斜體
<em></em>
<i></i>
劃分區塊
<div></div>

HTML,CSS,JavaScript三者的關係

html 結構，決定網頁的結構和內容
css 表現（樣式），設定網頁的表現方式
Js 行為，控制網頁的行為

HTML標籤定義縮寫

<abbr title="Hyper Text Markup language">html</abbr>

定義“定義”對圖片的一個闡述

figure><img src="img/151209173849244246.jpg" alt="米奇"/><figcaption>米奇</figcaption></figure>

視頻

<video src="img/movie.mp4" controls autoplay loop></video>

音頻

<audio src="img/Mrbaluoke.wav" controls autoplay loop></audio>

表格

<table border="1"><caption>學生登記表</caption><tr>    <th>姓名</th>表頭    <th>年齡</th>    <th>班級</th>    <th>備忘</th></tr><tr>    <td>張三</td>    <td>6</td>    <td>1-1</td>    <td>無</td></tr><tr>    <td>李四</td>    <td>6</td>    <td>1-1</td>    <td>無</td></tr><tr>    <td>王五</td>    <td>7</td>    <td>2-1</td>    <td>無</td></tr><tr>    <td colspan="4">由XX學校</td></tr></table>

表單

action 提交的路徑地址 method 提交方式 get || post
<form action="#" method="post"></form>
文字框
<input type="text" placeholder="請輸入帳號" name="username"/>
密碼框
<input type="password" maxlength="6" name="user_password"/>
純情按鈕
<input type="button" value="搜尋"/>
提交按鈕
<input type="submit"/> <button>我是新的按鈕</button>
多選框
足球 <input type="checkbox" name="sport"/>
頭槌 <input type="checkbox" name="sport"/>
手球 <input type="checkbox" name="sport" checked/>
單選框
男 <input type="radio" name="sex"/>
女 <input type="radio" name="sex"/>
label for 一個 id id具有唯一性
<label for="football">足球</label>
<input type="checkbox" name="sport" id="football"/>
下拉框
<select name="" id="">
<option value="beijing">北京</option>
<option value="tianjing">天京</option>
<option value="dongjing">東京</option>
</select>
多行文字框
<textarea name="" id=""></textarea>
post 相對 get 更安全 id 具有唯一性對前台而言可快速找到元素、修改樣式等操作 name 對於後台擷取資料有用

內聯架構

 `<iframe src="http://www.baidu.com"  width="700" height="500" frameborder="0"></iframe>`

CSS文法規則選取器

{
聲明;
屬性:屬性值;
}

萬用字元

{
margin: 0;
padding: 0; }

標記||標籤||元素

h3{
color: #00D600;
font-size: 30px;
font-family: "黑體","Microsoft Yahei",sans-serif; }

id選取器

#test_h4_id{ color: blue; }

類別選取器複用

.test_class{ color: #eea236; }

屬性選取器

input[type="text"]{ border: 1px solid red; }

偽類別選取器

a 顏色 a:link{ color: #000; }
訪問後 a:visited{ color: #ccc; }
滑鼠移入||滑鼠移至上方 a:hover{ color: red; }
a點擊時一瞬間 a:active{ font-size: 20px; }

後代選取器

p span{ color: red;border: 1px solid red; }

子級選取器

p>span{ color: red; border: 1px solid red; }

並集選取器

h1,h2,h3,h4,h5,h6{ font-weight: normal; }

虛擬元素選取器

.testa:before{ content: "前前前"; }
.testa:after{ content: "反正有大把時光"; }
div{ width: 200px; border: 1px solid; }
div:first-letter{ font-size: 30px; }
div:first-line{ }

權重

！importent>style>id>class>元素>萬用字元

樣式繼承

子級的樣式不是顯示聲明，從父級繼承，但子級可以單獨聲明樣式不影響父級，文字的樣式會繼承。
不被繼承的：margin，padding，boeder，background

我的IT夢——web前端開發之HTML,CSS（一）

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More