Java-Html

一、网页简史
二、HTML
- 2.1 html简介
- 2.2 标签介绍以及应用
三、css语法与选择器
- 3.1css语法规则
- 3.2 选择器
四、引用文档CSS语法与选择器

本章学习目标程度：了解

一、网页简史

蒂姆-博纳森-万维网发明人1991年。
按照标签来写网页，但是还没有一个规范。
浏览器与网页：浏览中所显示的内容就是网页。
浏览的问题：市面上浏览器不同，底层内核不同，可能渲染出的效果不同。HTML5的标准。
W3C的建立：编写网页需要遵循的规范。
页面由三部分内容组成：分别是内容（结构）、表现、行为。

内容（结构），是我们在页面中可以看到的数据。我们称之为内容。一般内容我们使用 html 技术来展示。
表现，指的是这些内容在页面上的展示形式。比如说。布局，颜色，大小等等。一般使用
CSS 技术实现行为，指的是页面中元素与输入设备交互的响应。一般使用 javascript 技术实现。
二、HTML
2.1 html简介

Hyper Text Markup Language （超文本标记语言）
HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）
Java 文件是需要先编译，再由java 虚拟机跑起来。但HTML 文件它不需要编译，直接由浏览器进行解析执行。

2.2 标签介绍以及应用

html 代码不是很严谨。有时候标签不闭合，也不会报错。
常用标签介绍文档：w3cschool.CHM

我是字体标签

<!--
<!DOCTYPE html> html5的声明
<html lang="en"> 声明整个网页
<head> 表示网页的头部
<body> 表示网页的身体 网页的主体内容全部都定义在body中
<h1>网页的标题</h1> 网页的标题
<hr> 分割线
<img src="../jpg/11.jpg"> 用于嵌入图片
<table> 表示的是表格
<tr>一行
<td>一列
<input type="text"> 文本输入框
<input type="password"> 密码输入框
<input type="radio" name="sex"> 单选框，单选框必须要用name属性对其进行分组
<input type="checkbox" name="hobby"> 多选框
<input type="button" name="hobby"> 普通按钮
<input type="submit" name="hobby"> 表单提交按钮
<form> 用于访问某一个资源，可以提交对应的数据
<br> 换行
<select> 下拉列表框
<option> 下拉项
-->
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>开发的第一个网页</title>
</head>
<body>
<h1>标题一</h1>
<h2>标题二</h2>
<hr>
<!--按像素设置边框-->
<table border="1px">
 <tr>
     <td>111</td>
     <td>222</td>
     <td>2223</td>
     <td><input type="text"></td>
 </tr>
 <tr>
     <td>3</td>
     <td>4</td>
     <td><input type="button" name="check" > 普通按钮</td>
<!--注意文本输入框也需要用<td>括起来，不然格式会乱-->
     <td><input type="text"></td>
 </tr>
 <tr>
     <td>5</td>
     <td>6</td>
     <td><input type="submit" name="hobby"> 表单提交按钮</td>
     <td><input type="text"></td>>
 </tr>
 <tr>
<!-- 单选框-->
     <td> 男：<input type="radio" name="sex">女：<input type="radio" name="sex"></td>
<!--多选框-->
     <td>爱好：
         唱<input type="checkbox" name="hobby">
         rap<input type="checkbox" name="hobby">
         篮球<input type="checkbox" name="hobby">
     </td>
<!--下拉列表框-->
     <td>
         <select>
             <option>--请选择--</option>
             <option>--亚瑟--</option>
             <option>--后裔--</option>
             <option>--安其拉--</option>
         </select>
     </td>
     <td><input type="text"></td>>
     </td>
 </tr>
</table>
</body>
</html>

超链接（重点

在网页中所有点击之后可以跳转的内容都是超连接

需求 1：普通的 超连接。 
<body> 
<!-- a 标签是 超链接 
href 属性设置连接的地址 
target 属性设置哪个目标进行跳转 
_self 
表示当前页面(默认值) 
_blank 
表示打开新页面来进行跳转 
-->
<a href="http://localhost:8080">百度</a><br/> 
<a href="http://localhost:8080" target="_self">百度_self</a><br/> 
<a href="http://localhost:8080" target="_blank">百度_blank</a><br/> 
</body>

