HTML的一些常用的标签和部分css知识
一.form标签的注意事项
form为表单标签，属性有action和method。
action为表单提交的路径，method为表单
的提交方式。表单有九种提交请求，常用
的有两种，今天就介绍常用的两种请求get和
post。
1.get请求方式 get请求为method的默认提交请求，在提交路径有属性信息，get请求在路径的地址上存在属性值 url的地址是有限制的最大为64kb；
<form action="https://www.baidu.com/?tn=62095104_23_oem_dg" method="get" >
路径显示如下图
2.post请求post请求为method的手动设置提交请求，在提交路径没有属性信息；
<form action="https://www.baidu.com/?tn=62095104_23_oem_dg" method="post" >
路径显示如下图
3.斜体样式get和post请求使用场景
1.请求根据数据性质 — 热数据 安全度不重要的数据 使可用get和post都可以
2.如果数据的性质需要安全性比较高时 那么一定要使用post
3.在写文件上传的功能时 请求必须是post的提交方式
二.select标签的注意事项
1.select标签又称下拉列表和option连用
地点：<select name="area">
<option>---请选择---option>
<option value="重庆">重庆option>
<option value="四川">四川option>
<option value="北京">北京option>
<option value="上海">上海option>
select>
显示如下图
2.使用multiple属性可以实现多选
喜欢颜色：<br/>
<select name="color" multiple="multilie">
<option>---请选择---option>
<option value="红色">红色option>
<option value="蓝色">蓝色option>
<option value="紫色">紫色option>
<option value="黑色">黑色option>
<option value="橘色">橘色option>
select>
按住Ctrl鼠标选择，可实现多选如下图
三.a标签的注意事项
1.a标签 超链接 作用页面跳转
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<a href="c.html">aa>
body>
html>
如图
点击a后如下图
2.a标签进行页面跳转 属于get请求方式*
3.使用a标签跳转到网页的内部 ----锚点
<a href="#r1">第一章a>
<a href="#r2">第二章a>
<a href="#r3">第三章a>
<h2><a name="r1">第一章a>h2>
“叮，万法合一已启动。”
“叮，检测到宿主拥有功法数量过万，融合时间较长，建议宿主开启加速，预计需要五千万装逼值。”
“检测到宿主目前拥有限时免费福利，系统自动开启加速。”
“叮，融合发生错误，3850种功法属性产生不可逆冲突，建议宿主开启强力融合，预计需要十亿装逼值。”
“叮，融合发生巨大错误，560种功法融合会导致宿主施法暴毙，建议宿主购买大道规则进行补充，预计需要一百亿装逼值。”
<h2><a name="r2">第二章a>h2>
徐缺一边逃窜，一边许出各种好处。
麒麟老祖与段七德却依旧毫无动静，似乎早已离去，压根不在这。
<h2><a name="r3">第三章a>h2>
“卧槽，小子，你过来干什么。”
“别啊！”
如下图
鼠标点击第一章节将会跳转到如下图
四.img标签
img用于在页面中引入图片
1.usemap是img的重要属性用于做位图
usemap----用于做位图 map ----映射
通常一起使用
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<img src="./image/1.jpg" alt="猫" usemap="#cat">
<map id="cat" name="cat">
<area shape="circle" coords="555,506,50" href="https://www.baidu.com/?tn=62095104_23_oem_dg">area>
map>
body>
html>
如下图
点击圆所在区域进入https://www.baidu.com/?tn=62095104_23_oem_dg连接
如下图
五.多窗口框架 frameset
多窗口的框架标签 里面的每一个窗口都是一个frame 注意：标签不能和body标签连用
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<frameset rows="15%,70%,15%">
<frame src="a.html " name="1">frame>
<frameset cols="20%,80%">
<frame src="b.html" name="2">frame>
<frame src="c.html" name="3">frame>
frameset>
<frame src="d.html" name="3">frame>
frameset>
html>
浏览器打开如下
以下是a.html代码，其他的类似
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<a href="c.html">aa>
body>
html>
打开如下
六.视频标签video
以下是简单应用
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<video src="./video/1.mp4" controls="controls">
video>
body>
html>
浏览器运行如下图
七.音频标签audio
以下是简单应用
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<audio src="./music/1.mp3" controls="controls">
audio>
body>
html>
浏览器运行如下图
八.列表标签
1. 有序列表
ol 有序列表标签，li 列表的选项
简单应用如下
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<ol>
<li>第1章li>
<li>第2章li>
<li>第3章li>
<li>第4章li>
ol>
video>
body>
html>
运行显示如下图
2. 无序列表
ul无序列表标签，li 列表的选项
简单应用如下
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<ul>
<li>第1章li>
<li>第2章li>
<li>第3章li>
<li>第4章li>
ul>
video>
body>
html>
运行显示如下图
3. 定义列表
dl 表示定义列表
dt 定义的项目
dd 定义项目的描述
简单应用
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<dl>
<dt>重庆dt>
<dd>磁器口dd>
<dd>解放碑dd>
<dt>四川dt>
<dd>乐山大佛dd>
<dd>.....dd>
dl>
video>
body>
html>
运行结果如下
九.什么是css
CSS是Cascading style Sheets的简称，中文译作“层叠样式表单”，我把它叫作“层叠样式表”
1.Css的语法结构
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录title>
head>
<body>
<h4 style="color:red">登录界面h4>
body>
html>
在标签内写 style=”属性:属性值”
选择符{
属性:属性值
}
2.选择符
- 标签选择符： 以标签命名的选择符
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
p{
color:green;
}
style>
head>
<body>
<p>你好p>
<a href="c.html" target="2">aa>
body>
html>
以下是标签选择符标识
p{
color:green;
}
运行如下
- id选择符: 通常用于描述一个标签具有唯一的样式。标识是 #
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
#p1{
color:green;
}
style>
head>
<body>
<p id="p">你好p>
<a href="c.html" target="2">aa>
body>
html>
以下是id选择符标识
<p id="p1">你好p>
#p1{
color:green;
}
运行如下
- class选择符 通常用于修饰一组或者一系列具有相同样式的标签， 标识是 .
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
.green{
color:green;
}
style>
head>
<body>
<p class="green">你好p>
<a href="c.html" target="2">aa>
body>
html>
以下是class选择符标识
<p class="green">你好p>
.green{
color:green;
}
运行如下
4. 通配符选择器
*{ color:green;}
的对页面中所有的标签都起作用
什么时候使用通配符选择器
一般情况下 在css页面刚开始的时候 描述通用属性
5. 包含选择符
语法e1 e2{属性：值} e1 是e2的父节点标签
标识：空格
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
body .green{
color:green;
}
style>
head>
<body>
<p class="green">你好p>
<a href="c.html" target="2">aa>
body>
html>
运行如下
6.选择符分组
标识： , 逗号
用它可以替代 通配符选择符
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
p,h1{
/*p标签和h1标签*/
color:green;
}
style>
head>
<body>
<h1>我很好，只是偶尔被需要h1>
<p class="green">你好p>
<a href="c.html" target="2">aa>
body>
html>
运行如下
7.标签指定式选择符
标签指定式选择符：如果既想使用id或class，也想同时使用标签选择符如： p.green{ color:green;}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
p.green{
/*p标签中class是green的*/
color:green;
}
style>
head>
<body>
<p class="green">你好p>
<p>我很好，只是偶尔被需要p>
<a href="c.html" target="2">aa>
body>
html>
运行如下
8．组合选择选择符 前面的1-7种组合性使用
h1,p.green{ color:green;}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
h1,p.green{
/*h1标签和p标签中class是green的*/
color:green;
}
style>
head>
<body>
<h1>温柔尽失h1>
<p class="green">你好p>
<p>我很好，只是偶尔被需要p>
<a href="c.html" target="2">aa>
body>
html>
3.css 的引入方式
- 行内样式
在 标签中写入style属性
<h4 style="color:red">登录界面h4>
- 内嵌样式
<style type="text/css">
.green{
color:green;
}
#p1{
color:green;
}
style>
- 外链样式
需要先建立一个XXX.css文件
css文件内用选择符如
.green{
color:green;
}
然后在需要的时候链接该文件
<link rel="stylesheet" type="text/css" href="./css/1.css">
- 导入样式
是内嵌样式和外链的样式的混合，不太常用
<style type="text/css">
@import url(./css/1.css);
style>
4.伪类
Body 标签 link alink vlink
在css有相应的伪类去替代他们
标签:伪类{ 样式 }
未访问的链接 a:link{color:#ff0000}
已访问的链接 a:visited{color:#00ff00}
鼠标移动到链接上 a:hover{color:#ff00ff}
鼠标按下到链接上 a:active{color:#0000ff}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
h1,p.green{
color:green;
}
a:link {
color:red;}/*未访问的链接*/
a:visited{
color:black;}/*已访问的链接*/
a:hover{
color:blue}/*鼠标移动到链接上*/
a:active{
color:orange}/*鼠标按下到链接上*/
style>
head>
<body>
<h1>温柔尽失h1>
<p class="green">你好p>
<p>我很好，只是偶尔被需要p>
<a href="c.html" target="2">aa>
<a href="#">xxxxxa>
<a href="#1">hhha>
body>
html>
运行如图
鼠标移动到xxxxx
鼠标按到hhh上
5.css命名
关于css命名法，和其他的程序命名差不多，主要有三种：驼峰，帕斯卡，匈牙利法
驼峰 命名法：除第一个单词首字母小写外，其余所有单词首字母都大写#headerBlock
帕斯卡命名法：与驼峰相似，区别都是所有单词首字母都大写#HeaderBlock
匈牙利命名法：是需要在名称前面加上一个或多个小写字母作为前缀#head_block
6.CSS样式的特点
继承 ---- 层叠
1、继承：
网页中子元素，将继承父元素的样式
例如：要控制段落p中的文字大小，可以直接给body标记加样式。
2、层叠：
网页中子元素定义了与父元素相同的样式，则子元素的样式将覆盖掉父元素的样式
后面定义的样式，会覆盖前面定义的样式
7.字体样式
浏览器默认字体大小为16px
常用单位：px 像素 em 当前字体尺寸 百分比单位用的比较多
功能：
设置字号： font-size:12px
设置字色： color:#000000
设置字体：font-family:Arial,‘宋体’
设置行高： line-height：150% line-height：1.5em
设置字体的粗细： font-weight：normal[正常]bold[粗体]
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
h1,p.green{
color:green;
font-size:25px;
font-family:'宋体';
line-height:2em;
font-weight: bold;
}
style>
head>
<body>
<h1>温柔尽失h1>
<p class="green">你好p>
<p>我很好，只是偶尔被需要p>
<a href="c.html" target="2">aa>
<a href="#">xxxxxa>
<a href="#1">hhha>
body>
html>
运行如下
8.文本控制
文本水平对齐方式 text-align:
| 功能 | 语法 |
|---|---|
| 设置对象中文本缩进 | text-indent：2em 可以为负值 |
| 文本水平对齐方式 | text-align: left[左]center[中]right[右] |
| 对象中空白处理 | white-space：white-space：normal[自动换行] pre[换行和空白受保护]nowrap[强制在同一行显示] |
| 文本大小写控制 | text-transform：none[正常大小] capitalize；[每个单词的第一个字母转换成大写]uppercase[转换成大写]lowercase[转换成小写] |
| 元素的垂直对齐方式 | vertical-align：sub[设置文字为下标] super[设置文字为上标]top[把元素的顶端与行中最高元素的顶端对齐]text-botton[把元素的低端与父元素字体的低端对齐] |
9.盒子模型
4个属性
Content 内容
Padding 内边距
Border 边框
Margin 外边距
元素的总宽度应该这样计算：
元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距
元素的总高度应该这样计算：
元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距
Padding和margin的用法相似
一个参数时 表示 上下左右
二个参数时 表示 上下 和 左右
padding:100px 200px 300px; 表示 上，左右，下
padding:100px 200px 300px 400px; 表示 上 右 下 左
简单应用：
<html>
<head>
<style>
div {
background-color:pink;
width: 300px;
border: 15px solid black;
padding: 50px;
margin: 20px auto;
}
style>
head>
<body>
<h1 style="text-align:center;">演示h1>
<div><h3>CSS 盒模型（框模型）实质上是一个包装每个 HTML 元素的盒子。它包括：边框、内边距（填充）、外边距以及实际的内容。h3>此文本是盒子里的内容。我们添加了 50px 的内边距，20px 的外边距和 15px 的绿色边框。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。div>
body>
html>
运行如图
