HTML
何为HTML
Hyper Text Markup Language (超文本标记语言) 简写:HTML,它通过标签来标记要显示的网页中的各个部分。
如何创建HTML文件
最简单方式:右键点击桌面新建文本文档,然后写好HTML代码保存然后修改文件后缀名为html打开即可,HTML不需要编译器编译,直接通过浏览器解析。
通过IDEA:
①先创建项目:file–>new–>project–>JavaScript–>JavaScript
②创建HTML文件
HTML书写规范
<!DOCTYPE html>
<html lang='ed'>
<head> head标签内写头部元素,如标题。
<meta charset='UTF-8'>
<title>我是标题</title>
</head>
<body>
这里写页面的主体内容。
</body>
</html>
<!DOCTYPE html>
为html5标准网页声明,所有html代码都要写在<html></html>
标签内,页面的主体内容卸载body标签内,标题以及所用的字符编码等写在head标签内。
特殊字符
需求:把<br>
标签显示在页面上。
直接写<br>
肯定不会显示出来,所以这里引入特殊字符。
特殊字符表:
<html>
<head>
<title>wo</title>
</head>
<body>
<p><br></p>
</body>
</html>
效果展示
HTML标签
标签书写格式
1、(1)单标签:也称自结束标签,如<br/>
也可写为<br>
,该标签作用是换行。
(2)双标签:分为开始标签和结束标签,开始标签如<p>
其结束标签为</p>
,在两个标签之间写内容。
2、标签名称不区分大小写,但需要注意,一般都用小写。
3、每个标签都有自己的属性:其中分为基本属性和事件属性。
(1)基本属性:如color=‘red’ 设置颜色
。
(2)事件属性:"οnclick=alert(你好!)’;"设置事件响应后的代码
HTML中的注释:<!-- 注释内容 -->
标签的语法
①标签可以嵌套,但是不能交叉嵌套。
②双标签必须正确关闭,不能缺少开始或者结束标签。
③标签内属性必须有值,属性的值必须用引号括起来,单引号双引号都可。
④注释不能嵌套,否则注释会提前结束。
常用标签
font字体标签
<font color="red" face="宋体" size="7">我是字体标签!</font>
font标签的属性:
color属性:设置文字颜色,可以用red,blue等英文字母,也可以用#FFFFFF来选择颜色,每个F为一个十六进制数字,还可以用rgb的方式,但是推荐#FFFFFF。
face属性:设置文字的字体。
size属性:设置文本字体大小。
h1-h6标题标签
h1-h6为标题标签,h1为最大的标题,h6为最小的标题。
align属性:设置对其方式,left左对齐,center居中,right右对齐。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wo</title>
</head>
<body>
<h1 align="left">我是一级标题</h1>
<h2 align="left">我是二级标题</h2>
<h3 align="right">我是三级标题</h3>
<h4 align="right">我是四级标题</h4>
<h5 align="center">我是五级标题</h5>
<h6 align="center">我是六级标题</h6>
</body>
</html>
演示效果:
a超链接标签(重点)
a标签为双标签。
开始标签和结束标签之间写超链接的名字。
href属性:设置超链接的去向。
target属性:设置跳转超链接的对象,_blank为空白,即在空白页打开超链接地址,所以会打开额外的一个网页,_self为自己,即在当前页打开超链接地址,当前页变为超链接的网页。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wo</title>
</head>
<body>
<a href="tile.png" target="_blank">点击查看图片</a>
</body>
</html>
ul和ol列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wo</title>
</head>
<body>
<ul>
<li>我是一号</li>
<li>我是二号</li>
<li>我是三号</li>
<li>我是四号</li>
<li>我是五号</li>
</ul>
</body>
</html>
ul为无序列表,改为ol有序列表则效果变为:
img标签
img标签为图片标签,可以在html页面上显示图片。
**src属性:**设置图片的路径,路径分为相对路径和绝对路径。
①相对路径:
.表示当前位置
…表示上一级位置
直接写文件名字表示./访问当前路径下的一个文件
相对路径起始位置为文件所在项目的位置,如图tile.png图片和我们html文件在同一位置,所以可以直接通过<img src="./tile.png">
显示该图片,当然./
可以省略.
②绝对路径:http://ip:port/工程名/资源路径
width和height属性:
width设置图片的宽度
height设置图片的高度
boder属性:
设置图片边框的大小
alt属性
用于设置图片加载失败时显示的文本内容
table表格标签
table标签中有3个重要标签,tr行标签,th表头标签,td单元格标签。
table标签属性:
align属性设置表格对齐方式
border属性设置表格边框
width和height属性设置宽高
cellspacing属性设置单元格间距
tr行标签,中间嵌套th和td标签,每嵌套一个最大列增加1.
tr标签属性
th表头标签,默认黑体字,代表一个表头。
td单元格标签,中间填写每个单元格的数据,th标签与其类似但是其字体为黑体且自带居中对齐。
跨行跨列表格
td与th标签的两个属性
colspan属性用于合并列,colspan="2"
即为合并两列。
rowspan属性用于合并行,rowspan="2"
即为合并两行。
综合应用:做一个课表
<table border="1" cellspacing="1" width="700" height="300" align="center">
<tr>
<td colspan="2"></td>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr>
<th rowspan="2">上午</th>
<th>一</th>
<td>毛概</td>
<td>linux</td>
<td></td>
<td>马原</td>
<td>文献检索</td>
</tr>
<tr>
<th>二</th>
<td></td>
<td>python</td>
<td>python</td>
<td></td>
<td>线代</td>
</tr>
<tr>
<th rowspan="2">下午</th>
<th>三</th>
<td>大学英语</td>
<td></td>
<td></td>
<td></td>
<td>体育</td>
</tr>
<tr>
<th>四</th>
<td>高级英语阅读</td>
<td>影视文学鉴赏</td>
<td></td>
<td></td>
<td>离散</td>
</tr>
<tr>
<th colspan="2">晚上</th>
<td></td><td></td><td></td>
<td></td><td></td>
</tr>
</table>
效果展示:
CSS
何为CSS
CSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
CSS语法规则
选择器:浏览器根据“选择器”决定受 CSS 样式影响的 HTML 元素(标签)。
属性 (property) 是你要改变的样式名,并且每个属性都有一个值。属性和值被冒号分开,并由花括号包围,这样就组成了一个完整的样式声明(declaration),例如:p {color: blue}
多个声明:如果要定义不止一个声明,则需要用分号将每个声明分开。虽然最后一条声明的最后可以不加分号(但尽量在每条声明的末尾都加上分号)
例如:
p{
color:red;
font-size:30px;
}
注:一般每行只描述一个属性
CSS注释通过/** 我是注释内容 **/
span和div标签区别
span:行内元素,不能通过css设置具体的宽高等样式的标签元素称为行内元素。
行内元素的特点是标签内的内容是多大它就是多大,而且不会占一整行。
div:块级元素,可以通过css设置宽高等一些大小的样式,这样的元素标签称为块级元素。
块级元素的特点是自己占一整行。如果再写其它标签,那么其它标签会显示在它的下面。
CSS和HTML的结合方式
1、在标签的 style 属性上设置"key:value value;"修改标签样式
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
问题:这种方式的缺点?
1.如果标签多了,样式多了,代码量非常庞大。
2.可读性非常差。
3.CSS 代码没什么复用性可言。
2、在 head 标签中使用 style 标签来定义各种自己需要的 css 样式
格式如下:
xxx {
Key : value value;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
<style type="text/css">
div{
color: crimson;
font-size: 20px ;
border: 1px solid red;
}
span {
color: aqua;
font-size: 20px;
border: 1px solid red;
}
</style>
</head>
<body>
<div>我是div1</div>
<div>我是div2</div>
<span>我是span1</span>
<span>我是span2</span>
</body>
</html>
问题:这种方式的缺点。
1.只能在同一页面内复用代码,不能在多个页面中复用 css 代码。
2.维护起来不方便,实际的项目中会有成千上万的页面,要到每个页面中去修改。工作量太大了。
3、把 css 样式写成一个单独的 css 文件再通过 link 标签引入
使用 html 的 <link rel="stylesheet" type="text/css" href="./styles.css" />
标签 导入 css 样式文件。
CSS文件内容
div{
color: aquamarine;
font-size: 20px;
}
span{
color: #b3d4fc;
font-size: 20px ;
border: 1px solid saddlebrown;
}
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
<link rel="stylesheet" type="text/css" href="./css/ztx.css">
</head>
<body>
<div>我是div1</div>
<div>我是div2</div>
<span>我是span1</span>
<span>我是span2</span>
</body>
</html>
CSS选择器
标签名选择器
在head标签内的style标签内写标签名选择器,语法示例:
div{
color: red;
font-size: 30px;
border: 3px solid blueviolet;
}
用法示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
<style type="text/css">
div{
color: red;
font-size: 30px;
border: 3px solid blueviolet;
}
span{
color: green;
font-size: 50px;
border: 5px;
}
</style>
</head>
<body>
<div>我是div1</div>
<div>我是div2</div>
<span>我是span1</span>
<span>我是span2</span>
</body>
</html>
效果展示
id 选择器
id 选择器的格式是:
#id属性值{
属性:值;
}
id 选择器,可以让我们通过 id 属性选择性的去使用这个样式。
定义完id选择器后只需要在标签内加上id属性选择相应的id属性值即可。
示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
<style type="text/css">
#id01{
color: aqua;
font-size: 66px;
border: 3px solid yellowgreen;
}
#id02{
color: darkcyan;
font-size: 33px;
border: 2px solid darkslategray;
}
</style>
</head>
<body>
<div id="id01">我是div1</div>
<div id="id02">我是div2</div>
<span id="id01">我是span1</span>
<span id="id02">我是span2</span>
</body>
</html>
class 选择器(类选择器)
class 类型选择器的格式是:
.class 属性值{
属性:值;
}
class 类型选择器,可以通过 class 属性有效的选择性地去使用这个样式。
使用方法和id选择器相同。
示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
<style type="text/css">
.class01{
color: aqua;
font-size: 66px;
border: 3px solid yellowgreen;
}
.class02{
color: darkcyan;
font-size: 33px;
border: 2px solid darkslategray;
}
</style>
</head>
<body>
<div class="class01">我是div1</div>
<div class="class02">我是div2</div>
<span class="class01">我是span1</span>
<span class="class02">我是span2</span>
</body>
</html>
id选择器和class选择器的区别
**1、**一个html标签只能绑定一个id名称。
**2、**一个html标签可以绑定多个class名称。
id选择器以#开头,class选择器以.开头。
一般使用class选择器。
组合选择器
组合选择器的格式是:
选择器 1,选择器 2,选择器 n{
属性:值;
}
组合选择器可以让多个选择器共用同一个 css 样式代码。
常用样式
1、字体颜色
color:red;
颜色可以写颜色名如:black, blue, red, green 等
颜色也可以写 rgb 值和十六进制表示值:如 rgb(255,0,0),#00F6DE,如果写十六进制值必
须加#
2、宽度
width:19px;
宽度可以写像素值:19px;
也可以写百分比值:20%;
3、高度
height:20px;
高度可以写像素值:19px;
也可以写百分比值:20%;
4、背景颜色
background-color:#0F2D4C
4、字体样式:
color:#FF0000;字体颜色红色
font-size:20px; 字体大小
5、红色 1 像素实线边框
border:1px solid red;
7、DIV 居中
margin-left: auto;
margin-right: auto;
8、文本居中:
text-align: center;
9、超连接去下划线
text-decoration: none;
10、表格细线
table {
border: 1px solid black; /设置边框/
border-collapse: collapse; /将边框合并/
}
td,th {
border: 1px solid black; /设置边框/
}
11、列表去除修饰
ul {
list-style: none;
}