HTML基础标签和CSS样式层叠器

最新推荐文章于 2023-12-30 14:46:41 发布

水中明月

最新推荐文章于 2023-12-30 14:46:41 发布

阅读量216

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_46070247/article/details/107464954

版权

java基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML的格式规范:
快捷键:ctrl+/,生成注释,
注释的作用:帮助开发人员理解代码,让其他人能看懂代码.
标签的规范:键(属性)值(属性的值)双引(引号)，空格分隔。
例如:标题
基本标签：

<!doctype html>
<html>
	<head>
		<title>这是一个全手打的测试HTML</title>
		<meta charset = "UTF-8"/>
	</head>
	<body>
	<div bgcolor = "yellow">
		<div width = "100px">
			<h1>h1标题</h1>
			<h2>h2标题</h2>
			<h3>h3标题</h3>
			<h4>h4标题</h4>
			<h5>h5标题</h5>
			<h6>h6标题</h6>
		</div>
		<div>
			<b>加粗</b><br>
			风清扬
			<p>段落</p>
			
			<!--
				段落的特点：
							1、会自动换行
							2、上一行与段落与下一行之间有一个间隔
			-->
			<pre>
				原样输出
				这样都不换行，前面的空格都一起输出
			</pre>
			<!--现在一般用的比较少，都是用css文件来修饰网页-->
			<b>加粗</b>
			<i>斜体</i>
			<u>下划线</u>
			<br />换行
			<hr size = "2px" width = "2000px" color = "prink">分割符
			<del>删除线</del>
			空格特殊标签：&nbsp;&nbsp;这里空格了很多
			<br>
			商标：&reg
			<br>
			版权：&copy重庆得多附件信息技术有限公司所有
			上标：x<sup>2</sup>
			下标：H<sub>2</sub>O
			超链接：<a href="http://www.baidu.com" target = "_blank">点我</a><!--三种用法：站外，站内(跳转到站内的另一个网页)，网页里<a href = "#id名"></a>-->
			<br>
			图像：<img src = "https://pic.sogou.com/d?query=html%E6%A0%87%E7%AD%BE%E4%B8%8A%E6%A0%87&mode=1&did=1#did0"/>
			<ul >
				<li>无序的</li>
				<li>无序列的列表unlist</li>
				<li>就是无序列</li>
			</ul>
			<ol type = "A">
				<li>dlsdklf</li>
				<li>uouj</li>
				<li>有许多</li>
			</ol>
			<dl>
				<dd>
					<dt></dt>
				</dd>
			</dl>
		</div>
		
	</div>
	</body>


</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>表格总结</title>
	</head>
	<body>
		<!--<tabel>属性：border，边框。cellspacing:单元格间隙</tabel>-->
		<table border="1" height="200" cellspacing="0" cellpadding="" width="200">
			<tr align="center">
				<!--<td>属性的align是设置水平方向的位置，valign是设置垂直方向的</td>-->
				<td align="left" valign="top">1</td>
				<!--<td>属性rowspan是向下合并行，并删除相应的行 属性colspan是合并相应的列</td>-->
				<td colspan="2" bgcolor="antiquewhite"></td>
			</tr>
			<tr>
				<td rowspan="2" bgcolor="beige"></td>
	</body>
</html>

