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