行內元素和塊元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
塊元素：獨佔一行，可以設置寬高
h1~h6 p br div
行內元素：不獨佔一行，不可以設置寬高，寬高由內容撐開
<span></span>
<b></b>
<strong></strong>
<i></i>
<em></em>
<s></s>
<del></del>
<u></u>
<ins></ins>
<a href=""></a>
<img src="" alt="">
-->
</body>
</html>
有序列表和無序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 有序列表 -->
<!-- type="I"
type="a"
type="A" -->
<ol type="I">
<li>中國</li>
<li>美國</li>
<li>英國</li>
<li>法國</li>
<li>韓國</li>
</ol>
<!-- 無序列表 -->
<!-- type="square" 黑色方形 -->
<!-- type="circle" 空心圓形 -->
<ul type="square">
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
</ul>
</body>
</html>
表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
td{
text-align: center;
}
</style>
</head>
<body>
<!-- 表格裏面的標籤
table 表格
caption 表格標題
tr 行
th 表頭 （列）
td 普通單元格（列）
-->
<!-- 表格裏面的屬性
border="1" 邊框
cellspacing="0" 合併單元格之間的距離
cellpadding="10" 內容和邊框之間的距離（內邊距）
bgcolor="skyblue" 背景色
borderColor="green" 邊框顏色
align="center" 表格居中
width="400" 表格整體寬度
height="360" 表格整體高度
colspan="2" 列合併
rowspan="2" 行合併
-->
<!-- 表格 -->
<table border="1" cellspacing="0" cellpadding="10" bgcolor="skyblue" borderColor="green" align="center" width="400" height="360">
<caption>班級信息統計表</caption>
<tr>
<th>序號</th>
<th>姓名</th>
<th>年齡</th>
<th>班級</th>
</tr>
<tr>
<td>1</td>
<td>張三</td>
<td colspan="2">13</td>
</tr>
<tr>
<td rowspan="2">2</td>
<td>李四</td>
<td>14</td>
<td>11</td>
</tr>
<tr>
<td>李四</td>
<td>14</td>
<td>11</td>
</tr>
<tr>
<td>4</td>
<td>李四</td>
<td>14</td>
<td>11</td>
</tr>
<tr>
<td>5</td>
<td>李四</td>
<td>14</td>
<td>11</td>
</tr>
<tr>
<td>備註:</td>
<td colspan="3"></td>
</tr>
</table>
</body>
</html>
css的引入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/外聯樣式.css">
<style>
div{
color:yellow;
/*如果樣式衝突，先引入後定義的樣式*/
}
</style>
</head>
<body>
<!-- html 是結構層
css 是表現層 層疊樣式表 -->
<!-- 第一種引入方式：行內樣式 不推薦使用，結構不明確，容易混亂-->
<p style="color:red;font-size: 32px;">hello word</p>
<!-- 第二種引入方式：內聯樣式 推薦使用，適合寫作業，小練習 -->
<div>hello word</div>
<span>hello word</span>
<!-- 第三種引入方式：外聯樣式 推薦使用，適合寫項目-->
<h1>標題標籤</h1>
<!--分屏快捷鍵 shift+alt+2 恢復一屏 shift+alt+1-->
<!-- 這三種引入方式。
行內樣式優先級最好
其餘引入方式遵循就近原則
-->
</body>
</html>
css的寬高以及字體樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: #f00;
/*計算機裏面的所有標點符號都是英文狀態下的*/
/*px是像素的意思*/
font-size: 100px;
/*默認字體大小是16px;*/
/*字體最小可以設置爲9px*/
/*字體最大可以無限大*/
font-family: '方正古隸簡體','微軟雅黑';
/*字體風格*/
font-weight: bold;
/*字體加粗*/
font-style: italic;
/*字體傾斜*/
}
</style>
</head>
<body>
<div>hello word</div>
</body>
</html>
