HTML和CSS是WEB前端开发的必备技术，本部分对该部分常用方法进行总结。
一、HTML
- 概述
HTML：超文本标记语言
- 超文本：比普通文本更强大，可以添加各种样式。比如<p>标签表示段落，可以对其中的字体添加font样式。
- 标记语言：可以通过一些标签来对内容进行描述。比如<form>表示表格，<a>表示超链接，<img>表示图片。
主要作用
设计网页的基础，网页前端界面编写。语法规范
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22<!DOCTYPE html>
<!--
1.文档声明
2.根标签html
3.html文件主要包含头部很和体部分
头部分：主要用来放置一些页面信息
体部分：主要放置页面内容
4.通过标签来对内容进行描述，标签通常是由开始标签和结束标签组成
5.标签不区分大小写，官方建议使用小写
6.HTML是解释性语言，由浏览器解释现实
-->
<html>
<head>
<!-- mate指定网页配置信息 -->
<meta charset="utf-8" />
<!-- 指定网站标题 -->
<title>案例01</title>
</head>
<body>
Hello World!
</body>
</html>常用示例
文本、段落
1
2
3
4
5
6
7
8<!-- h后面数字范围1-6 -->
<h1> 标题1 </h1>
<!-- 水平分割线 -->
<hr/>
<!-- p段落标签 -->
<p>段落1</p>
<!-- font标签:常用属性，size取值范围1-7 -->
我要<font color="red" size="5">回家!!!</font>图片、超链接、列表
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42<!--
img常用属性：
src:图片路径
width:图片宽度
height:图片高度
alt:文件加载失败时的提示信息
-->
<!--
./代表的是当前类路径
../代表的是上一级路径
../../代表的是上上级路径
-->
<img src="../img/img01.jpg" width="244" height="163" alt="这张图片可能加载有问题">
<!--
ul 无序列表
li列表选项
type属性，小圆圈
-->
<ul>
<li>百度</li>
<li>新浪微博</li>
</ul>
<!--
ol 有序列表
li列表选项
常用属性：
type：指定序号的类型
start：从几开始，必须得写数字
-->
<!--
a:超链接标签
常用属性：
href:指定要跳转到的链接地址，需要加上http协议，如果访问本网站文件，可直接写路径
target: 以什么方式打开
_self:默认，在当前页打开
_blank:新起一个标签页打开页面
-->
<ol type="I">
<li><a href="http://www.baidu.com" target="_blank">百度</a></li>
<li>新浪微博</li>
</ol>表格
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28<!--
table
常用属性：
border:指定边框宽度
width:指定宽度
height:指定高度
bgcolor:背景色
align:对齐方式
tr标签
td标签
-->
<table border="1px" width="500px" bgcolor="yellow" align="center">
<tr bgcolor="blue" align="center">
<td>1</td>
<td>1</td>
</tr>
<tr>
<td bgcolor="red" align="center">2</td>
<td>2</td>
</tr>
</table>
<!--
表格的合并：
colspan:跨列
rowspan:跨行
表格也可嵌套操作
-->表单（前端开发中常用的标签）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49<!--表单提交标签form
action:提交的地址
method：提交的方式
input：
type：指定输入项的类型
text:文本
password:密码
radio:单选框
checkbox:复选框
file:上传文件
submit:提交按钮
button:普通按钮
reset:重置按钮
hidden:隐藏域
data:日期类型
tel:手机号
number:只允许输入数字
name：在表单提交的时候，当作参数的名称
id：给输入项去一个名字，以便于后期去找到并操作它
placeholder：指定输入默认提示信息
textarea:文本域，可以输入一段文本
cols:指定宽度
rows:指定高度
select:下拉列表
option:选择项
-->
<form action="demo05.html" method="post">
<!--隐藏域-->
<input type="hidden"/>
用户名：<input type="text" name="username" placeholder="请输入用户名"/><br/>
密码：<input type="password" name="password"/><br/>
确认密码：<input type="password" name="confirmPw"/><br/>
照片： <input type="file" name="file"/><br/>
性别： <input type="radio" name="sex"/>男<input type="radio" name="sex"/>女<br/>
爱好： <input type="checkbox" name="hobby"/>学习
<input type="checkbox" name="hobby"/>电影
<input type="checkbox" name="hobby"/>旅行
<br/>
择偶要求：<textarea cols="20" rows="4" name="soul"></textarea><br/>
出生日期：<input type="date"/><br/>
手机号：<input type="tel"/><br/>
籍贯：<select>
<option>北京</opt ion>
<option>深圳</option>
</select><br/>
<input type="submit" value="提交按钮"/>
<input type="button" value="普通按钮"/>
<input type="reset" value="重置按钮"/>
</form>框架镶嵌(frameset)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>框架</title>
</head>
<!--
如果使用frameset需要将body标签去掉
cols:按照列划分页面
rows:按照行划分页面
-->
<frameset rows="15%,*">
<frame src="demo01.html"/>
<frameset cols="15%,*">
<frame src="demo02.html"/>
<frame src="demo03.html"/>
</frameset>
</frameset>
</html>
二、CSS
CSS是用来美化页面的，通过CSS设置标签格式可以统一布局和样式。
- 概述
- HTML的块标签：
div：默认占一行，自动换行
span：内容显示在同一行 - CSS概述：
Cascading Style Sheets:层叠样式表
主要作用：用来美化HTML页面 - CSS的简单语法：
在style标签中，编写CSS内容，最好将style标签写在head标签中
- HTML的块标签：
- CSS选择器
CSS选择器：帮助找到要修饰的标签或者元素。常用的有以下三类：- 元素选择器：
元素的名称{
}属性名称1：属性的值; 属性名称2：属性的值; - ID选择器：（ID在整个页面中必须是唯一的）
#ID的名称{
}属性名称1：属性的值; 属性名称2：属性的值; - 类选择器：
以.开头
.类的名称{
}属性名称1：属性的值; 属性名称2：属性的值;
- 元素选择器：
- CSS引入方式
- 外部方式：通过<link rel=”stylesheet href=”style.css />引入CSS文件
- 内部方式：直接在页面的style标签里编写CSS代码
- 行内方式：如<div class=”shuiguo” style=”color=red;” />
- 额外