img标签

使用 img 标签显示一张美女的照片。并修改宽高，和边框属性 
<body> 
<!--需求 1：使用 img 标签显示一张美女的照片。并修改宽高，和边框属性 
img 标签是图片标签,用来显示图片 
src 属性可以设置图片的路径 
width 属性设置图片的宽度 
height 属性设置图片的高度 
border 属性设置图片边框大小 
alt 属性设置当指定路径找不到图片时,用来代替显示的文本内容在 JavaSE 中路径也分为相对路径和绝对路径. 
相对路径:从工程名开始算 
绝对路径:盘符:/目录/文件名 
在 web 中路径分为相对路径和绝对路径两种 
相对路径: 
. 
表示当前文件所在的目录 
.. 
表示当前文件所在的上一级目录 
文件名 
表示当前文件所在目录的文件,相当于 ./文件名 
./ 可以省略 
绝对路径: 
正确格式是: http://ip:port/工程名/资源路径 
错误格式是: 盘符:/目录/文件名 
--> 
<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>

列表标签

无序列表、有序列表

需求 1：使用无序，列表方式，把东北 F4，赵四，刘能，小沈阳，宋小宝，展示出来 
<body> 
<!--需求 1：使用无序，列表方式，把东北 F4，赵四，刘能，小沈阳，宋小宝，展示出来 
ul 是无序列表 
type 属性可以修改列表项前面的符号 
li 是列表项 
--> 
<ul type="none"> 
<li>赵四</li> 
<li>刘能</li> 
<li>小沈阳</li> 
<li>宋小宝</li> 
</ul> 
</body>

表格标签（重点）

需求 1：做一个 带表头的 ，三行，三列的表格，并显示边框 
需求 2：修改表格的宽度，高度，表格的对齐方式，单元格间距。 
<body> 
<!--
需求 1：做一个 带表头的 ，三行，三列的表格，并显示边框 
需求 2：修改表格的宽度，高度，表格的对齐方式，单元格间距。 
table 标签是表格标签 
border 设置表格标签 
width 设置表格宽度 
height 设置表格高度 
align 设置表格相对于页面的对齐方式cellspacing 设置单元格间距 
tr 是行标签 
th 是表头标签 
td 是单元格标签 
align 设置单元格文本对齐方式 
b 是加粗标签 
--> 
<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>

跨行跨列表格（*次重点）

需求 1：新建一个五行，五列的表格，第一行，第一列的单元格要跨两列，第二行第一列的单元格跨两行，第四行第四 
列的单元格跨两行两列。 
<body> 
<!-- 
需求 1： 
新建一个五行，五列的表格， 
第一行，第一列的单元格要跨两列， 
第二行第一列的单元格跨两行， 
第四行第四列的单元格跨两行两列。 
colspan 属性设置跨列 
rowspan 属性设置跨行 
--> 
<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>

三、css语法与选择器

3.1css语法规则

CSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。用来修饰网页的样式。

直接按行定义所需样式
在 head 标签中，使用 style 标签来定义各种自己需要的 css 样式。

格式如下：

xxx { Key : value value; }

把 css 样式写成一个单独的 css 文件，再通过 link 标签引入即可复用。使用 html 的标签导入 css 样式文件。

div{
border: 1px solid yellow; 
}
span{
border: 1px solid red; 
} 
html 文件代码： 
<!DOCTYPE html> 
<html lang="en"> 
<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>

3.2 选择器

标签名选择器
id 选择器
class 选择器（类选择器）
组合选择器

四、引用文档CSS语法与选择器

1. CSS简介

层叠样式表

网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式，而最终我们能看到只
是网页的最上边一层
总之一句话，CSS用来设置网页中元素的样式
使用CSS来修改元素样式的方式大致可以分为3种

内联样式（行内样式）

