HTML&CSS
基础概念
css决定页面样式、布局效果
html是关于内容部分
B/S 软件的结构
-
C/S Client Server 客户端
-
B/S Browser Server 浏览器
前端的开发流程
网页的组成部分
页面由三部分内容组成：
内容（结构）、表现、行为。
内容（结构），是我们在页面中可以看到的数据。我们称之为内容。一般内容 我们使用 html 技术来展示。
表现，指的是这些内容在页面上的展示形式。比如说。布局，颜色，大小等等。一般使用 CSS 技术实现。
行为，指的是页面中元素与输入设备交互的响应。一般使用 javascript 技术实现。
HTML
HTML简介
HTML：Hyper Text Markup Language （超文本标记语言）
HTML 通过标签来标记要显示的网页中的各个部分。
网页文件本身是一种文本文件，
通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容
（如：文字如何处理，画面如何安排，图片如何显示等）
创建HTML文件
创建一个web工程
在工程下创建一个HTML文件
选择浏览器执行页面
HTML 文件的书写规范
Html的代码注释：
<html> 表示整个 html 页面的开始
<head> 头信息
<title>标题</title>
</head>
<body> body 是页面的主体内容
页面主体内容
</body>
</html> 表示整个 html 页面的结束
HTML 标签介绍
- 标签的格式:
<标签名>封装的数据</标签名> - 标签名大小写不敏感。
- 标签拥有自己的属性。
i. 分为基本属性：bgcolor="red"
可以修改简单的样式效果
ii. 事件属性： onclick="alert('你好！');"
可以直接设置事件响应后的代码。 - 标签又分为，单标签和双标签。
i. 单标签格式： <标签名 /> (br 换行 hr水平线)
ii. 双标签格式: <标签名> ...封装的数据...</标签名>
- 标签的语法：
<!-- ①标签不能交叉嵌套 -->
正确：<div><span>早安，尚硅谷</span></div>
错误：<div><span>早安，尚硅谷</div></span> <hr />
<!-- ②标签必须正确关闭 -->
<!-- i.有文本内容的标签： -->
正确：<div>早安，尚硅谷</div>
错误：<div>早安，尚硅谷 <hr />
<!-- ii.没有文本内容的标签： -->
正确：<br />
错误：<br> <hr />
<!-- ③属性必须有值，属性值必须加引号 -->
正确：<font color="blue">早安，尚硅谷</font>
错误：<font color=blue>早安，尚硅谷</font>
错误：<font color>早安，尚硅谷</font> <hr />
<!-- ④注释不能嵌套 -->
正确：<!-- 注释内容 --> <br/>
错误：<!-- <!-- 这是错误的 html注释 --> -->
注意事项：
1.html中 代码不是很严谨。有时候标签不闭合，也不会报错。
常用标签介绍
font字体标签
<body>
<!-- 字体标签
font标签是字体标签,它可以用来修改 文本的字体,颜色,大小(尺寸)
color属性修改颜色
face属性修改字体
size属性修改文本大小
-->
<font color="red" face="宋体" size="7">我是字体标签</font> </body>
特殊字符（字符实体化）
- 常用的特殊字符
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |||
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ' | 撇号 | ' (IE不支持) | ' |
- 其他特殊字符
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| ￠ | 分 | ¢ | ¢ |
| £ | 镑 | £ | £ |
| ¥ | 日圆 | ¥ | ¥ |
| § | 节 | § | § |
| © | 版权 | © | © |
| ® | 注册商标 | ® | ® |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
标题标签
标题标签是 h1 到 h6
- h1 - h6 都是标题标签
- h1 最大
- h6 最小
- align 属性是对齐属性
- left 左对齐(默认)
- center 剧中
- right 右对齐
<body>
<h1 align="left">标题 1</h1>
<h2 align="center">标题 2</h2>
<h3 align="right">标题 3</h3>
<h4>标题 4</h4>
<h5>标题 5</h5> <h6>标题 6</h6>
<h7>标题 7</h7>
</body>
超链接
在网页中所有点击之后可以跳转的内容都是超链接。用的是a标签
- href属性设置连接的地址
- target属性设置哪个目标进行跳转
- _self 表示当前页面(默认值)
- _blank 表示打开新页面来进行跳转
<body>
<a href="http://www.baidu.com">百度</a><br/>
<a href="http://www.baidu.com" target="_self">百度</a><br/>
<a href="http://www.baidu.com" target="_blank">百度</a><br/>
</body>
列表标签
分类：无序列表、有序列表
- ul 是无序列表
- type属性可以修改列表项前面的符号
- li 是列表项
【使用无序列表方式，
把东北 F4，赵四，刘能，小沈阳，宋小宝，展示出来：】
<body>
<ul type="none">
<li>赵四</li>
<li>刘能</li>
<li>小沈阳</li>
<li>宋小宝</li>
</ul>
</body>
img 标签
img 标签可以在 html 页面上显示图片。
- img标签是图片标签,用来显示图片
- src属性可以设置图片的路径
- width属性设置图片的宽度
- height属性设置图片的高度
- border属性设置图片边框大小
- alt属性设置当指定路径找不到图片时,用来代替显示的文本内容
在 JavaSE中路径也分为相对路径和绝对路径.
相对路径:从工程名开始算
绝对路径:盘符:/目录/文件名
在 web中路径分为相对路径和绝对路径
相对路径:
. 表示当前文件所在的目录
.. 表示当前文件所在的上一级目录
文件名 表示当前文件所在目录的文件,相当于 ./文件名 ./ 可以省略
绝对路径:
正确格式是: http://ip:port/工程名/资源路径
错误格式是: 盘符:/目录/文件名
<body>
<img src="1.jpg" width="200" height="260" border="1" alt="图片找不到"/>
<img src="../2.jpg" width="200" height="260" />
<img src="../imgs/3.jpg" width="200" height="260" />
<img src="../imgs/4.jpg" width="200" height="260" />
<img src="../imgs/5.jpg" width="200" height="260" />
<img src="../imgs/6.jpg" width="200" height="260" />
</body>
表格标签
- table 标签是表格标签
- border 设置表格标签
- width 设置表格宽度
- height 设置表格高度
- align 设置表格相对于页面的对齐方式
- align="center" 是居中
- cellspacing 设置单元格间距
- tr 是行标签
- th 是表头标签
- td 是单元格标签。（因为在tr标签内，可以理解为当前行的列）
- align 设置单元格文本对齐方式
- b 是加粗标签
【
需求 1：做一个 带表头的 ，三行三列的表格，并显示边框
需求 2：修改表格的宽度，高度，表格的对齐方式，单元格间距。
】
<body>
<table align="center" border="1" width="300" height="300" cellspacing="0">
<tr>
<th>1.1</th>
<th>1.2</th>
<th>1.3</th>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
</body>
跨行跨列表格
- colspan 属性设置跨列
- rowspan 属性设置跨行
【
新建一个五行五列的表格
第一行第一列的单元格要跨两列
第二行第一列的单元格跨两行
第四行第四列的单元格跨两行两列
】
<body>
<table width="500" height="500" cellspacing="0" border="1">
<tr>
<td colspan="2">1.1</td>
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
</tr>
<tr>
<td rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
</tr>
<tr>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
<td>3.5</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
<td>4.3</td>
<td colspan="2" rowspan="2">4.4</td>
</tr>
<tr>
<td>5.1</td>
<td>5.2</td>
<td>5.3</td>
</tr>
</table>
</body>
框架标签（内嵌窗口）
ifarme 标签它可以在一个 html 页面上,打开一个小窗口,去加载一个单独的页面.
<body>
我是一个单独的完整的页面<br/><br/>
<!--
ifarme和 a标签组合使用的步骤:
1. 在 iframe标签中使用 name属性定义一个名称
2. 在 a标签的 target属性上设置 iframe的 name的属性值
-->
<iframe src="3.标题标签.html" width="500" height="400" name="abc"></iframe> <br/>
<ul>
<li><a href="0-标签语法.html" target="abc">0-标签语法.html</a></li>
<li><a href="1.font标签.html" target="abc">1.font标签.html</a></li>
<li><a href="2.特殊字符.html" target="abc">2.特殊字符.html</a></li>
<!-- 这里的0、1、2、3的html文件都是已经编写好了的文件-->
</ul>
</body>
点击下方那三个链接，可以在窗口框架当中 跳转 实现其中对应html文件
表单标签
表单显示
表单就是 html 页面中,用来收集用户信息的所有元素集合.然后把这些信息发送给服务器.
form标签就是表单
- input type=text 是文件输入框
- value设置默认显示内容
- 这里输入时如果点击Enter键，是删除了当前的文本，而不是换行
- input type=password 是密码输入框
- value设置默认显示内容
- input type=radio 是单选框
- name属性可以对其进行分组
- checked="checked"表示默认选中
- input type=checkbox 是复选框
- checked="checked"表示默认选中
- input type=reset 是重置按钮
- value属性修改按钮上的文本
- input type=submit 是提交按钮
- value属性修改按钮上的文本
- input type=button 是普通按钮
- value属性修改按钮上的文本
- input type=file 是文件上传域
- input type=hidden 是隐藏域:
（当我们要发送某些信息，而这些信息，不需要用户参与
就可以使用隐藏域（提交的 时候同时发送给服务器）） - select 标签是下拉列表框
- option 标签是下拉列表框中的选项
- selected="selected"设置默认选中
- textarea 表示多行文本输入框 （起始标签和结束标签中的内容是默认值）
- rows 属性设置可以显示几行的高度
- cols 属性设置每行可以显示几个字符宽度
【
创建一个个人信息注册的表单界面。
包含用户名，密码，确认密码。
性别（单选），兴趣爱好（多选），国籍（下 拉列表）。
隐藏域，自我评价（多行文本域）。重置，提交。
】
<body>
<form>
用户名称：<input type="text" value="默认值"/><br/>
用户密码：<input type="password" value="abc"/><br/>
确认密码：<input type="password" value="abc"/><br/>
性别：<input type="radio" name="sex"/>男<input type="radio" name="sex" checked="checked" />女<br/>
兴趣爱好：<input type="checkbox" checked="checked" />Java<input type="checkbox" />JavaScript<input
type="checkbox" />C++<br/>
国籍：
<select>
<option>--请选择国籍--</option>
<option selected="selected">中国</option>
<option>美国</option>
<option>小日本</option>
</select><br/>
自我评价：<textarea rows="10" cols="20">我才是默认值</textarea><br/>
<input type="reset" value="abc" />
<input type="submit"/>
</form>
</body>
表单格式化
利用 表格标签 将表单进行格式化，也就是将表单放入表格当中
<body>
<form>
<h1 align="center">用户注册</h1>
<table align="center">
<tr>
<td> 用户名称：</td>
<td><input type="text" value="默认值"/> </td>
</tr>
<tr>
<td> 用户密码：</td>
<td><input type="password" value="abc"/></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" value="abc"/></td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex"/>男
<input type="radio" name="sex" checked="checked" />女
</td>
</tr>
<tr>
<td> 兴趣爱好：</td>
<td>
<input type="checkbox" checked="checked" />Java
<input type="checkbox" />JavaScript
<input type="checkbox" />C++
</td>
</tr>
<tr>
<td>国籍：</td>
<td>
<select>
<option>--请选择国籍--</option>
<option selected="selected">中国</option>
<option>美国</option>
<option>小日本</option>
</select>
</td>
</tr>
<tr>
<td>自我评价：</td>
<td><textarea rows="10" cols="20">我才是默认值</textarea></td>
</tr>
<tr>
<td><input type="reset" /></td>
<td align="center"><input type="submit"/></td>
</tr>
</table>
</form>
</body>
表单提交
在form标签中
action属性设置提交的服务器地址
method属性设置提交的方式 GET(默认值)或 POST 表单提交的时候，数据没有发送给服务器的三种情况：
1、表单项没有 name属性值
2、单选、复选（下拉列表中的 option标签）都需要添加 value属性，以便发送给服务器
3、表单项不在提交的 form标签中
GET请求的特点是：
1、浏览器地址栏中的地址是：action属性[+?+请求参数] 请求参数的格式是：name=value&name=value
2、不安全
3、它有数据长度的限制
POST请求的特点是：
1、浏览器地址栏中只有 action属性值
2、相对于 GET请求要安全
3、理论上没有数据长度的限制
<body>
<formaction="http://localhost:8080" method="post">
<input type="hidden" name="action" value="login" />
<h1 align="center">用户注册</h1>
<table align="center">
<tr>
<td> 用户名称：</td>
<td><input type="text" name="username" value="默认值"/> </td>
</tr>
<tr>
<td> 用户密码：</td>
<td><input type="password" name="password" value="abc"/></td>
</tr>
</form>
</body>
其他标签
div、span、p标签：
- div标签 默认独占一行
- span标签 它的长度是封装数据的长度
- p段落标签 默认会在段落的上方或下方各空出一行来（如果已有就不再空）
<html>
<head>
<meta charset="UTF-8">
<title>其他标签</title>
</head>
<body>
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
<p>p段落标签1</p>
<p>p段落标签2</p>
</body>
</html>
样式图： 
CSS
基本概念
CSS介绍
CSS 是「层叠样式表单」。
是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言
CSS语法规则
- 选择器：浏览器根据“选择器”决定受 CSS 样式影响的 HTML 元素（标签）。
- 属性 (property) 是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并 由花括号包围，这样就组成了一个完整的样式声明（键值对）。
例如：p - 多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的 最后可以不加分号(但尽量在每条声明的末尾都加上分号)
例如：
p{
color : red;
font-size : 30px;
}
注：一般每行只描述一个属性
CSS 注释：/*注释内容*/
CSS 和 HTML 的结合方式
第一种 通过标签属性
在标签的style属性上设置”key:value value;”，修改标签样式。
【分别定义两个 div、span标签
分别修改每个 div 标签的样式为：
边框1个像素，实线，红色。】
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="border: 1px solid red;">div标签1</div>
<div style="border: 1px solid red;">div标签2</div>
<span style="border: 1px solid red;">span标签1</span>
<span style="border: 1px solid red;">span标签2</span>
</body>
</html>
问题：
-
如果标签多了。样式多了。代码量非常庞大。
-
可读性非常差。
-
代码复用性差。
第二种 通过head标签
在 head 标签中，使用 style 标签来定义各种自己需要的 css 样式。
格式如下：
xxx {
Key : value value;
}
xxx 是选择器
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--style标签专门用来定义css样式代码-->
<style type="text/css">
/* 分别定义两个 div、span标签，分别修改每个 div 标签的样式为：边框1个像素，实线，红色。*/
div{
border: 1px solid red;
}
span{
border: 1px solid red;
}
</style>
</head>
<body>
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>
问题：
- 只能在同一页面内复用代码
不能在多个页面中复用 css 代码。 - 维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了。
第三种 通过 .css 文件
- 在html文件同一目录下创建css文件
div{
border: 1px solid yellow;
}
span{
border: 1px solid red;
}
- 在html文件里面使用link标签引入css
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--link标签专门用来引入css样式代码-->
<link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body>
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>
CSS 选择器
标签名选择器
标签名选择器，可以决定哪些标签被动的使用这个样式。
格式：
标签名{
属性：值;
}
【
所有div标签上修改字体颜色为蓝色，
字体大小30个像素。
边框为1像素黄色实线。
所有span 标签的字体颜色为黄色，
字体大小20个像素。
边框为5像素蓝色虚线：
】
<html>
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
<style type="text/css">
div{
border: 1px solid yellow;
color: blue;
font-size: 30px;
}
span{
border: 5px dashed blue;
color: yellow;
font-size: 20px;
}
</style>
</head>
<body>
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>
id 选择器
id 选择器，可以让我们通过 id 属性选择性的去使用这个样式。
id 选择器不可以重复
- 先定义好id属性值的样式
- 在标签属性里声明 id 的值，使用该值对应样式
格式：
#id 属性值{
属性：值;
}
【
分别定义两个 div 标签，
第一个div 标签
定义 id 为 id001 ，
然后根据id 属性定义css样式修改字体颜色为蓝色，
字体大小30个像素
边框为1像素黄色实线。
第二个div 标签
定义 id 为 id002 ，
然后根据id 属性定义css样式 修改的字体颜色为红色，
字体大小20个像素。
边框为5像素蓝色点线：
】
<html>
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style type="text/css">
#id001{
color: blue;
font-size: 30px;
border: 1px yellow solid;
}
#id002{
color: red;
font-size: 20px;
border: 5px blue dotted ;
}
</style>
</head>
<body>
<div id="id002">div标签1</div>
<div id="id001">div标签2</div>
</body>
</html>
class选择器
class 类型选择器，可以通过 class 属性有效的选择性地去使用这个样式
- 先定义好 .class 属性值的样式
- 在标签属性里声明 class 的值，使用该值对应样式
格式：
.class 属性值{
属性：值;
}
【
修改 class 属性值为 class01的 span 或 div 标签
字体颜色为蓝色
字体大小30个像素
边框为1像素黄色实线。
修改 class 属性值为 class02的 div 标签
字体颜色为灰色
字体大小26个像素
边框为1像素红色实线。
】
<html>
<head>
<meta charset="UTF-8">
<title>class类型选择器</title>
<style type="text/css">
.class01{
color: blue;
font-size: 30px;
border: 1px solid yellow;
}
.class02{
color: grey;
font-size: 26px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="class01">div标签class01</div>
<div class="class02">div标签2</div>
<span class="class01">span标签class01</span>
<span class="class02">span标签2</span>
</body>
</html>
组合选择器
组合选择器可以 让多个选择器 共用同 一个 css 样式代码。
格式：
选择器 1，选择器 2，选择器 n{
属性：值;
}
【
修改 class="class01" 的div 标签 和 id="id01" 所有的span标签
字体颜色为蓝色
字体大小20个像素
边框为1像素黄色实线。
】
<html>
<head>
<meta charset="UTF-8">
<title>class类型选择器</title>
<style type="text/css">
.class01 , #id01{
color: blue;
font-size: 20px;
border: yellow 1px solid;
}
</style>
</head>
<body>
<div class="class01">div标签class01</div> <br />
<span id="id01">span 标签</span> <br />
<div>div标签</div> <br />
<div>div标签id01</div> <br />
</body>
</html>
CSS常用样式
-
字体颜色
color：red；
颜色可以写颜色名如：black, blue, red, green 等
颜色也可以写 rgb 值和十六进制表示值：如 rgb(255,0,0)，#00F6DE，如果写十六进制值必 须加#
浙公网安备 33010602011771号