ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

5月22日

2022-05-23 08:32:17  阅读：129  来源： 互联网

标签：22 color 标签 100px 456 background margin


1.标签：

```
<!DOCTYPE html>
<!-- html5的标志 -->
<html>
<!-- language提示语言 -->
<head>
<!-- head网页的设置相关 -->
<meta charset="utf-8h>
<!-- meta标签是元标签，无实义 -->
<meta name="viewport"0 content="width=device-width, initial-scale=1">
<!-- viewport：视图端口 width=设备-宽度 initial-初始缩放1倍 -->
<title></title>
</head>
<body>
<div>
无实义标签
</div>

<p>文章段落标签，一个自然段是一个P</p>
<h1>网页标题-一级标题- 1，2，3，4，5，6级标题</h1>
<h2>123</h2>
<h3>123</h3>
<!-- h1-h3可以被搜索引擎搜索到，和标签一个网页只需有一个 -->
<h4>123</h4>
<h5>123</h5>
<h6>123</h6>
<ul type="circle"><!-- square,disc -->
<li>456</li>
<li>456</li>
<li>456</li>
<li>456</li>
<li>456</li>
<li>456</li>
<li>456</li>
</ul>
<!-- ul的儿子只能是li----无序列表 -->
<ol type="a">
<li>456</li>
<li>456</li>
<li>456</li>
<li>456</li>
<li>456</li>
<li>456</li>
<li>456</li>
</ol>
<!-- ol的儿子只能是li----有序列表 -->
<a href="http://www.baidu.com">百度</a>
<a href="tencent://message/?uin=3264729030&Site=xxx&Menu=yes" target="_blank" rel="nofollow">加我QQ</a>
<a href="mailto:wang_chaoju@126.com">发邮件</a>
<a href="'tel:'+ '110' ">call police</a>
<img src="http://vip.y.com/img/shadow.7aca0bd7.png"
alt="关于本图片一些描述性文字 "
title="鼠标放上来，出现的提示性文字。注意：不是img标签特有的，所有标签都有title" >
<!-- 由于网路原因，图片丢失等原因导致图片无法显示，alt使用户即使看不见图片，也不影响对整个网页的浏览-----alt关于本图片的一些描述性文字。 -->
<!-- 供读屏软件，有利于盲人阅读。 -->
<!-- 有利于搜索引擎的抓取 -->
<input>
<!-- 默认type=text -->
<input type="number">
<input type="password" value="123">
<input type="button" value="baidu">
<input type="submit" value="登录">
<button>123456</button>
</body>
</html>
```
div是没有实际意义的标签
```
<div>
无实义标签
</div>

```
<p>文章段落标签，一个自然段是一个P</p>
<a>标签一般用于超链接，例如照片，邮箱，QQ号等等...

```html
<a href="http://www.baidu.com">百度</a>
<a href="tencent://message/?uin=3264729030&Site=xxx&Menu=yes" target="_blank" rel="nofollow">加我QQ</a>
<a href="mailto:wang_chaoju@126.com">发邮件</a>
<a href="'tel:'+ '110' ">call police</a>
```
alt="关于本图片一些描述性文字 "
title="鼠标放上来，出现的提示性文字。注意：不是img标签特有的，所有标签都有title" >
由于网路原因，图片丢失等原因导致图片无法显示，alt使用户即使看不见图片，也不影响对整个网页的浏览-----alt关于本图片的一些描述性文字。
供读屏软件，有利于盲人阅读。
有利于搜索引擎的抓取。
```html
<input>
<!-- 默认type=text -->
<input type="number">
<input type="password" value="123">
<input type="button" value="baidu">
<input type="submit" value="登录">
<button>123456</button>
```

input格式默认为type=text，常用于输入文字，例如账号，密码等等...
button为按钮，可更改按钮框内文字