在标签内部通过 style 属性来设置元素的样式
问题：使用内联样式，样式只能对一个标签生效。如果希望影响到多个元素，必须在每一个元素中都复
制一遍；并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便。（注意：开发时绝对不
要使用内联样式）

内部样式表

将样式编写到 head 中的 style 标签里然后通过css的选择器来选中元素并为其设置各种样式可以同时为
多个标签设置样式，并且修改时只需要修改一处即可。内部样式表更加方便对样式进行复用

内联样式（行内样式）

1问题：我们的内部样式表只能对一个网页起作用，它里边的样式不能跨页面进行复用
外部样式表
可以将css样式编写到一个外部的CSS文件中，然后通过 link 标签来引入外部的CSS文件
外部样式表需要通过 link 标签进行引入，意味着只要想使用这些样式的网页都可以对其进行引用使样
式，可以在不同页面之间进行复用
将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户
的体验。

2. CSS基本语法

注释

css中的注释

只能使用 / 和 / 包裹。即不管是单行注释，还是多行注释，都是以 / 开头，以 / 结尾

<style> 
p{ 
color:green; 
font-size:50px; 
}
</style>

<link rel="stylesheet" href="./style.css"> 
1 
/* css中的单行注释 */ 
/*
css中的多行注释 
css中的多行注释 
css中的多行注释 
*/

我们对比下其他几种前端语言的注释

html中的注释

只能使用包裹。即不管是单行注释，还是多行注释，都是以结尾

JS(JavaScript)和JQuery中的注释

单行注释使用 // 。多行注释使用 / 和 / 包裹，以结尾

基本语法

选择器
通过选择器可以选中页面中的指定元素
比如 p 的作用就是选中页面中所有的 p 元素声明块

<!-- html中的单行注释 --> 
<!-- 
html中的多行注释 
html中的多行注释 
html中的多行注释 
-->

/* JS(JavaScript)和JQuery中的单行注释*/ 
/*
JS(JavaScript)和JQuery中的多行注释 
JS(JavaScript)和JQuery中的多行注释 
JS(JavaScript)和JQuery中的多行注释 
*/

选择器声明块
1声明块
通过声明块来指定要为元素设置的样式
声明块由一个一个的声明组成，声明是一个名值对结构
一个样式名对应一个样式值，名和值之间以 : 连接，以 ; 结尾

3. CSS选择器

通配选择器（Universal selector）

作用：选中页面中的所有元素
语法：
例子： {}

元素选择器（Type selector）

也叫类型选择器、标签选择器
作用：根据标签名来选中指定的元素
语法： elementname{}
例子： p{} h1{} div{}

h1{ 
color: green; 
} 
*{ 
color: red; 
}

类选择器（Class selector）

作用：根据元素的class属性值选中一组元素
语法： .classname
例子： .blue{}
可以重复使用，
可以通过 class 属性来为元素分组，
可以同时为一个元素指定多个 class 属性

ID选择器（ID selector）

作用：根据元素的 id 属性值选中一个元素
语法： #idname{}
例子： #box{} #red{}

p{ 
color: red; 
}
h1{ 
color: green; 
}

.blue{
color: blue; 
}
.size{
font-size: 20px; 
}

class是一个标签的属性，它和id类似，不同的是class

类选择器（Class selector）

属性选择器（Attribute selector）

作用：根据元素的属性值选中一组元素
语法1： [属性名] 选择含有指定属性的元素
语法2： [属性名=属性值] 选择含有指定属性和属性值的元素
语法3： [属性名^=属性值] 选择属性值以指定值开头的元素
语法4： [属性名$=属性值] 选择属性值以指定值结尾的元素
语法5： [属性名=属性值] 选择属性值中含有某值的元素
例子： p[title]{} p[title=e]{} p[title^=e]{} p[title$=e]{} p[title=e]{}

复合选择器
交集选择器

作用：选中同时复合多个条件的元素
语法：选择器1选择器2选择器3选择器n{}
注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头

