学习网站
HTML 系列教程(有广告)
HTML(超文本标记语言) | MDN (mozilla.org)(英文不太友好)
1.HTML5 & CSS3
1.1HTML5表格
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table表格</title>
<style>
p {
text-align: center;
}
h1 {
text-align: center;
}
table {
margin: 0 auto;
border-collapse: collapse; /* 合并边框,使边框线条更精细 */
}
td {
text-align: center;
vertical-align: middle;
border: 1px solid black; /* 设置边框为 1 像素宽的实线黑线 */
}
</style>
</head>
<body>
<h1>三(1)班课程表</h1>
<p>2018学年度第一学期</p>
<!--输入文字用段落标签-->
<table border="1">
<tr>
<th> </th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr>
<td >早读<br>7:50 - 8:10</td>
<td >语文</td>
<td >数学</td>
<td >英语</td>
<td >语文</td>
<td >语文</td>
</tr>
<tr>
<td colspan="6">大课间 8:10 - 8:40</td>
</tr>
<tr>
<td>第一节<br><br>8:50 - 9:30</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td colspan="6">眼保健操 9:30 - 9:40</td>
</tr>
<tr>
<td>第二节<br><br>9:45 - 10:25</td>
<td>语文</td>
<td>体育</td>
<td>体育</td>
<td>语文</td>
<td>音乐</td>
</tr>
<tr>
<td>第三节<br><br>10:35 - 11:15</td>
<td>音乐</td>
<td>英语</td>
<td>数学</td>
<td>数学</td>
<td>体育</td>
</tr>
<tr>
<td colspan="6">午休 12:00 - 13:40</td>
<!-- colspan="6"横跨6列-->
</tr>
<tr>
<td>第四节<br><br>14:10 - 14:50</td>
<td>英语</td>
<td>科学</td>
<td>语文</td>
<td>科学</td>
<td>语文</td>
</tr>
<tr>
<td colspan="6">眼保健操 14:50 - 15:00</td>
</tr>
<tr>
<td>第五节<br><br>15:05 - 15:45</td>
<td>数学</td>
<td>语文</td>
<td>书法</td>
<td>美术</td>
<td>道德</td>
</tr>
<tr>
<td>第六节<br><br>15:55 - 16:35</td>
<td>少队</td>
<td>道德</td>
<td>美术</td>
<td>信息</td>
<td>综合</td>
</tr>
</table>
</body>
</html>
效果图:
注:<thead>
、<tbody> 和 <tfoot> 元素不会影响表格的布局,但有必要。
1.2HTML5表单
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form</title>
<p>入职申请表单</p>
</head>
<body>
<form action="">
<label for="name">名字:</label>
<input type="text" id="name" name="name"><br><br>
<label for="id_card">身份证号:</label>
<input type="number" id="id_card" name="id_card"><br><br>
<label for="photo">个人照片:</label>
<input type="file" id="photo" name="photo"><br><br>
<label for="address">住址:</label>
<input type="text" id="address" name="address" placeholder="请从地级市开始输入"><br><br>
<label for="birthdate">出生日期:</label>
<input type="date" id="birthdate" name="birthdate"><br><br>
<label for="yes">婚否:是: </label>
<input type="radio" id="yes" name="married">
<label for="no">否:</label>
<input type="radio" id="no" name="married">
<br><br>
<!--有for即可实现互斥-->
<label >已掌握的编程语言:</label>
<input type="checkbox" value="0" />C/C++
<input type="checkbox" value="1" checked=" true"/>Java
<input type="checkbox" value="2" />python<br><br>
<label for="introduction">自我介绍:</label>
<textarea id="introduction" name="introduction" rows="5"></textarea><br><br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</body>
</html>
效果图
1.3CSS3
语法
选择器 {
样式声明;
样式声明;
... ...
}
全局属性
局部属性优先全局属性
div.d.*6
空格有特殊作用
CSS外部引入<link>
-
几种 CSS 选择器 :
元素选择器(如
p
)、类选择器(如.class
)、ID 选择器(如#id
)、后代选择器(如div p
)、子选择器(如div > p
)、相邻兄弟选择器(如p + span
)、通用兄弟选择器(如p ~ span
)等。 -
CSS 的 3 种引入方式 :
- 内联样式,直接在 HTML 元素上添加
style
属性。 - 内部样式表,在
<head>
中使用<style>
标签。 - 外部样式表,通过
<link>
标签链接外部的 CSS 文件。
- 内联样式,直接在 HTML 元素上添加
-
CSS 中表示颜色 :
可以使用颜色名称(如
red
)、十六进制值(如#ff0000
)、RGB 值(如rgb(255,0,0)
)、RGBA 值(如rgba(255,0,0,0.5)
)等。 -
CSS 的基本语法格式 :
选择器 {
属性:
值;
}
-
CSS 的优先规则 :
ID 选择器的优先级高于类选择器,类选择器的优先级高于元素选择器;内联样式的优先级最高;后出现的样式会覆盖前面相同属性的样式(除非前面的样式优先级更高)。