首页 > 电脑常识 > 云计算

HTML的一些常用的标签和部分css知识

admin 云计算 2021-04-26 15:56:13 html   css   html5  
后台-系统设置-扩展变量-手机广告位-内容正文底部

一.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标签 超链接 作用页面跳转

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<a href="c.html">a</a> <!--点击a就会跳到c.html-->
</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 ----映射
通常一起使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
	<img src="./image/1.jpg" alt="猫" usemap="#cat">
	<!-- "./image/1.jpg"是相对路径  ./ 当前路径  ../ 当前路径的父路径-->
        <map id="cat" name="cat">
	       <area shape="circle" coords="555,506,50" href="https://www.baidu.com/?tn=62095104_23_oem_dg"></area>
	      <!--shape="circle"画圆,圆心(555,506)半径50;鼠标点击圆所在区域则连接到href="https://www.baidu.com/?tn=62095104_23_oem_dg"-->
        </map>
</body>
</html>

如下图
在这里插入图片描述
点击圆所在区域进入https://www.baidu.com/?tn=62095104_23_oem_dg连接
如下图
在这里插入图片描述

五.多窗口框架 frameset

多窗口的框架标签 里面的每一个窗口都是一个frame 注意:标签不能和body标签连用
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<frameset rows="15%,70%,15%"><!--划分框架结构为三行第一行占15%,第二行占70%,第三行占15%-->
	<frame src="a.html " name="1"></frame>

    <frameset cols="20%,80%"><!--架结构第二行划分为两列,第一列占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代码,其他的类似

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<a href="c.html">a</a> 
</body>
</html>

打开如下
在这里插入图片描述

六.视频标签video

以下是简单应用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<video src="./video/1.mp4" controls="controls">
</video>
</body>
</html>

浏览器运行如下图
在这里插入图片描述

七.音频标签audio

以下是简单应用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body> 
	<audio src="./music/1.mp3" controls="controls"><!--controls该属性,则向用户显示控件,比如播放按钮。-->
</audio>
</body>
</html>

浏览器运行如下图
在这里插入图片描述

八.列表标签

1. 有序列表

ol 有序列表标签,li 列表的选项
简单应用如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<ol>
	 <li>第1章</li>
	 <li>第2章</li>
	 <li>第3章</li>
	 <li>第4章</li>
	</ol>
</video>
</body>
</html>

运行显示如下图
在这里插入图片描述

2. 无序列表

ul无序列表标签,li 列表的选项
简单应用如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<ul>
	 <li>第1章</li>
	 <li>第2章</li>
	 <li>第3章</li>
	 <li>第4章</li>
	</ul>
</video>
</body>
</html>

运行显示如下图
在这里插入图片描述

3. 定义列表

dl 表示定义列表
dt 定义的项目
dd 定义项目的描述
简单应用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</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的语法结构

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>登录</title>
</head>
<body>
<h4 style="color:red">登录界面</h4>
</body>
</html>

在标签内写 style=”属性:属性值”

选择符{
属性:属性值
}

2.选择符

  1. 标签选择符: 以标签命名的选择符
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
p{
  color:green;
}
	</style>
</head>
<body>
<p>你好</p>
	<a href="c.html" target="2">a</a> 

</body>
</html>

以下是标签选择符标识

p{
  color:green;
}

运行如下
在这里插入图片描述

  1. id选择符: 通常用于描述一个标签具有唯一的样式。标识是 #
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
 #p1{
  color:green;
}
	</style>
</head>
<body>
<p id="p">你好</p>
	<a href="c.html" target="2">a</a> 

</body>
</html>

以下是id选择符标识

<p id="p1">你好</p>
#p1{
  color:green;
}

运行如下
在这里插入图片描述

  1. class选择符 通常用于修饰一组或者一系列具有相同样式的标签, 标识是 .
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
 .green{
  color:green;
}
	</style>
</head>
<body>
<p class="green">你好</p>
	<a href="c.html" target="2">a</a> 

</body>
</html>

以下是class选择符标识

<p class="green">你好</p>
.green{
  color:green;
}

运行如下
在这里插入图片描述
4. 通配符选择器
*{ color:green;}
的对页面中所有的标签都起作用
什么时候使用通配符选择器
一般情况下 在css页面刚开始的时候 描述通用属性
5. 包含选择符
语法e1 e2{属性:值} e1 是e2的父节点标签
标识:空格

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
body .green{
  color:green;
}
	</style>
</head>
<body>
<p class="green">你好</p>
	<a href="c.html" target="2">a</a> 
</body>
</html>

运行如下
在这里插入图片描述
6.选择符分组
标识: , 逗号
用它可以替代 通配符选择符

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<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">a</a> 
</body>
</html>

运行如下
在这里插入图片描述
7.标签指定式选择符
标签指定式选择符:如果既想使用id或class,也想同时使用标签选择符如: p.green{ color:green;}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<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">a</a> 
</body>
</html>

运行如下
在这里插入图片描述
8.组合选择选择符 前面的1-7种组合性使用
h1,p.green{ color:green;}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<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">a</a> 
</body>
</html>

在这里插入图片描述

3.css 的引入方式

  1. 行内样式
    在 标签中写入style属性
<h4 style="color:red">登录界面</h4>
  1. 内嵌样式
<style type="text/css">
 .green{
  color:green;
}
 #p1{
  color:green;
}
	</style>
  1. 外链样式
    需要先建立一个XXX.css文件
    css文件内用选择符如
 .green{
  color:green;
}

然后在需要的时候链接该文件

	<link rel="stylesheet" type="text/css" href="./css/1.css">
  1. 导入样式
    是内嵌样式和外链的样式的混合,不太常用
<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}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<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">a</a> 
	<a href="#">xxxxx</a>
	<a href="#1">hhh</a>
</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[粗体]

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<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">a</a> 
	<a href="#">xxxxx</a>
	<a href="#1">hhh</a>
</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; 表示 上 右 下 左
简单应用:

<!DOCTYPE html>
<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>

运行如图
在这里插入图片描述

文章来源:https://blog.csdn.net/qq_45726776/article/details/115999391

后台-系统设置-扩展变量-手机广告位-内容正文底部
版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:https://jcdi.cn/diannaochangshi/yunjisuan/664.html

留言与评论(共有 0 条评论)
   
验证码:
后台-系统设置-扩展变量-手机广告位-评论底部广告位

教程弟

https://www.jcdi.cn/

统计代码 | 京ICP1234567-2号

Powered By 教程弟 教程弟

使用手机软件扫描微信二维码