行内元素和块元素
<!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>
