HTML的常用标签
1、一、HTML的常用标签
表单标签
作用：可以提交不同的数据到服务器
标签：<form></form>:表示表单的范围【父标签】
主要作用：用于采集用户信息
子标签的分类：
表单标签：包含数据提交服务器地址、提交方式【get和post】
表单域：用于采集用户信息【姓名，密码，邮箱，上传文件。。。。。】
表单按钮：提交按钮·，复原按钮
【面试题】get和post的区别
a.get请求地址栏中会携带页面中所有的信息，post中不会【http请求】
b.get请求安全性低，post相对较高
c.get请求效率高，post相对较低
d.get请求对数据的大小限制，而post没有任何限制
属性：
action：提交到服务器的地址【#】
method：提交采用的方式，【get和post】
enctype：很少用，做文件上传的时候需要设置这个属性
使用method指定的方式，提交到action表示的服务器
<input />:表示输入项，可以输入内容【子标签】
type:输入内容的类型
普通输入项：type="text"
密码输入项：type=“password”
单项输入项：type="radio"
多项输入项：type="checkbox"
文件输入项：type="file"
邮箱输入项：type="email"
name:用于提交
value:标记【值】
checked:checked= “checked“表示默认选中
重置按钮：type=“reset”
提交按钮：type="submit"
普通按钮：type="button"
<select></select>:下拉输入项【年份，城市的选择】【子标签】
<option></option>:select标签的子标签，表示可以选择的选项
name:名称
value:值
selected="selected"
<textarea></textarea> ：文本域【子标签】
cols:列
rows:行
例题
1、<body>
<form action="index.html" method="post">
<!--普通文本输入项-->
手机号码：<input type="text" placeholder="请输入手机号码" name="phone" /><br />
<!--密码输入项-->
创建密码：<input type="password" placeholder="请输入密码" name="pwd" /><br />
姓 名：<input type="text" placeholder="请输入姓名" /><br />
<!--单项输入项-->
性 别：<input type="radio" name="sex" value="man" />男
<input type="radio" name="sex" value="woman" />女<br />
<!--多项输入项-->
爱 好:<input type="checkbox" name="hobby" value="l"/>篮球
<input type="checkbox" name="hobby" value="z" />足球
<input type="checkbox" name="hobby" value="p" />排球
<input type="checkbox" name="hobby" value="pp"/>乒乓球
<input type="checkbox" name="hobby" value="b"/>棒球<br />
<!--文件输入项-->
上传头像：<input type="file" /><br />
<!--下拉输入框select-->
出生年月：<select name="birth">
<option>1988</option>
<option>1989</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
</select>
<br />
自我描述：<textarea cols="30" rows="5" name="des"></textarea><br />
<!--提交按钮-->
<input type="submit" value="注册" />
<!--重置按钮-->
<input type="reset" value="重置" />
</form>
</body>
2、 <!--了解-->
<!--邮箱输入项-->
邮 箱：<input type="email" placeholder="请输入邮箱" /><br />
<!--隐藏域-->
<!--隐藏域的值是固定的，可以存在于代码中，但是在界面中不显示-->
<input type="hidden" name="id" value="245" /><br />
<!--时间输入项-->
<input type="date" name="date" /><br />
<!--颜色输入项-->
<input type="color" name="color" /><br /><br />
<!--进度条-->
<input type="range" name="range" max="100" min="0" value="10"/>
头标签
<head>
<title></title> :指定浏览器标题栏显示的内容
<base></base>:设置超链接的基本位置，可以统一设置超链接的打开方式
<meta></meta>:设置和页面相关的一些信息
name：关键字
content:内容
charset:编码格式
<link></link>:一般用于引入外部文件【css中】
<head>
<!--通过关键字进行搜索-->
<meta charset="UTF-8" name="keywords" content="千锋，it">
<!--当前页面经过3秒之后会重新刷新，跳转到url指定的页面
<meta http-equiv="refresh" content="3;url=http://www.baidu.com">
-->
<title>当前网页的标题</title>
<!--可以设置当前页面中的所有的信息-->
<base target="_blank" />
</head>
<body>
<a href="formDemo01.html">超链接一</a>
</body>
框架标签
<frameset></frameset>：划分规则【父标签】
rows:按照行进行划分
cols:：按照列进行划分
<frame />:显示具体的页面【子标签】
注意：frameset标签不能使用在body中，也不能使用body的外面，一旦使用了框架标签之后，则需要删除body标签【违背了规范，很少使用】
<!--列分
<frameset cols="20%,50%,30%">
<frame src="formDemo01.html"/>
<frame src="formDemo02.html"/>
<frame src="formPracticeDemo.html"/>
</frameset>-->
<!--行分
<frameset rows="20%,50%,30%">
<frame src="formDemo01.html"/>
<frame src="formDemo02.html"/>
<frame src="formPracticeDemo.html"/>
</frameset>-->
<!--混合分-->
<frameset rows="20%,*">
<frame src="formDemo01.html"/>
<frameset cols="40%,*">
<frame src="formDemo02.html"/>
<frame src="formPracticeDemo.html"/>
</frameset>
</frameset>
css的核心基础
概念
CSS；Cascading Style Sheet,层叠样式表
作用;用于控制网页样式并允许将样式信息和网页分离的一种标记性语言
层叠：使用不同的添加方式为同一个标签设置不同的样式，最后将所有的样式叠加到一起，共同作用域当前标签
传统html的缺陷：
a.维护困难【为了修改某个标签需要花费大量的时间】
b.标签不足【文字间距，段落缩进办不到】
c.网页过“胖”
d.定位困难
语法规则
三要素：object,name,value
用同样的方式描述网页
标题{
字体：宋体;
字号：15px;
颜色：红色;
装饰：下划线;
}
h2{
font-family:宋体;
font-size:15px;
color：red;
text-decoration:underline;
}
css三要素组成：对象，属性和值
在CSS的3个组成中，对象时最重要的，他指定了对哪些网页元素进行设置样式，在CSS中称为选择器
选择器
标签名称选择器
p h2
<style>
p{
color:red;
font-size:20px;
}
</style>
类选择器
使用场景：标签名称选择器一旦声明之后，那么页面中所有相关的标签全部都会随着发生改变，但是，如果其中的某个标签想显示的不同，需要使用类选择器
说明：类名自定义，只要是一个合法的标识符即可
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*注意：类选择器不会自动作用于html的标签，需要手动的设置*/
.blue{
color:blue;
font-size:20px;
}
.special{
font-style:italic;
}
</style>
</head>
<body>
<!--同一个类选择器可以同时作用于多个标签-->
<p class="blue">aaabbbbbbbbxcccccc
<!--多个类选择器可以同时作用于同一个标签，使用空格隔开-->
<p class="blue special">古诗词
</body>
ID选择器
和类选择器的用法基本相同，区别在于：最好在同一个页面中只使用一次，因此针对性更强说明：id名称是一个自定义的标识符即可
<head>
<style>
#bold{
font-weight: bold; /*设置文字粗体*/
background-color: yellow;
text-indent: 2em; /*首行缩进*/
}
#color{
color: red;/*设置文字颜色*/
}
</style>
</head>
<body>
<p id="bold">轻轻地我走了
<p id="color">正如我轻轻的来
<!--一个id最好只作用于一个标签，将多个id作用于同一个标签在id选择器中是完全错误的语法-->
<!--定义的id选择器不只是为了在css中使用，在js中也需要使用，其中有一个函数getElementById()，通过一个id来获取对应的标签元素
</body>
属性选择器和包含选择器（了解）
属性选择器
选择器[属性名]{
属性名称1：值1；
属性名称2：值2；
}
选择器[属性名="属性值"]{
属性名称1：值1；
属性名称2：值2；
}
/*name是p标签中的一个属性*/
p[name]{
/*font-family: "微软雅黑" arial "arial black";*/
text-decoration: overline;
}
p[name="good"]{
text-decoration: underline;
}
<p name="good">“吹面不寒杨柳风”
<p name="bbbb">雨是最寻常的，
<p name="aaa">天上的风筝渐渐多了
包含选择器：
父子标签，先辈和后辈标签
先辈选择器 后辈选择器
查找直接子标签
父标签选择器>子标签选择器
/*父标签的id值>子标签的标签名称*/
/*父标签的id值>子标签的标签名称*/
#box>span{
border: dashed 5px blue;
}
<div id="box">
<span>春天像刚落地的娃娃，从头到脚都是新的，它生长着。</span>
</div>
组合选择器和伪类选择器
组合选择器：
选择器1，选择器2，。。。。{
}
伪类选择器
类选择器：特定的设置{
}
说明：特定的设置：
hover【鼠标悬浮】before after first-letter first-line
/*组合选择器*/
div,p,span{
}
/*伪类选择器*//*鼠标悬浮选择器*/
#first:hover{ /*此处的first表示id选择器的名称*/
color: blue;
font-size: 26px;
}
/*添加头部*/
#first:before{
content: "这是朱自清的《春》";
}
/*添加尾部*/
#first:after{
content: "是一个尾部";
}
/*设置第一个字符的样式*/
#first:first-letter{
font-size: 40px;
}
/*设置第一行字符的样式*/
#first:first-line{
color: purple;
}
<p id="first">盼望着，盼望着，东风来了，春天的脚步近了。
全局选择器
*{
background-color: lightgray;
}
CSS和HTML的结合方式
行内样式（了解）
<p style="color:#800080;font-size: 20px; text-decoration: underline;">hello
<p style="font-style: italic;">
html标签都有一个属性style，可以直接对html进行设置，style的值其实就是css代码
内嵌标签
内嵌样式就是在<head>标签中使用<style>标签
说明：所有的css的代码集中了一个区域中，方便后期维护，实现了html和css代码的分离。但是，如果一个网站，拥有很多个页面，不同的页面会有重叠的功能，内嵌样式成本太高。适合：仅适用于特殊的页面进行制定的设置。
代码演示：选择器的使用全部使用的内嵌样式
链接样式（）
<link href="外部css文件的路径" type="MIME类型" rel="文本类型">
href:css文件的路径，一般使用相对路径
rel:stylesheet
MIME类型：就是标记文档的类型，格式：大类型/小类型
css:text/css
js:text/javascript
图片：image/jpg
所有图片：image/*
<head>
<meta charset="UTF-8">
<title></title>
<!--链接样式引入css文件-->
<link href="css/css1.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<h2>hello</h2>
fhajhgkagjalkgjak
</body>
导入样式
导入样式和链接样式基本相同
语法：
在<style>标签中使用：
假设有一个css文件sheet.css,可以有以下几种方式导入
@import url(sheet.css)
@import url("sheet.css")
@import url('sheet.css')
各种样式的优先级问题
总结：
作用范围：
行内样式：只作用于当前标签【行内引用】
内嵌样式：只作用于当前页面【内部引用】
链接样式和导入样式：可以同时作用与多个页面【外部引用】
优先级：
行内样式的优先级是最高的
内部引用和外部引用：谁后写则采用谁的方式【以body为参照物，就近原则】
注意：在同一个页面中最多选用1-2种
css中的属性
字体属性
<head>
<meta charset="UTF-8">
<title></title>
<style>
p{
/*字体*/
font-family:arial;
/*字体类型
* oblique:真正的倾斜
* italic：意大利体
* normal:
*/
font-style: italic;
/*字体加粗
* 取值范围100~900之间，数值越大，字体越粗
* normal:正常
* bold：加粗
* bolder：比bold还加粗
* lighter:比normal更细
*/
font-weight:100 ;
/*字体大小*/
font-size: 25px;
}
</style>
</head>
<body>
字体属性
<!--
补充：
1.px和em：文字大小单位
px：像素,与分辨率有关
em:自动使用尺寸，方便字体的放大和缩小
1em = 16px
2.oblique和italic
italic：只是一种字体风格，对每个字母进行一定的小的改动，达到倾斜的效果
oblique：则是将正常文字倾斜一定的角度
-->
</body>
文本属性
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
p{
/*文本装饰
* none:正常
* underline:下划线
* line-through:删除线
* overline:顶线
* blink:文字闪烁【不是所有的浏览器都支持】
*/
text-decoration:underline;
/*段落缩进，中文常用2em*/
text-indent: 2em;
/*对齐方式
* left
* right
* center
* justify:两端对齐
*/
text-align:left;
/*设置单词之间的间距*/
word-spacing:50px;
/*设置字符之间的间距*/
letter-spacing: 30px;
/*字母大小写转换
* none；正常显示
* uppercase:转换成大写
* lowercase；转换为小写
* capitalize:单词首字母大写
*/
text-transform: capitalize;
/*文本方向
* ltr:文本方向从左到右【默认】
* rtl:文本方向从右向左
*/
direction: rtl;
}
</style>
</head>
<body>
today is a good day中文中文中文
</body>
</html>