1HTML概述
1.1 HTML概述
HTML(Hyper Text Markup Language): 超文本标记语言
超文本: 超级文本、超过文本(其中可以包含除了文本以外的其他数据,例如图片、音频、视频等各种格式)
标记:也叫标签、元素、节点等,就是用尖括号(<>)括起来的一组内容,例如:
<head> <body> <div> <span> <table>等
HTML是最基础的开发网页的语言。
HTML由W3C组织提供(CSS/xml)
关于HTML的细节:
(1)使用HTML开发的网页文件通常以 .htm或 .html 为后缀!
(2)使用HTML开发的网页文件由浏览器负责解析并显示(浏览器就是一个html解析器)
(3)HTML是文档的一种(txt/word/ppt/pdf等)
总结: HTML就是用于开发网页的一门语言!!
1.2 HTML的结构
1.2.1编写我的第一个HTML网页,并用浏览器打开
<!DOCTYPE html>
<html>
<head>
<title>网页的标题</title>
</head>
<body>
<h1>Hello CGB2003...</h1>
</body>
</html>
1.2.2HTML结构详解
(1) 文档声明, 用来声明HTML文档所遵循的HTML规范和版本
上面是html5.0的声明, 也是目前最常用的版本
(2) 根标签, 用于包裹所有的网页内容(除了文档声明)
(2) 头部分, 用来存放HTML文档的基本属性信息, 比如网页的标题, 文档使用的编码等, 这部分信息会被浏览器优先加载.
(3) 体部分, 用来存放可视化的网页内容. 即真正的网页数据
(4)
(5) 用来通知浏览器使用哪一个编码来打开HTML文档, 这个编码一定要和文件保存时的编码保持一致, 才不会出现中文乱码问题.
1.3 HTML语法
1.3.1 html标签
标签:也叫做标记、元素等,标签分为开始标签,例如:
<head>、<body>
和结束标签
</head>、</body>
开始标签和结束标签之间还可以包含其他内容
声明网页的标题 有些标签开始标签和结束标签之间没有内容要包裹,通常可以写成自闭标签,例如:<br/> <hr/> <input/> <img/> <link/>等
1.3.2 html属性
标签上可以声明多个属性,多个属性之间用空格分隔
标签上的属性的值可以使用单引号或者双引号引起来
<meta charset="UTF-8" id="m1">
<meta charset='UTF-8' id='m1'>
在标签上可以声明属性(属性不能独立存在,必须声明在标签上)
<div id="d1" class="c1" style="color:red;">这是一个div元素</div>
1.3.3 html注释
格式: <!-- 注释内容 -->
注释的作用: (1)为代码添加解释说明
(2)将一些暂时不需要执行的代码注释
浏览器对于html注释中的内容不会解析,也不会显示!
1.3.4 html空格和换行
浏览器中,多个连续的空白字符(空格、制表符tab、换行)会被浏览器显示为一个空格。那么:
如何在网页中做一个换行:可以使用 <br/>
标签做换行
如何在网页中做一个空格:可以使用
或 
做空格
补充: HTML中是不区分大小写的!
HTML中对语法要求非常不严格!(比如大小写混用,或者标签只有开始没有结束,或者标签的不合理嵌套),但是我们在书写HTML时要按照规范来写。
2 HTML概述
2.1 图像标签
通过img标签可以在网页中插入一副图像
<!--
不推荐写带盘符的绝对路径,因为将来项目发布,位置会改变,到时还要修改图片的路径
<img src="D:/JavaDevelop/WS_CGB2003_WEB/day05-htmlcss/WebContent/img/meinv.jpg"/>
-->
<!--
./: 表示当前目录(当前文件所在的目录),由于当前html在WebContent目录下
因此 ./叫表示WebContent目录, 另外 ./ 可以省略!
../: 表示当前目录的上一级目录里(也就是当前目录的父目录)
../../: 表示当前目录的上一级目录的上一级目录(也就是当前目录的父目录的父目录)
-->
<img src="./img/meinv.jpg" width="50%"/>
<img src="./img/lpx.jpg" width="50%"/>
其中src属性用于指定图片的路径(图片的路径不要是带盘符的绝对路径,推荐使用相对路径)
width属性用于指定图片的宽度
height属性用于指定图片的高度
2.2 超链接标签
超链接就是a标签,通过a标签可以在网页中创建指向另外一个文档的超链接
点击超链接可以跳转到另外一个网页(图片/下载路径等),示例:
<!-- 跳转到本地的一个网页 -->
<a href="01-第一个网页.html">01-第一个网页.html</a>
<!-- 跳转到百度首页 -->
<a href="http://www.baidu.com">百度一下,你就不知道</a>
<br/>
<!-- 点击图片跳转到tmooc -->
<a target="_blank" href="http://www.tmooc.cn">
<img alt="tmooc" src="imgs/tmooc.png" />
</a>
其中 href 属性用于指定点击超链接后将要跳转到的URL地址
target属性用于指定以何种方式打开超链接
_self:默认值, 表示在当前窗口中打开超链接
_blank:表示在新的窗口中打开超链接
2.3 表格标签
案例:在网页中插入一个3*3的表格
<h1>案例:在网页中插入一个3*3的表格</h1>
<table><!-- 用于在网页中定义一个表格 -->
<tr><!-- 用于定义一个表格行 -->
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
<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>
在浏览器中显示效果如下:
在head标签内添加如下内容:
<style>
/* style标签内只能书写css注释和css代码 */
table{
border:*2px solid red; /* 为表格添加边框 */
border-collapse: collapse; /* 设置边框合并 */
background-color: pink; /* 为表格设置背景颜色 */
width: 70%; /* 为表格设置宽度 */
/* margin-left: 15%; */
/* 设置表格的左外边距和右外边距自适应(保证两者始终相等) */
margin-left: auto;
margin-right: auto;
}
td,th{
border:2px solid red; /* 为单元格添加边框 */
border-collapse: *collapse*; /* 设置边框合并 */
padding: 5px; /* 设置单元格边框和内容的距离(内边距) */
}
h1{
/* border: 2px solid blue; */
text-align: *center*; /* 设置元素中的内容水平居中 */
}
</style>
再次刷新浏览器显示效果为:
2、表格标签介绍
table – 用于在网页中定义一个表格
tr – 用于定义表格中的行
td – 用于定义表格中的单元格
th – 用于定义表头行中的单元格(th中的文本默认居中,并且加粗)
2.4 表单标签
2.4.1 表单的作用: 用于向服务器提交数据
向服务器提交数据的两种方式:
(1)通过表单向服务器提交数据
表单中可以包含表单项标签,在表单项中可以填写数据(比如用户名、密码等),填写完成后通过提交表单,可以将表单中的数据提交给相应的服务器。
2)通过超链接向服务器提交数据
http://www.baidu.com?username=张三&pwd=123&like=篮球
<a href="http://www.baidu.com?username=张三&pwd=123&like=篮球" target="_blank">百度一下,你就不知道!</a>
在地址栏URL地址的后面通过问号(?)可以拼接参数,参数可以有多个,多个参数之间用&
分隔,参数还分为参数名(例如:username/pwd/like)以及参数值(例如:张三/123/篮球),在回车后访问百度服务器的同时,就可以将问号后面拼接的参数一并带给百度服务器。
2.4.2 表单项标签
1、input
元素:
(1)普通文本输入框(比如:用户名/昵称/邮箱/验证码等)
<input type="text" name="username"/>
(2)密码输入框(比如:密码/确认密码等)
<input type="password" name="pwd"/>
(3)单选框(比如:性别/部门等)
<input type="radio" name="gender"/>男
(4)复选框/多选框(比如:爱好/岗位等)
<input type="checkbox" name="like"/>
(5)普通按钮(比如:换一张图片)
<input type="button" value="换一张"/>
普通按钮本身没有功能,但我们可以通过js为按钮添加功能或添加行为
(6)提交按钮(比如:提交/注册/登录)
<input type="submit" value="提交/注册/登录"/>
提交按钮用于提交表单中的数据到服务器中!
2、select、option
标签:
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option selected="selected">广州</option>
<option>深圳</option>
</select>
select用于定义一个下拉选框
option用于定义下拉选框上的选项
selected设置当前option选项默认被选中
3、textarea
多行文本输入区域:
<textarea name="description" cols="30" rows="5"
placeholder="请输入描述信息..."></textarea>
cols属性: 用于设置文本输入框的列数(宽度)
rows属性: 用于设置文本输入框的行数(高度)
placeholder属性: 设置输入框中的提示消息!
2.4.3 表单细节问题
1、提交表单时,表单中的数据为什么没有被提交?
对于表单中的表单项标签,只要是需要向服务器提交数据,该表单项上必须添加name属性;如果表单项标签上没有name属性,在表单提交时,该项将会被忽略。例如:
<input type="text" name="username"/>
<input type="password" name="psw"/>
2、如何让多个单选框只能有一个被选中?
要求多个单选框必须具有相同的name属性值,如果多个单选框name属性值相同,则说明是一个组的内容,一个组中的单选框只能选择其中的一个!
<td>性别:</td>
<td>
<input type="radio" name="gender"/>男
<input type="radio" name="gender"/>女
</td>
3、为什么单选框、复选框选择某一项后提交的值都是on?
因为单选框、复选框只能选择,不同于用户名、密码输入框,可以输入内容。
因此我们需要通过value属性为单选框或复选框设置提交的值(如果不设置默认值都是on),例如:
<input type="radio" name="gender" value="male"/>男
<input type="radio" name="gender" value="female"/>女
4、如何设置单选框或复选框默认选中某一项?
可以在单选框或复选框标签上添加一个checked="checked"属性,就可以让当前单选框或复选框默认被选中。例如:
<input type="radio" checked="checked" name="gender" value="male"/>男
<input type="radio" name="gender" value="female"/>女
<!-- 爱好复选框/多选框 -->
<input type="checkbox" name="like" value="basketball"/>篮球
<input type="checkbox" checked="checked" name="like" value="football"/>足球
<input type="checkbox" name="like" value="volleyball"/>排球
5、如何设置下拉选框默认选中某一项?
在option标签上添加一个selected="selected"属性,可以让当前option选项默认被选中,例:
<select name="city">
<option>北京</option>
<option>上海</option>
<option selected="selected">广州</option>
<option>深圳</option>
</select>
6、下拉选框中option选项上的value属性的作用是什么?
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option selected="selected">广州</option>
<option>深圳</option>
</select>
如果某一个选项被选中,并且该选项上添加了value属性,在提交表单时,将会提交value属性的值。
如果某一个选项被选中,该选项上没有添加value属性,在提交表单时,将会提交标签中的内容
2.4.4 注册表单案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
/* style标签内只能书写css注释和css代码 */
table {
border: 2px solid red; /* 为表格添加边框 */
border-collapse: collapse; /* 设置边框合并 */
background-color: lightgrey; /* 为表格设置背景颜色 */
/* margin-left: 15%; */
/* 设置表格的左外边距和右外边距自适应(保证两者始终相等) */
margin-left: auto;
margin-right: auto;
}
td, th {
border: 2px solid red; /* 为单元格添加边框 */
border-collapse: collapse; /* 设置边框合并 */
padding: 5px; /* 设置单元格边框和内容的距离(内边距) */
}
h1 {
/* border: 2px solid blue; */
text-align: center; /* 设置元素中的内容水平居中 */
}
</style>
</head>
<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="pwd" /></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="like" value="basketball" />篮球
<input type="checkbox" checked="checked" name="like"
value="football" />足球 <input type="checkbox" name="like"
value="volleyball" />排球</td>
</tr>
<tr>
<!-- 城市下拉选框 -->
<td>城市:</td>
<td><select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option selected="selected">广州</option>
<option>深圳</option>
</select></td>
</tr>
<tr>
<!-- 自我描述 多行文本输入框 -->
<td>自我描述:</td>
<td><textarea name="description" cols="30" rows="5"
placeholder="请输入描述信息..."></textarea></td>
</tr>
<tr>
<!-- 提交按钮 -->
<!-- colspan: 设置单元格横跨的列数 -->
<td colspan="2" style="text-align: center;"><input
type="submit" value="提交" /></td>
</tr>
</table>
</form>
</body>
</html>
2 CSS概述
2.1 什么是CSS?
CSS: 层叠样式表,用于修饰、渲染网页的一门技术
使用css样式修饰网页,可以实现将设置样式的css代码和展示数据的html代码进行分离,增强了网页的展示能力。
2.2 在HTML中引入CSS
方式1:通过style属性引入css(不推荐)
<!--
1.通过标签上的style属性给div设置样式
边框:2px solid red
字体大小:26px
背景颜色为:pink
-->
<div style="border:2px solid red;font-size:26px; background:pink;">这是一个div...</div>
由于上面这种方式是将css样式代码,直接写在标签上的style属性内部,如果属性太多,容易造成页面结构的混乱,不利于后期的维护。
将样式代码写在标签上,样式代码只对当前标签生效,代码无法复用!
并且使用这种方式无法将html标签和css样式进行分离!
因此不推荐使用这种方式!(这种通过style属性添加的样式,叫做行内样式/内联样式)
方式2:通过style标签引入css
在head标签内部可以添加一个style标签,在style标签内部可以直接书写css样式
这种方式是将所有的css样式代码集中在一个style标签内部统一管理,这种方式不会造成页面结构的混乱,并且可以实现代码的复用!
初步的实现了将html标签代码和css样式代码进行了分离!
代码示例 :
<!-- 2.通过style标签给span设置样式如下:
边框: 2px solid green
字体大小: 30px
字体加粗
-->
<head>
<meta charset="utf-8">
<style type="text/css">
/* ****** CSS样式 ****** */
span{ /* 为当前html中的所有span标签设置样式 */
border:2px solid green;
font-size:30px;
font-weight:bolder; /* bold/bolder */
}
</style>
</head>
方式3:通过link链接引入外部的css文件
在head标签内部,通过一个link标签可以引入外部的CSS文件
这种方式是将所有的css代码集中在一个单独的css文件中统一管理,真正的实现了将css代码和html代码的分离,实现了代码的复用。
代码示例:html中引入demo.css文件
<!-- 3.通过link标签引入外部的css文件,为p元素设置样式如下:
边框: 2px solid blue;
字体颜色:red
字体设置为华文琥珀
设置首行文本缩进50px
-->
<!-- 引入demo.css文件(中的样式) -->
<link rel="stylesheet" href="demo.css" />
demo.css文件
@charset "UTF-8";
p{
border: 2px solid blue;
color: red;
font-family: "华文琥珀";
text-indent: 50px;
}
3 CSS选择器
所谓的选择器就是能够在html中帮助我们选中元素进行修饰的一门技术
3.1标签名选择器
通过元素名称(或标签名称)选中指定名称的所有标签
格式: 元素名/标签名{ css样式… }
/* ----- 1.标签名选择器练习 -----
将所有span标签的背景颜色设置为#efbdef, 设置字体大小为22px,字体加粗;*/
span{ /* 选中所有的span元素 */
background-color:#efbdef;
font-size: 22px;
font-weight: bolder;
}
3.2class选择器
可以为元素添加一个通用的属性 – class,通过class属性为元素设置所属的组,class值相同的元素则为一组。通过class值可以选中这一组的元素,为元素添加样式。
格式:.class值{ css样式… }
实例:
/* ----- 2.类选择器练习 -----
(1)将所有的span(但是不包括div和p标签下的span)的背景颜色设置为#faf77b,边框改为2px solid cyan;
(2)将div下的span和内容为"span111"的span,背景颜色设置为#5eff1e、字体颜色设置
#ec0e7e;*/
.s1{ /* 选中所有class值为s1的元素 */
background: #faf77b;
border: 2px solid cyan;
}
.s2{ /* 选中所有class值为s2的元素 */
background: #5eff1e;
color: #ec0e7e;
}
另外,一个元素也可以设置多个class值,多个class值中间用空格分隔,例如:
<span class="s1 s2" >span111</span>
表示当前元素同时属于多个分组,多个分组上设置的样式也会同时作用在当前元素上。
如果多个分组设置了相同的样式(但是值不一样),样式会发生冲突,写在后面的样式会覆盖前面的样式!
内容补充:选择器优先级顺序:
(1)如果是同一类选择器,同时给某些元素设置了样式,如果样式冲突了,那么写在后面的样式会覆盖前面的样式。
(2)如果是不同的选择器,设置的样式优先级顺序是:id选择器(100) > 类选择器(10) > 元素名选择器(1)
3.3id选择器
通过标签上通用的属性id,可以为标签设置一个独一无二的编号(id值应该是唯一的),通过id值可以唯一的选中一个元素。
格式:#id值{ css样式 }
/* ----- 3.id选择器练习 -----
用id选择器将第一个p标签设置字体大小为24px,字体颜色为#a06649, 首行文本缩进20px。*/
#p1{ /* 选中id值为p1的元素 */
font-size:24px;
color: #a06649;
text-indent: 20px;
}
<p id="p1">这是一个p元素!!!</p>
3.4后代选择器
选中指定元素内部的指定后代元素
格式: 祖先 后代{ css样式… }
/* ----- 4.后代选择器练习 -----
为p元素内部的所有span元素,设置字体大小为18px,字体颜色为红色,背景颜色为pink;*/
p span{ /* 匹配所有p元素内部的所有span元素 */
font-size:18px;
color: red;
background: pink;
}
/* p,span{} 匹配所有的p元素和所有的span元素 */
<p id="p1">
这是一个p元素!!!
<span>这是一个span元素!!!</span>
</p>
3.5属性选择器
在选择器选中元素的基础上,根据元素的属性条件筛选/过滤元素
格式:选择器[属性条件1][属性条件2]
…{ css样式 }
/* ----- 5.属性选择器 -----
为所有的文本输入框,设置背景颜色为#FF7CCC、字体大小22px,首行文本缩进15px;*/
input[type='text']{ /* 匹配所有的input并且type值为text的元素 */
background: #FF7CCC;
font-size: 22px;
text-indent: 15px;
}
input[type='text'][name='email']{
/* 选中所有的input并且type值为text、并且name为email的元素 */
background : yellow;
}
4 常用属性总结
4.1 文本属性
1、text-align
:设置元素内的文本水平对齐方式,其常用取值为:
left: 默认值。左对齐
right: 右对齐
center: 居中对齐
justify: 两端对齐
2、text-decoration
:设置文本的下划线样式,其常用取值为:
underline: 有下划线
none: 没有下划线
3、text-indent
:设置文本首行缩进,单位: 像素/百分比
4、letter-spacing
:设置字符间隔/间距,其常用取值为:
normal
像素值
5、text-shadow
:设置字体阴影,其取值为:
像素值 像素值 像素值 颜色值
第一个值为阴影水平位移,第二个值为阴影垂直位移,第三个值为阴影扩散值,第四个值为阴影颜色
4.2 字体属性
font-size
:设置字体大小
font-weight
:设置字体粗细 normal、bold、bolder 100/200/300…/900
font-family
:设置字体,比如微软雅黑、黑体、楷体等
color
:设置字体颜色
4.3 背景属性
background-color
:设置背景颜色
background-image
:设置背景图片,url(‘图片的路径’);
background-repeat
:设置或检索对象的背景图片是否及如何排列,常用取值:
repeat(默认值,重复排列)
repeat-x(横向重复排列,但纵向不重复)
repaet-y(纵向重复排列,但横向不重复)
no-repeat(不重复)
background-position
:设置或检索对象的背景图片位置
background
: 背景颜色 背景图片 背景图片是否重复 背景图片的位置
4.4 边框(border)
border:2px solid red; – 设置元素的边框(可以同时设置边框的宽度、样式、颜色)
border属性可以拆分为如下设置:
border-width: 2px; -- 设置元素边框的宽度
border-style: solid; -- 设置元素边框的样式
border-color: red; -- 设置元素边框的颜色
其中border-width、border-style、border-color也可以按照上右下左方向进行拆分,以border-width为例:
border-top-width: 2px; -- 设置上边框的宽度
border-left-width: 2px; -- 设置左边框的宽度
border-right-width: 2px; -- 设置右边框的宽度
border-bottom-width: 2px; -- 设置下边框的宽度
4.5 其他属性
width:设置元素的宽度
height:设置元素的高
margin: 设置元素的外边距
margin-top: 10px; -- 设置元素的上外边距为10px;
margin-right: 20px; -- 设置元素的右外边距为20px;
margin-bottom: 30px; -- 设置元素的下外边距为30px;
margin-left: 40px; -- 设置元素的左外边距是40px;
---------------------------------------------
margin: 10px 20px 30px 40px; -- 上 右 下 左, 顺时针方向对应
margin: 10px 20px 30px; -- 上 左右 下
margin: 10px 20px; -- 上下 左右
margin: 10px; -- 上下左右都是10px;
4.6 补充: 颜色设置
颜色取值方式常见的方式有三种:
方式一:设置颜色名,例如:
red、green、blue、yellow、cyan、pink、white、black等
方式二:设置#加上六位的十六进制数值
#FF0000(red)、#00FF00(green)、#0000FF(blue)、#FFFF00(yellow)、#00FFFF(cyan)等
方式三:设置rgb颜色值 ( 课间休息:14:46-15:06 )
rgb(255,0,0) 、rgb(0,255,0) 、rgb(0,0,255) 、rgb(255,255,0) 、rgb(0,255,255) 等
(red) (green) (blue) (yellow) (cyan)
5 网页开发实战
完成JT项目中的登录页面!
完成JT项目中的注册页面!(选作!)
注册页面视频:https://www.bilibili.com/video/BV16K4y1x7wX
6 扩展内容
6.1 display属性
display用来设置元素的类型,常用取值:
block:块级元素的默认值
默认情况下独占一行
可以设置宽高
inline:行内元素的默认值
默认情况下多个行内元素可以处在同一行
一般不能设置宽高
inline-block:行内块元素
多个元素既可以显示在同一行, 也可以设置宽和高
none:表示隐藏元素
6.2 元素类型(了解)
div/span/p 都是一个容器标签,用于包裹其他内容(这些元素本身不具备太多的样式!)
p: 块级元素,默认独占一行,用于包裹一段文本(写文章时用于p标签包裹每一段内容)
div: 块级元素,默认独占一行,用于包裹其他内容,将样式设置在div上,就可以作用在div的内容上。
span:行内元素,默认可以和其他元素显示在同一行。
(1)块级元素(block)
默认情况下,块级元素独占一行
可以设置宽和高,如果设置了就是设置的宽和高
如果不设置宽和高,其中宽是默认填满父元素,而高是由内容决定(由内容支撑)
比如: div/p/h1~h6/form/table 等元素都是块级元素
(2)行内元素(inline)
默认情况下,多个行内元素可以处在同一行
不能设置宽和高
比如: span/input/img/i/b 等元素都是行内元素
(3)行内块元素(inline-block)
既具备行内元素的特征(可以同行显示),还具备块级元素的特征(可以设置宽和高)