# 2.选择器
选择器有id，class.....等选择器。
其中id选择器具有唯一性，前面有了一个之后，后面不可以再出现相同id的id选择器，而class选择器不具备唯一性，后面可以重复使用。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<style>
li{color:red;}
#li1{background: blue;}
.aaa{background: yellowgreen;}
</style>
</head>
<body>
<ol>
<li>123456789</li>
<li>123456789</li>
<li id="li1">123456789</li>
<!-- id具有唯一性，有了一个后面不能重复 -->
<li>123456789</li>
<li class="aaa">123456789</li>
<li class="aaa">123456789</li>
<!-- class不具有唯一性，后面可以重复 -->
<li>123456789</li>
</ol>
</body>
</html>
```
# 3.行块属性
标签分为三类，有块属性，行内属性，行内块属性。
块标签：必须独自霸占一整行，默认宽度100% 常见： div，p，h1-6，ul，ol，li
行内标签：简称行标签，默认共处一行，不可设置宽高。有 a，span，strong
行内块标签：既可以设置宽高，又可以共处一行。例如input，img
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<style type="text/css">
div{width: 100px;height: 100px;background: blue;display: inline-block;vertical-align: top;}
span{width: 100px;height: 100px;background: red;display: inline-block;vertical-align: top;}
input{width: 100px;height: 100px;background: greenyellow;}
</style>
</head>
<body>
<!-- 标签分为三类：块标签，行内标签，行内块标签 -->
<!-- 块标签：必须独自霸占一整行，默认宽度100% 常见： div，p，h1-6，ul，ol，li -->
<!-- 行内标签：简称行标签，默认共处一行，不可设置宽高 a，span，strong-->
<!-- 行内块标签：既可以设置宽高，又可以共处一行。 input，img-->
<div>woshi--div</div>
<div>woshi--div</div>
<span>woshi--span</span>
<!-- <br> -->
<span>woshi--span</span>
<!-- <br> -->
<input type="" name="">
<input type="" name="">
</body>
</html>
```
# 4.优先级
驼峰命名法：
1.大驼峰命名法（ClassName）
2.小驼峰命名法（className）
优先级：
1.后来者居上原则
2.id（100）>class(10)>Tag标签(1)
3.!important优先级最高，但不建议使用，将来不好改
4.行内样式表（标签内部style）>头部样式表（head标签里的style）=外部样式表（外部CSS用link引入)
CSS两大特征：
1.层叠性
2.继承性
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<link rel="stylesheet" href="css/text.css">
<style type="text/css">

div{font-size: 40px;}
.p1{width: 500px;height: 500px;background-color: lightblue;}
#pId{background-color: red;}

</style>


</head>
<body>
CSS两大特征：
1.层叠性
2.继承性
<div>
<span>继承父级font-size大小</span>
</div>
<p class="p1" id="pId" style="background-color: blue;">