#red{
color: red; 
} 
p[title]{ 
color: orange; 
}
p[title=e]{ 
color: orange; 
}
p[title^=e]{ 
color: orange; 
}
p[title$=e]{ 
color: orange; 
}
p[title*=e]{ 
color: orange; 
}

并集选择器（选择器分组）

作用：同时选择多个选择器对应的元素
语法：选择器1,选择器2,选择器3,选择器n{}
例子： #b1,.p1,h1,span,div.red{}
5. 关系选择器
父元素：直接包含子元素的元素叫做父元素
子元素：直接被父元素包含的元素是子元素
祖先元素：直接或间接包含后代元素的元素叫做祖先元素；一个元素的父元素也是它的祖先元素
后代元素：直接或间接被祖先元素包含的元素叫做后代元素；子元素也是后代元素
兄弟元素：拥有相同父元素的元素是兄弟元素
5.1子元素选择器（Child combinator）
作用：选中指定父元素的指定子元素
语法：父元素 > 子元素
例子： A > B

div.red{ 
font-size: 30px; 
}
.a.b.c{ 
color: blue; 
}

h1,span{ 
color: green; 
} 
1
2
3 
div.box > p > span{ 
color: orange; 
}

5.2 代元素选择器（Descendant combinator）
作用：选中指定元素内的指定后代元素
语法：祖先后代
例子： A B
5.3 兄弟元素选择器（Sibling combinator）
作用：选择下一个兄弟
语法：前一个 + 下一个前一个 + 下一组
例子1： A1 + A2 （Adjacent sibling combinator）
例子2：A1 ~ An （General sibling combinator）

6. 伪类选择器
伪类（不存在的类，特殊的类）
伪类用来描述一个元素的特殊状态，比如：第一个子元素、被点击的元素、鼠标移入的元素.…
伪类一般情况下都是使用 : 开头
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 选中第n个子元素
n：第n个，n的范围0到正无穷

div span{ 
color: skyblue; 
} 
p + span{ 
color: red; 
}
p ~ span{ 
color: red; 
}

2n或even：选中偶数位的元素
2n+1或odd：选中奇数位的元素
以上这些伪类都是根据所有的子元素进行排序的
:first-of-type 同类型中的第一个子元素
:last-of-type 同类型中的最后一个子元素
:nth-of-type() 选中同类型中的第n个子元素
这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序的
:not() 否定伪类，将符合条件的元素从选择器中去除

/* ul下所有li，黑色 */ 
ul>li { 
color: black; 
}
/* ul下第偶数个li，黄色 */ 
ul>li:nth-child(2n) { 
color: yellow; 
}
/* ul下第奇数个li，绿色 */ 
ul>li:nth-child(odd) { 
color: green; 
}
/* ul下第一个li，红色 */ 
ul>li:first-child { 
color: red; 
}
/* ul下最后一个li，黄色 */ 
ul>li:last-child { 
color: orange; 
}

:link 未访问的链接
:visited 已访问的链接
由于隐私的原因，所以 visited 这个伪类只能修改链接的颜色
:hover 鼠标悬停的链接
:active 鼠标点击的链接

/* unvisited link */ 
a:link { 
color: red; 
}
/* visited link */ 
a:visited { 
color: yellow; 
}
/* mouse over link */ 
a:hover { 
color: green; 
}
/* selected link */ 
a:active { 
color: blue; 
}

7. 伪元素选择器
伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）
伪元素使用 :: 开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 元素的开始
::after 元素的最后
::before 和 ::after 必须结合 content 属性来使用

/* 段落首字母设置大小为30px */ 
p::first-letter{ 
font-size: 30px; 
}
/* 段落第一行设置为黄色背景 */ 
p::first-line{ 
background-color: yellow; 
}
/* 段落选中的部分变绿色 */ 
p::selection{ 
background-color: green； 
}
/* div前加上内容 */ 
div::before{ 
content: 'BEFORE'; 
color: red; 
}
/* div后加上内容 */ 
div::after{ 
content: 'AFTER'; 
color: blue; 
}