為了寫頁(yè)面硬著頭皮上HTML，一切從0開(kāi)始，但愿我能OK!
【文本樣式】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 600px;
/*字體大小*/
font-size: 14px;
/*字體*/
font-family: "microsoft YaHei";
/*字體顏色，這個(gè)地方結(jié)尾帶分號(hào)就有值錯(cuò)誤*/
color:red;
/*行高*/
line-height:20px;
/*文本對(duì)齊方式 right-center-left*/
text-align: left;
/*首行縮進(jìn)2em/20px*/
text-indent: 2em;
/*文本著重 normal bold bolder 100-900*/
font-weight: bold;
/*文字傾斜 normal italic oblique*/
font-style: oblique;
/*文本修飾 none underline overline line-through*/
text-decoration:underline ;
/*字母間距 具體數(shù)值*/
letter-spacing: 2px;
/*單詞間距 空格為解析單位*/
word-spacing:10px;
}
em{
font-size: 14px;
font-family: "Arial";
color:green;
line-height: 16px;
}
a {
font-size: 14px;
word-spacing: 20px;
}
</style>
</head>
<body>
<div>喜歡養(yǎng)狗狗，但又覺(jué)得叫聲煩人又?jǐn)_民，于是直接把狗狗的聲帶切掉了，在人的私欲面前，一個(gè)寵物算什么？近日，在成都青白江花鳥(niǎo)市場(chǎng)內(nèi)的狗市區(qū)域，</div>
<!-- em標(biāo)簽中都是傾斜的 -->
<em>一位中年男子拉開(kāi)了一張桌子，當(dāng)街做起了狗狗聲帶切除手術(shù)，生意頗為火爆。網(wǎng)友將圖片上傳網(wǎng)絡(luò)之后，引發(fā)不小爭(zhēng)議</em>
<br>
<a>i miss you</a>
</body>
</html>
【常見(jiàn)標(biāo)簽】
1.title標(biāo)簽
<title>...</title>
2.div標(biāo)簽
<div>...</div>
3.h標(biāo)簽
<h>...</h>
默認(rèn)樣式：fon-size font-weight margin
4.p標(biāo)簽
<p>...</p>
使用于大段的文案
備注：p標(biāo)簽中不能包含塊元素的標(biāo)簽，比如title，div
5.ul標(biāo)簽
<ul>...</ul>
無(wú)需列表
6.li標(biāo)簽
<li>...</li>
<ul>
<li></li>
</ul>
7.ol列表
<ol>...</ol>
ul,ol的第一層子集一定是li，li的父級(jí)一定是ul或ol
有序列表
8.dl dt dd標(biāo)簽
dl 自定義列表
dt 列表標(biāo)題
dd 列表說(shuō)明
9.內(nèi)聯(lián)標(biāo)簽span
<span>...</span>
特性：
(1).同屬性的標(biāo)簽排在同一排
(2).內(nèi)容撐開(kāi)寬度
(3).不支持寬高限制，不支持上線的padding和margin
(4).代碼換行被解析為空格
10.內(nèi)聯(lián)標(biāo)簽strong
<strong>...</strong>
強(qiáng)調(diào)，類似與font-strong，權(quán)重比較高
11.內(nèi)聯(lián)標(biāo)簽em
<em>...</em>
斜體
12.內(nèi)聯(lián)標(biāo)簽a
<a target="_self">a標(biāo)簽當(dāng)前窗口跳轉(zhuǎn)</a>
13.群組選擇器
以逗號(hào)分隔標(biāo)簽名稱，用來(lái)給多個(gè)相同的標(biāo)簽定義相同的css樣式
div,h,title{
margin:0;
}
10.塊屬性的標(biāo)簽特性：
(1).默認(rèn)是父級(jí)100%的寬
(2).支持所有CSS的樣式
(3).獨(dú)占一行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標(biāo)簽的使用</title>
<link rel="stylesheet" href="css/1.css">
<style>
span {
border: 2px solid red;
}
</style>
</head>
<body>
<h1>h1標(biāo)簽</h1>
<h2>h2標(biāo)簽</h2>
<h3>h3標(biāo)簽</h3>
<ul>
<!-- 無(wú)序ul標(biāo)簽 -->
<li>我的li列表1</li>
<li>我的li列表1</li>
<li>我的li列表3</li>
<li>我的li列表4</li>
</ul>
<ol>
<!-- 有序ol標(biāo)簽 -->
<li>我的li列表1</li>
<li>我的li列表1</li>
<li>我的li列表3</li>
<li>我的li列表4</li>
</ol>
<ul>
<li>
<ul>測(cè)試</ul>
</li>
</ul>
<dl>
<!-- dl dt dd標(biāo)簽 -->
<dt>標(biāo)題1
<dd>標(biāo)題1說(shuō)明1</dd>
<dd>標(biāo)題1說(shuō)明2</dd>
</dt>
<dt>標(biāo)題2
<dd>標(biāo)題2說(shuō)明3</dd>
<dd>標(biāo)題2說(shuō)明4</dd>
</dt>
</dl>
<!-- 內(nèi)聯(lián)熟悉標(biāo)簽span,strong,em,a -->
<span>這是span1</span><span>這是span11</span>
<span>這是span2</span>
<span>這是span3</span>
<strong>這是strong</strong>
<em>這是em</em>
<br>
<a target="_self">a標(biāo)簽當(dāng)前窗口跳轉(zhuǎn)</a>
<br>
<a target="_blank">a標(biāo)簽新窗口跳轉(zhuǎn)</a>
<!-- 內(nèi)聯(lián)塊標(biāo)簽 -->
<img src="" alt="">
</body>
</html>