```java
``
表单form标签，
属性：action=“url地址” 比如：action= “http://www.baidu.com” ,method="get|post|uptate|delate".
method中的get和post的区别：get可以将你输入的信息在有name属性值的情况下传递到网址上，是从服务端发送。post隐秘性较好。是将信息发送给服务器，但上传文件必须要有属性enctype="multipart/form-data"
form里面的标签：
输入框：文本：< input type = "text" value = "默认值"/>
			  密码：<input type ="password" value =" 默认值" />
		      多行输入：<textarea rows="多少行数" cols="多少列"  wrap =“换行值样式off|virtual|physical”></textarea>
选框类：单选框：<input type = "radio" value ="传送的数据文本" name=“名字” id="if"/>
				<label for = "if">男</lable> 其中<lable></lable>标签作用是点击男这个字时，也可以选中这个单选框。但必须“radio”的id值和label的for值相同。以下lable的用法类似。
				<label><input type = "radio" value ="传送的数据文本" name=“名字” id="ig"/>女</lable>	要想只选择一个必须name属性值相同。
		复选框：<input type = "checkbox" checked="checked" name ="" /><!--checked="checked"表示默认选中-->
下拉列表类：<select name="传值">
				<option value = "31岁">31岁</option>（传递的是value值）
			</select>
			默认值设置：selected="selected"
文件：<input type="file" name=""/>
按钮类：<input type="submit" value="提交"/>
		<input type ="reset" value="重置"/>
		<input type ="botton" value="普通按钮，没任何用处"/>
HTML5后的新增标签属性：
		
			文本;<input placeholder="提示文本"
					autofocus="autofoc"//自动获取焦点
					required="required"//必填
					pattern="^[1-9]\d{4-9}"//正则表达式
					 />
			<input type="submit" value="提交" />

HTML5新增的属性
<input type = “text” placeholder = “提示文本” autofocus =“自动获取焦点” required =“required”(设置为必填项) pattern =“正则表达式”/>
正则表达式基本语法:
特殊符号: ^:以什么开始.
$:以什么结束.
量词: *:匹配前面的子表达式任意次.
+:匹配前面的子表达式一次或多次.大于等于1次.
?:匹配前面的子表达式零次或一次(0|1);
{n}:n是非负整数,匹配确定的n次.
{n,}至少是n次
{n,m}：n到m次
范围: \d 任意数字
[范围] 选择在范围中的数字或字符的任意一个
[^范围]//这个范围以外的数
| 要么左边，要么右边
() 整合在一起。

筛选输入框：

必须要两个标签一起使用：
<datalist id = "default">
	<option value ="实际显示的数">提示字符</option>
</datalist>和<input type ="text" name = ""  list ="default" />一起使用
将<datalist>ID值设置和<input/>list值设置一样，才可以达到筛选的目的。
例如代码为：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200724071907583.png)
结果为：![在这里插入图片描述](https://img-blog.csdnimg.cn/20200724071959710.png)

CSS样式层叠表
3种写法：
1>,标签上的style属性上
2>,写在head中的style标签中
3>,写在单独的css文件中，但需要引入
属性:
2020/7/26
背景图片：
background:url() cneter no-repeat;//图片方位不重复。
background-color: ;背景颜色
background-images：;背景图片
background-position：;背景图片的位置
background-size:背景图片的缩放
字体：
font-size:;字体大小
font-wight:字体粗细
font-family:;字体样式
font-style:;属性取值范围[normal（正常体） | italic(斜体)]
color:;字体颜色
文本：
text-align;:内容（不单单指的是字体，也可以是块状容器里面的其他标签元素）对其方式。left | right | center。
注意:1 当块状物体浮动或者脱离了文档,不能产生效果.
2 当在行内元素中设置这个属性,没有作用.,只有
**第一种方法:**通过设置display:block或者inline-block,并设置了宽和高后,可在这个标签进行设置这个属性.
第二种方法通过设置一个块状元素将这个行内元素包裹起来.然后在这个块状元素的样式中设置它的text-align属性,可以让这个文本居中.
line-height:;一般常用在设置字体的居中，属性值就是这个行的行高。
装饰：text-decoration:;(复合标签，一般常用text-decoration-line)常用属性值为none
（文字无装饰）| underline（文字装饰为下划线）。

盒子模型：
margin:;外边距
margin(-left|-right|top|bottom)；具体的边距方向，顺时针方向。
padding(-left|-right|top|bottom)；内边距。
定位：
position:;属性值(relative(相对定位)|absolute(绝对定位)|fixed(固定定位))。
**relative：**属性值：相对于这个块状元素外面的边框进行上下左右的移动。常用的属性值为：(left|right)?(top|bottom)?[正则表达式]，他元素的偏移根据自身来计算偏移量。并且占用原有的位置，没有脱离文档流。不能用clear属性来清除。
**absolute：**属性值。不占用位置，已经脱离了文档流。不能用clear属性来清除。2、元素的偏移的定位位置是基于父元素或者再上一级的父元素一直找到body标签。如果在找的标签中有position属性，并属性值为relative或absolute时，不在往上找。直接以这个标签为参照物，来设置位置。如果都没有，就以body为参照物。常用的属性值为：(left|right)?(top|bottom)?[正则表达式]，
fixed：一直在设置的位置。无论网页怎么移动。属性值。不占用位置，已经脱离了文档流。不能用clear属性来清除。
z-index:属性值;必须与relative和absolute一起使用。属性值为数值，数字越大，越在最上面。
布局：
float
1.作用是：将块状元素放在同一行上。
2.若是float:right;注意:写在前面的,就越往后靠.因为它是向右边浮动的.
3.如果在一行上父容器的宽度不足以放下去全部的子容器的浮动元素,则会自动换行.
4.如果设置了float,则该块状元素脱离了文档位置,原本占据的位置为空.下面的自动占据这一行.(clean:both可以用来清除周围的浮动,使之前的浮动位置依然有效.)
display:;inlineblock和block.两个属性值的区别:block只具有块的特性,能设置宽高.inlineblock有块的特性,还有行内元素的特性,不会自动换行.并可以设置宽高。嗯，有了宽高，才能进行更多的操作。
clean:;清除周围的浮动.使之前的浮动依然有效.（一般是上一个标签用了浮动，下一个标签就用clean清除前面的浮动。使之依然有效，不会让自己被迫占据前一个标签的位置）
overflow:;(hidden)超出部分不显示.(scroll)范围过大,设置滚动条.
注意:1 外面必须是块状元素,里面用img标签导出图片.如果设置的是块状的背景图片,就没有效果.
列表：
list-style:;none（去掉列表前的标记）
list-style-image:url();作用是将这个图片代替你列表前的小黑点标记
< ul>< li>< /li>< /ul>(为了显示样式错误)中去掉前面的标记(list-style:none;)以及让所有的< li>< /li>都在一行中(两种方式:1 设置float(不推荐) 2 设置display:inline-block;).都在< li>< /li>的样式中设置.
CSS选择器
基础选择器:
1 通配符选择器:*{};作用是给网页设置基础样式,会渲染所有的标签.
2 标签名选择器:以标签名作为选择器的名字.权重为1;
3 类选择器:;以.类名开始,权重为10;
4 ID选择器:;以#+ID值为选择器名字.权重为100;
5 行内选择器,在标签里面进行样式设置,权重值为1000;
6 样式属性后面空格加上!important.权重值为max.最大的
**复合选择器:**这里不同的选择器的权重加在一起，权重值大的，就以他说的为准。
1 群组选择器,将多个选择器分开写在一块,使用相同的CSS样式进行渲染,比如:a,.dis,#de{}
2 父子选择器,由父选择器>子选择器构成.会渲染到下面所有相同名称的子选择器,比如:#div1>li{}
3 后代选择器,#div1 a{},会渲染id值为div1下面所有的a标签.不管他是子代还是孙代.
伪类选择器:
1 :hover 鼠标悬停的效果.
用法：比如

<a>点击</a>
<style type = "text/css">
	a{//悬停前的状态
	display: inlune-block;
	width:200px;
	height:200px;
	background:url(http://123p3.sogoucdn.com/imgu/2018/04/20180404144123_595.png) center no-repeat;
	background-position:-1px(x轴) 15px(y轴);
}
	a:hover{
		background-position:-2px 15px;//通过被禁图片的移动达到效果
	}
</style>