HTML、CSS
文章目录
3.1 HTML概述
3.1.1 HTML是什么
HTML: <mark>超文本标记语言</mark>，是<mark>开发网页</mark>的<mark>最基础的语言</mark>
- 由W3C组织提供
- 使用html开发的网页文件，以".html"或".htm "（.shtml）为后缀
- 使用html开发的网页文件，由浏览器负责解析并执行（即显示在浏览器中）
关于HTML:
(1) HTML是一门标记(也叫做标签或元素)语言，不是编程语言
(2) HTML是一门标记语言，是利用标记来组织网页结构的
(3) HTML是文档的一种，例如：word pdf txt…
3.1.2 HTML的结构
1. 案例：编写我的第一个HTML网页, 并用浏览器打开
新建一个txt文档，将后缀名改为.html，代码实现如下：
<!DOCTYPE html>
<html>
<head>
<title>网页的标题</title>
</head>
<body>
Hello CGB1808...
</body>
</html>
例如：另存html文档时保存的编码为utf-8:
只要在html文档中添加一个meta标签，同时也指定保存的编码为utf-8即可解决乱码问题!!
<!DOCTYPE html>
<html>
<head>
<title>网页的标题</title>
<!-- 下面！！！ -->
<meta charset="utf-8" />
<!-- 上面！！！ -->
</head>
<body>
Hello CGB1808...
</body>
</html>
2. HTML结构详解
<!DOCTYPE HTML>文档声明, 用来声明HTML文档所遵循的HTML规范和版本
上面是html5.0的声明, 也是目前最常用的版本<head></head>头部分, 用来存放HTML文档的基本属性信息, 比如网页的标题, 文档使用的编码等, 这部分信息会被浏览器优先加载.<body></body>体部分, 用来存放网页可视化数据. 即真正的网页数据<title></title>声明网页的标题<meta charset="utf-8"/>用来通知浏览器使用哪一个编码来打开HTML文档, 这个编码一定要和文件保存时的编码保持一致, 才不会出现中文乱码问题.
3.1.3 HTML语法(了解)
1、html标签
HTML是一门标记语言，标记也叫做元素/标签，标签分为开始标签和结束标签。例如:
<body></body>
<table></table>
<form></form>
...
如果标签内没有内容要修饰，可以合并成一个自闭标签。例如:
<meta/> <br/> <hr/> <input/> <img/>等等
2、html属性
标签都可以具有属性，属性可以有多个，多个属性之间用空格隔开。例如：
<font size="7" color="red" face="华文琥珀">文本内容…</font>
提示：属性的值用单引号或双引号引起来，或者不用引号。<mark>通常使用双引号引起来</mark>。
3、html注释
注释格式：<!-- 注释内容 -->，注意html注释不能交叉嵌套，例如：
<!-- 下面声明了一个标题 -->
<h1>一级标题</h1>
4、html空格和换行
如何在网页中做一个空格或者做一个换行？
由于在网页中多个连续的空白字符会被当成一个空格来显示，所以
如果要做一个空格，可以用转义字符 来代替;
如果要做一个换行，可以用<br/>标签来代替;
<mark>提示：中文状态下的空格(全角空格)请使用: </mark>
文章目录
3.2 HTML标签
3.2.1 图像标签
img标签用于在网页中插入一幅图片
标签介绍：
<img src="img/1.jpg" width="70%" border="5px"/>
属性介绍：
属性：用来指定图片的url地址（即图片的所在路径）
width属性：指定图片的宽度，单位可以为px（像素）或者%（百分比）
height属性：指定图片的高度，单位可以为px（像素）或者%（百分比）
自己动手试一试~！
3.2.2 超链接
在HTML网页文档中，通过a标签可以创建一个超链接标签
1、用于创建指向另外一个文档的超链接（点击后可以跳转到另外一个文档），例如：
<a href="http://www.baidu.com" target="_blank">百度一下，你就不知道</a>
属性介绍：
href属性：用来指定点击超链接后将要跳转到的url地址
target属性：用来指定以何种方式打开超链，其常用取值为:
_self：默认值，在当前窗口打开超链接
_blank：在新的窗口中打开超链接
3.2.3 表格标签
1. 案例：在网页中插入一个表格
<table>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
<style> table,td{ border:1px solid #000;/* 设置边框 */ border-collapse:collapse;/* 设置边框合并 */ } table{ width:70%; /* 设置表格宽度 */ margin:0px auto;/* 设置表格居中 */ background:pink;/* 设置表格背景颜色 */ } td{ padding:10px;/* 设置单元格边框和内容之间的距离 */ } </style>
表格标签介绍
table – 用来定义一个表格
tr – 用来定义表格中的行
td – 用来定义表格中的单元格
th – 用来定义表头
练习：使用表格标签在网页中生成一个表格，如下图：
要求如下:
(1) 表格内容如下图, 并设置表格边框
(2) 设置单元格之间没有缝隙, 并设置单元格边框和内容之间的距离为5px
(3) 设置表格的背景颜色为pink, 并设置表格的宽度为70%
(4) 设置表格在网页中居中显示, 并为表格添加表头以及标题
3.2.4 表单标签 - <form>
<mark>表单的作用是向服务器发送数据</mark>。
浏览器向服务器发送数据的两种方式
思考：
如果浏览器在和服务器进行通信的过程中，需要向服务器提交一些数据，
比如在登陆时，需要向服务器提交用户名和密码，或者在百度搜索时，需要提交搜索的关键词汇，
这些数据浏览器是如何发送给服务器的？
-
<mark>通过超链接向服务器发送数据</mark>
其实就是
<mark>在超链接后面通过？拼接参数将数据带给服务器</mark>
<mark>参数和参数值之间用等号分隔</mark>，
参数可以有多个，<mark>多个参数之间用&分隔</mark>，并且<mark>参数的名字可以重复</mark>。
-
<mark>通过表单向服务器发送数据</mark>
其实里通过表单及表单项标签，用户可以通过表单项输入数据，通过提交表单向服务器发送数据。例如下图：
标签介绍：<form action="http://www.baidu.com" method="GET"></form>
属性介绍：
action必须存在的属性，<mark>用来指定表单提交的目的地地址</mark>。
（例如：将action的值指定为：http://www.baidu.com，就一位着，将来提交表单时，将会把表单中的数据提交给百度的服务器）
method可选属性，用来指定以何种方式来提交表单，如果不指定，默认是GET提交
（<mark>后面讲tomcat时候，http协议时候，再讲</mark>。）
- 提示1：在HTTP协议中规定了7种提交方式，其中5种都不常用，只用GET和POST。
- 提示2：只有使用表单，并且明确的指定了提交方式为POST时，才是POST提交，其他方式都是GET提交。
3.2.5 表单项标签
表单中可以有多个输入项，输入项必须有name属性才可以被提交，如果输入项没有name属性，则表单在提交时会忽略它
1、input元素
普通的文本输入框 - type=“text”
用户名: <input type="text" name="username" value="设置默认值"/>
例如：
密码输入框 - type=“password”
密码: <input type="password" name="password" value="设置默认值"/>
例如：
单选按钮(单选框) - type=“radio”
性别: <input type="radio" name="gender" value="man"/>男
<input type="radio" name="gender" value="woman" />女
属性介绍：
其中checked属性可以设置选项默认被选中
value用来指定选项被提交时的值, 如果不设置value, 选项被提交时, 值为on.
例如：
复选框 - type=“checkbox”
爱好: <input type="checkbox" name="like" value="lanqiu"/>篮球
<input type="checkbox" name="like" value="zuqiu"/>足球
属性介绍：
其中checked属性可以设置选项默认被选中
value属性用来指定选项被提交时的值, 如果不设置value, 选项被提交时, 值为on.
例如：
提交按钮 - type=“submit”
<input type="submit" value="按钮上显示的文本"> 用来提交表单用的
普通的按钮 - type=“button”
<input type="button" value="按钮上显示的文本">
普通按钮本身没有功能, 但是可以通过js来为按钮添加功能和行为.
2、textarea 多行文本输入区域
个人描述: <textarea name="description" cols="宽度" rows="高度">请输入个人描述..</textarea>
属性介绍：
cols属性：设置输入框宽度
rows属性：设置输入框高度
示例：
3、option 下拉选框：
城市:
<select name="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz" selected="selected">广州</option>
</select>
属性介绍：
其中selected属性用来设置该选项默认被选中
value属性用来设置选项被提交时的值
例如：
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> login out O(∩_∩)O~~ </title>
</head>
<style type="text/css"> table,td{ border:2px solid red;/* 设置边框 */ border-collapse:collapse;/* 设置边框合并 */ background: lightgrey; } table{ width:25%; /* 设置表格宽度 */ margin:0px auto;/* 设置表格居中 */ background:pink;/* 设置表格背景颜色 */ border-left: auto ; border-right: auto ; } td,th{ padding:5px;/* 设置单元格边框和内容之间的距离 */ } h1{ width:70%; /* 设置表格宽度 */ margin:5px auto;/* 设置表格居中 */ text-align: center; } </style>
<body>
<!-- 在网页中实现一个注册表单 -->
<h1>欢迎注册</h1>
<form action="#"> <!-- 地址由后台人员指定，现在不知道，先用#作为占位符 -->
<table>
<tr>
<td>用户名：</td><!-- 用户 -->
<td>
<input type="text" name="username">
</td>
</tr>
<tr>
<td>密码：</td> <!-- 密码 -->
<td>
<input type="password" name="password">
</td>
</tr>
<tr>
<td>性别：</td> <!-- 性别 -->
<td >
<input type="radio" name="gender">男
<input type="radio">女
</td>
</tr>
<tr>
<td>爱好：</td> <!-- 爱好 -->
<td>
<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox">排球
</td>
</tr>
<tr>
<td>城市：</td> <!-- 城市 -->
<td>
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
</td>
</tr>
<tr>
<td>自我描述：</td> <!-- 自我描述 -->
<td>
<textarea rows="5" cols="30" placeholder="请输入描述信息..."></textarea>
</td>
</tr>
<tr><!-- 用于提交表单 -->
<td colspan="2" style="text-align: center">
<!-- colspan：指定单元格横跨的列数 -->
<!-- rowspan：指定单元格横跨的行数 -->
<input type="submit" value="提交 ( ⊙ o ⊙ )！">
</td>
</tr>
</table>
</form>
</body>
</html>
结果
3.2.6 ∗∗∗表单细节问题∗∗∗
1、提交表单时，表单中的数据为什么没有被提交？
在表单中，每一个要提交数据的表单项标签都要具有name属性，例如：
<!-- 用户名 -->
<input type="text" name="username"/>
<!-- 密码 -->
<input type="password" name="pwd"/>
如果表单项标签没有name属性，在表单提交时，该项默认会被忽略。
2、如何让多个单选框只能有一个被选中？
设置这多个单选框的name属性值相同，如果name相同，这多个单选框就默认是一个组，一个组就只能选中一个选项。
<!-- 性别 -->
<input type="radio" name="gender"/>男
<input type="radio" name="gender"/>女
3、 为什么单选框、复选框选择后提交时的值都是on?
如果单选框或复选框没有设置value属性，选择任何一个选项最终提交的值都是on，这样服务器无法区分用户到底选择是什么选项。
因此我们需要通过value属性为单选框和复选框设置提交时的值，例如：
<!-- 性别 -->
<input type="radio" name="gender" value="male"/>男
<input type="radio" name="gender" value="female"/>女
<!-- 爱好 -->
<input type="checkbox" name="like" value="basketball"/>篮球
<input type="checkbox" name="like" value="football"/>足球
<input type="checkbox" name="like" value="velloyball"/>排球
4、如何设置单选框或复选框默认选中某一项?
只需要在单选框或复选框上面添加一个属性: checked=“checked”，例如：
单选框: <input type="radio" name="gender" value="female"
checked="checked"/>女
复选框: <input type="checkbox" name="like" value="football"
checked="checked"/>足球
5、如何设置下拉选框默认选中某一项?
如果不设置，下拉选框默认选中的第一个选项，可以通过selected="selected"属性设置某一项默认被选中，例如：
<select name="city"><!-- 下拉选框 -->
<option>北京</option><!-- 选项 -->
<option>上海</option>
<option selected="selected">广州</option>
<option>深圳</option>
6、 下拉选框中option选项上的value属性的作用是什么？
选中某一个option，在表单提交时，
- 如果
option上没有value属性，就提交option标签的内容； - 如果
option上有value属性，就提交value属性的值。
文章目录
3.3注册表单案例
使用表格标签、表单及表单项标签、图像标签等实现网站注册表单。
部分要求如下:
- 设置表格居中、边框颜色为2px red，背景颜色为lightgrey；
- 设置单元格边框和内容之间的距离为5px；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> login out O(∩_∩)O~~ </title>
</head>
<style type="text/css"> table,td{ border:2px solid red;/* 设置边框 */ border-collapse:collapse;/* 设置边框合并 */ background: lightgrey; } table{ width:25%; /* 设置表格宽度 */ margin:0px auto;/* 设置表格居中 */ background:pink;/* 设置表格背景颜色 */ border-left: auto ; border-right: auto ; } td,th{ padding:5px;/* 设置单元格边框和内容之间的距离 */ } h1{ width:70%; /* 设置表格宽度 */ margin:5px auto;/* 设置表格居中 */ text-align: center; } </style>
<body>
<!-- 在网页中实现一个注册表单 -->
<h1>欢迎注册</h1>
<form action="#"> <!-- 地址由后台人员指定，现在不知道，先用#作为占位符 -->
<table>
<tr>
<td>用户名：</td><!-- 用户 -->
<td>
<input type="text" name="username">
</td>
</tr>
<tr>
<td>密码：</td> <!-- 密码 -->
<td>
<input type="password" name="password">
</td>
</tr>
<tr>
<td>性别：</td> <!-- 性别 -->
<td >
<input type="radio" checked="checked" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
</td>
</tr>
<tr>
<td>爱好：</td> <!-- 爱好 -->
<td>
<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" name="hobby" checked="checked" value="football">足球
<input type="checkbox" name="hobby" value="velloyball">排球
</td>
</tr>
<tr>
<td>城市：</td> <!-- 城市 -->
<td>
<select name="city">
<option>北京</option>
<option>上海</option>
<option selected="selected">广州</option>
<option>深圳</option>
</select>
</td>
</tr>
<tr>
<td>自我描述：</td> <!-- 自我描述 -->
<td>
<textarea name="count" rows="5" cols="30" placeholder="请输入描述信息..." ></textarea>
</td>
</tr>
<tr><!-- 用于提交表单 -->
<td colspan="2" style="text-align: center">
<!-- colspan：指定单元格横跨的列数 -->
<!-- rowspan：指定单元格横跨的行数 -->
<input type="submit" value="提交 ( ⊙ o ⊙ )！">
</td>
</tr>
</table>
</form>
</body>
</html>
文章目录
3.4 CSS概述
3.4.1 什么是CSS？（了解）
CSS：(<mark>Cascading Style Sheets</mark>)层叠样式表，用来修饰、美化HTML网页的一门语言。
使用CSS来设置样式，可以将设置样式的CSS代码和展示数据的HTML代码进行分离。并且还可以实现代码的复用，增强网页的展示能力。
- html的作用: 通过html标签组织网页的结构
- css的作用: 渲染网页、美化网页
3.4.2 在HTML中引入CSS
方式1：通过style属性引入css
html的作用: 通过html标签组织网页的结构
css的作用: 渲染网页、美化网页
3.4.2在HTML中引入CSS
方式1：通过style属性引入css
大多数html标签都可以具有style属性，可以通过标签上的style属性为当前标签设置样式，例如：
方式2：通过style标签引入css
在head标签内部提供一个style标签，在style标签内部可以选中元素进行修饰，例如：
这种方式是将所有的css代码集中在一个style标签内部统一管理。初步实现了html代码和css代码的分离。实现了代码的复用（文件内部复用）。
推荐使用这种方式。
方式3：通过link链接引入外部的css文件
在head标签下添加一个link标签，link标签可以引入外部的css文件
文章目录
3.5CSS选择器
所谓的选择器就是能够在html中帮助我们选中元素进行修饰的一门技术。
3.5.1标签名选择器
根据标签(元素)的名称来选择指定名称的元素进行样式的修饰.
格式：标签名{ css属性… }
示例：
/* ----- 1.标签名选择器 -----
将所有span标签的背景颜色设置为#DDA0DD, 设置字体大小为24px，
字体加粗；*/
span{
background:#DDA0DD;
font-size:24px;
font-weight:bolder;
}
3.5.2 class选择器
通过标签上通用的属性class，
可以为标签指定所属的类(组)，
所有class值相同的元素则为一组(类)，
可以通过class属性的值选择这一组的标签，
为这一组的标签统一设置样式。
格式：<mark>.类名{ css属性… }</mark>
示例：
/* ----- 2.class类选择器 -----
(1)将所有的span（但是不包括div和p标签下的span）的背景颜色
设置为#b1eb0a, 字体颜色为#0b190b；
(2)将div下的span和内容为"span111"的span，背景颜色设置为
#f3db09、字体颜色设置blue； */
.c1{ /* 表示选中所有class值为c1的元素 */
background: #b1eb0a;
color: #0b190b;
}
.c2{ /* 表示选中所有class值为c2的元素 */
background:#f3db09;
color: blue;
}
另外，一个元素可以设置多个class值，表示当前元素同时属于多个分组。例如：
<span class="c1 c2">
span111
</span>
3.5.3 id选择器
通过标签上通用的属性id，可以为标签设置唯一的标识(ID的值在整个HTML中应该是独一无二的)，可以通过id值选中指定的元素。
格式：#id值{ css属性… }
/* ----- 3.id选择器 -----
用id选择器将第一个p标签设置字体大小为28px，字体颜色
为red, 首行文本缩进20px。 */
#p1{ /* 选中id为p1的元素 */
font-size:28px;
color: red;
text-indent: 20px;
}
3.5.4 后代选择器
选中父元素内部的指定后代元素
格式： 父选择器 后代元素{ css属性… }
示例：
/* ----- 4.后代选择器 -----
为p元素内部的所有span元素，设置字体大小为20px,字体颜色
为绿色,背景颜色为cyan; */
p span{/* 选中所有p元素内部的所有span元素 */
font-size: 20px;
color:green;
background: cyan;
}
3.5.5 属性选择器
根据属性条件选中元素进行修饰
格式: <mark>选择器[属性条件…] { css属性… }</mark>
示例:
/* ----- 5.属性选择器 -----
为所有的文本输入框，设置背景颜色为pink、字体大小
30px，首行缩进30px； */
input[type='text'][name='user']{
/* 匹配元素名为input的并且type的值为text的元素 */
background:pink;
font-size:30px;
text-indent:30px;
}
其中属性条件可以有多个, 多个属性条件放在多个方括号内部即可，例如，匹配所有的用户名输入框：
input[type='text'][name='username']{...}
文章目录
3.6 常用属性总结
3.6.1 文本属性
1. text-align 设置元素中文本水平对齐方式，其常用取值为:
left: 默认值。左对齐
right: 右对齐
center: 居中对齐
justify: 两端对齐
2.text-decoration：设置文本下划线，其常用取值为:
underline: 有下划线
none: 没有下划线
3.letter-spacing: 设置字符间隔/间距，其常用取值为:
normal
像素值
4.text-shadow: 设置字体阴影，其取值为:
像素值 像素值 像素值 颜色值
第一个值为阴影水平位移,
第二个值为阴影垂直位移,
第三个值为阴影扩散值,
第四个值为阴影颜色
3.6.2字体属性
font-size：设置字体大小
font-weight：设置字体粗细 bold、bolder、normal
font-family：设置字体，比如微软雅黑、黑体、楷体等
color：设置字体颜色
3.6.3背景属性
background-color：设置背景颜***ackground-image：设置背景图片，url('图片的路径');
background-repeat：设置或检索对象的背景图像是否及如何铺排
background-position：设置或检索对象的背景图像位置
3.6.4边框（border）
3.6.5其他属性
width：设置元素的宽度
height：设置元素的高度
border: 宽度 样式 颜色;
border用于设置元素的边框，可以同时设置边框的宽度、样式、颜色等
例如，设置div元素的边框为2像素、实线、红***order:2px solid red;
京公网安备 11010502036488号