驼峰命名法：
1.大驼峰命名法（ClassName）
2.小驼峰命名法（className）
优先级：
1.后来者居上原则
2.id（100）>class(10)>Tag标签(1)
3.!important优先级最高，但不建议使用，将来不好改
4.行内样式表（标签内部style）>头部样式表（head标签里的style）=外部样式表（外部CSS用link引入)
</p>
</body>
</html>
```

 

# 1.盒模型
在div标签之中margin为外边框属性，padding为内边框属性。
```html
div{
width: 100px;
height: 100px;
background-color: red;
margin-left: 50px;
margin-top: 50px;
padding-top: 50px;
}
```
此代码设置为长宽100px，背景为红色，左外边框为px，上外边框宽度为px，上内边框为px。
```html
margin: 100px; 四个方向的都是100px
margin: 100px 200px;上下100px，左右200px
margin: 100px 200px 300px;上100px，左右200px，下300px
margin: 100px 200px 300px 400px;上100px，右200px，下300px，左400px，顺时针顺序
argin-left: auto 0;margin-right: auto 0;
```
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Documnet</title>
<style type="text/css">
/* #div1{
width: 100px;
height: 100px;
background-color: darkred;
margin-left: 50px;
margin-top: 50px;
padding-top: 50px;
}
#div2{
width: 20px;
height: 20px;
background-color: blue;
}*/
#div3{
width: 300px;
height: 500px;
background-color: blue;
/*margin: 100px; 四个方向的都是100px*/
/*margin: 100px 200px;上下100px，左右200px*/
/*margin: 100px 200px 300px;上100px，左右200px，下300px*/
/*margin: 100px 200px 300px 400px;上100px，右200px，下300px，左400px，顺时针顺序*/
/* margin-left: auto 0;margin-right: auto 0;*/
/* margin: 100px auto 0;*/
/* border: 1px solid black;*/
border: 60px double red;
/*soild dotted dashed double*/
border-top-color:red;
/*层叠性*/
border-radius: 180px;
/*border-bottom-right-radius: 50%;*/
}
</style>
</head>
<body>
<!-- <div id="div1">
<div id="div2">
</div>
</div> -->
<div id="div3">
</div>
</body>
</html>
```
# 2.浮动
浮动：浮动的框可以向左向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
ul{
background-color: lightblue;
}
div {
width: 100px;
height: 100px;
display: inline-block;
}
/*浮动：浮动的框可以向左向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。*/
#div1 {
background-color: red;float: left;
}
#div2 {
background-color: black;
}
</style>
</head>
<body>
<ul>
<div id="div1">
</div>
<div id="div2">
</div>
</ul>
</body>
</html>
```
# 3.定位
定位分为五种：
相对定位：相对于本身在文档流之中的位置定位，还会占据原先的位置。
绝对定位：相对于离他最近的已经定位父级定位。
固定定位：相对于浏览器窗口定位。
静态定位：static默认
粘性定位：sticky
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
body{height: 10000px;margin: 0;}
div{width: 100px;height: 100px;}
#guDing{background-color: red;position: fixed;top: 0;width: 100%;left: 100px;}
#xiangDui{background-color: lightblue;position: relative;left: 100px;top: 200px;}
#jueDui{background-color: lightseagreen;position: absolute;left: 100px;top: 300px;}
#nianXing{background-color: lightyellow;position: static;top: 0;}
</style>000
</head>
<body>
定位分为五种：
相对定位：相对于本身在文档流之中的位置定位，还会占据原先的位置。
绝对定位：相对于离他最近的已经定位父级定位。
固定定位：相对于浏览器窗口定位。
静态定位：static默认
粘性定位：sticky

<divi id="guDing">

</div>
<div id="xiangDui">

</div>
<div id="jueDui">

</div>
<div id="nianXing">

</div>
</body>
</html>
```
meta charset="utf-8" 规定页面的编码格式是utf-8
# 4.百度页面基本设置（部分）
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><!-- 规定页面的编码格式是utf-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/baidu.css">
</head>
<body>
<ul id="nav">
<li>
<a href="#">新闻</a>
</li>
<li>
<a href="#">hao123</a>
</li>
<li>
<a href="#">地图</a>
</li>
<li>
<a href="#">贴吧</a>
</li>
<li>
<a href="#">视频</a>
</li>
<li>
<a href="#">图片</a>
</li>
<li>
<a href="#">网盘</a>
</li>
<li>
<a href="#">更多</a>
</li>
</ul>
<div id="dengLuDeBaBa">
<button>设置</button>
<button id="loginBtn">登录</button>
</div>
<div id="content">
<a href="">
</a>
<div >
<input type="text" name="">
<input type="submit" name="">
</div>
</div>
<ul>
<li><a href="">XXXX</a></li>
<li><a href="">XXXX</a></li>
<li><a href="">XXXX</a></li>
<li><a href="">XXXX</a></li>
<li><a href="">XXXX</a></li>
<li><a href="">XXXX</a></li>
<li><a href="">XXXX</a></li>
<li><a href="">XXXX</a></li>
<li><a href="">XXXX</a></li>
<li><a href="">XXXX</a></li>
</ul>
<div>
</div>
</body>
</html>
```
a标签不会继承父级的颜色，需要单独设置
权值或者权重会影响先后顺序

标签：22,color,标签,100px,456,background,margin
来源： https://www.cnblogs.com/ssc1/p/16299923.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有