from标签发送服务器
<!--
form 表单标签
action 设置提交的服务器地址
method 提交方式get(默认)或者post
表单提交的时候数据没发给服务器的三种情况
1.表单项没有name属性值
2.单选,复选(下拉列表中的option)都需要添加value属性
3.表单项不在提交的form标签中
GET请求的特点:
1.浏览器地址栏中的地址是:action属性【+?+请求参数】
请求参数格式··=··&··=··&···=·
2.不安全
3.有数据长度的限制
-->
其他标签
<!--div span p 标签演示
div 默认独占1行
span 长度是封装数据的长度
p段落标签 默认会在段落的上方或下方各空一行
-->
<div>div标签</div>
<div>div标签2</div>
<span>span标签</span>
<span>span标签2</span>
<p>p标签</p>
<p>p标签2</p>
CSS
CSS介绍
CSS语法规则
注释/* ```*/
CSS与HTML结合
1.在标签的style属性
设置“key:value value”,修改标签样式
<div style="border: 1px solid #ff0000">div标签</div>
- 缺点
1.标签多了,代码量太大
2.可读性差
3.CSS代码没有复用性可言
2.在head标签中,使用style标签定义css样式
格式:
###{
Key:value value;
}
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--syyle标签专门定义css样式代码-->
<style type="text/css">
div{
border: 2px solid royalblue;
}
span{
border: 2px solid royalblue;
}
</style>
</head>
- 缺点
1.只能在同一页面那复用代码
2.维护不方便,成千上万页面都要修改
3.把css样式写成单独css文件,通过link标签引入
新建stylesheat.css文件,正常写css代码,在html的head标签里写link标签
div{
border: 1px red solid;
}
span{
border: 1px red solid;
}
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="1.css">
</head>
CSS选择器
标签名选择器
可以决定那些标签被动的使用这个样式
格式:
标签{
属性:值;
}
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
<style type="text/css">
div{
border: 1px yellow solid;
color: blue;
font-size: 30px;
}
span{
border: 5px blue dashed;
color: yellow;
font-size: 20px;
}
</style>
</head>
<body>
<!--
需求1:在所有div标签上修改字体颜色为蓝色,字体大小30个像素。边框为1像素黄色实线。
并且修改所有span 标签的字体颜色为黄色,字体大小20个像素。边框为5像素蓝色虚线。
-->
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
</body>
id选择器
格式:
#id{
属性:值;
}
<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>
<!--
需求1:分别定义两个 div 标签,
第一个div 标签定义 id 为 id001 ,然后根据id 属性定义css样式修改字体颜色为蓝色,
字体大小30个像素。边框为1像素黄色实线。
第二个div 标签定义 id 为 id002 ,然后根据id 属性定义css样式 修改的字体颜色为红色,字体大小20个像素。边框为5像素蓝色点线。
-->
<div id="id001">div标签1</div>
<div id="id002">div标签2</div>
类选择器
格式:
.calss 属性值{
属性:值;
}
可以通过class属性有效使用样式
<head>
<meta charset="UTF-8">
<title>class类型选择器</title>
<style type="text/css">
.class01{
color: blue;
font-size: 30px;
border: 1px yellow solid;
}
.class02{
color: gray;
font-size: 26px;
border: 1px red solid;
}
</style>
</head>
<!--
需求1:修改 class 属性值为 class01的 span 或 div 标签,字体颜色为蓝色,字体大小30个像素。边框为1像素黄色实线。
需求2:修改 class 属性值为 class02的 div 标签,字体颜色为灰色,字体大小26个像素。边框为1像素红色实线。
-->
<div class="class01">div标签class01</div>
<div class="class02">div标签</div>
<span class="class01">span标签class01</span>
<span>span标签2</span>
组合选择器
格式:
选择器1,选择器2,···{
属性:值;
}
CSS常用样式
div{
color
width
height
border
backgroundcolor
font-size
margin-right 块居中
margin-left
text-align:center 文字居中
}
a{
text-decoration: none;超链接去下划线
}
table{
border: 1px red solid;
border-collapse;边框合并
}