HTML常见标签
头标签
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="1"/>每一秒自动刷新
<meta http-equiv="refresh" content="1;url=http://www.baidu.com"/>每一秒自动跳转到url地址
</head>
普通标签
<p>:段落标签
<h1>
<h6>以次减小，成段展示，加粗
<strong>加粗</strong>
<em>斜体
<del>中划线
容器，可以绑定操作
<div>
<span>
空格，回车：文本分隔符
 ；空格
<<
>>
<br>回车
<hr> 水平线
图片，超链接
<img src="" alt="" title="">
作用：插入图片
src:url，相对路径，绝对路径
alt:当网速不好时，图片加载不出来便会显示其属性值
title:当鼠标放在图片上时，会显示其属性值
<a href="" target="_blank"></a>
target：_blank是在新空白页打开
<a href="tel:电话号码"></a>
拨打电话
<a href="mailto:邮件地址"></a>
发邮件
<a href="#id"></a>
当作锚点，连接到id区域
form表单
- 类型，属性名，属性值
- 对于多选和单选以及下拉菜单，设置默认值为checked=“checked”
<form action="" method="get/post">
<p>
<!--输入框的值就是值，value-->
username:<input type="text" name="" value="输入框中的默认值"
</p>
<p>
password: <input type="password" name="">
</p>
<p>
<input type="submit" value="login">
</p>
<p>
<!--单选,同一个单选题目的name属性值相同-->
<input type="radio" name="uname" value="">
</p>
<p>
a <input type="radio" name="uname"
value="a" checked="checked"><!--默认选中-->
</p>
<p>
b <input type="radio" name="uname"value="b">
</p>
<p>
c<input type="radio" name="uname" value="c">
</p>
<p>
<!--多选,同一个多选题目的name属性值相同-->
<input type="checkbox" name="uname" value="">
</p>
<p>
a <input type="checkbox" name="uname" value="a">
</p>
<p>
b <input type="checkbox" name="uname"value="b">
</p>
<p>
c<input type="checkbox" name="uname" value="c">
</p>
</form>
下拉菜单
<form>
<select name="qqq">
<option value="111">111</option>
<option value="222">222</option>
</select>
<input type="submit">
</form>
小案例
onfocus 事件：当 input 输入框获取焦点时执行一段 Javascript代码：
onblur 事件：当用户离开input输入框时执行一段Javascript代码：
实例
当 input 输入框获取焦点时执行一段 Javascript代码：
<html>
<head>
<meta charset ="utf-8">
<title>msn</title>
<script>
function jujiao(x)
{
if(x.value=='请输入关键字')
{
x.value='';
x.style.color='#424242';
}
}
function likai(x)
{
if(x.value=='')
{
x.value='请输入关键字';
x.style.color='#999999';
}
}
</script>
</head>
<body>
<form action="" method="">
<input type="text"
value="请输入关键字"
style="color: #999999"
onfocus="jujiao(this)"
onblur="likai(this)">
</form>
</body>
</html>
主流浏览器及其内核
| 主流浏览器 | 内核 |
|---|---|
| IE | trident |
| Firefox | Gecko |
| Google Chrome | Webkit/blink |
| Safari | Webkit |
| Opera | presto |
css
- 三种引入方式
- 同步与异步
- 选择器4种
- 选择器优先级
- 引入方式的优先级
- 权重
- css属性
1、选择器优先级
<div id="a"></div>
<div class="b"></div> <div class="c d"></div>//两个class
<!-- 属性选择器 -->
<!-- [属性] --> 或者<!-- [属性="属性值"] -->
<!-- 属性和class优先级相同 -->
<!-- 标签选择器 -->
<!-- 通配符选择器 * -->
！important
2、css权重，并且权重之间是256进制
!imporant infinity
行间样式 1000
id 100
class|属性|伪类 10
标签选择器|伪元素 1
通配符选择器 0
3、border
4、text文本
- text-align
- line-height 实现水平垂直居中
- text-decoration:四个值
- text-indent:首行缩进
text-indent: 2em;单位：em 是相对单位， 1em=1 font-size; - cursor
cursor: pointer;
5、伪类选择器
- 在标签后加上伪类选择器，比如’:hover’选择器
a:hover{
backgroung-color:#f40;
}
6、inline 压缩
7、先定义功能
符合模块化开发，提高效率，复用性，适合团队合作
8、开发前对一些标签初始化，可以修改一些标签的功能。初始化时，可以使用通配符，因为通配符的权重为0（不明白）。
9、行级元素和航机块元素有文字特性，文字分隔符，解决图片间隔问题
<img src="../qq截图/n.jpg"><img src="../qq截图/n.jpg">
10、position
<!-- <em>1</em> -->
<!-- 为什么通配符好 -->
<!-- 盒子模型 四个属性，三个属性，盒模型计算问题
盒子的宽高不包括margin-->
<!-- body有一个margin=8px -->
<!-- opacicy -->
<!-- 层模型，absolute,relative,想对于原来位置平移 ;fixed;居中-->
<!-- margin是在原有位置上移动。position是按照规则移动 -->
小案例
五环，实现居中，并且随着窗口改变
<html>
<head>
<meta charset="utf-8">
<title>msn</title>
<style>
*{
margin: 0px;
}
.circle1,
.circle2,
.circle3,
.circle4,
.circle5{
width: 100px;
height: 100px;
border-radius: 50%;
border: 10px solid black;
}
.circle1{
border-color: crimson;
position: absolute;
left: 0px;
top:0px;
}
.circle2{
border-color: darkgoldenrod;
position: absolute;
left:130px;
top:0px;
}
.circle3{
border-color: yellow;
position: absolute;
left:260px;
top:0px;
}
.circle4{
border-color: aquamarine;
position:absolute;
top: 70px;
left: 65px;
}
.circle5{
border-color: purple;
position:absolute;
top: 70px;
left: 195px;
}
.contain{
/* border: 2px solid black; */
width: 380px;
height: 190px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -190px;
margin-top: -95px;
}
</style>
</head>
<body>
<div class="contain">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
<div class="circle5"></div>
</div>
</body>
</html>
效果图
11、margin
- 相对于父容器进行调整
- Margin塌陷：通过除法pfc解决
- float,position,inline-block,overflowa;hidden会触发bfc
12、float
- 清除浮动可以使块级元素作为父级元素时被浮动的子元素撑开,利用伪元素。
- 设置position或者float之后，会变成行级块元素
- 自动变成行级块元素
- 可以写出文字环绕图片的效果
- 清除浮动：
伪元素时行级元素
ul::after{
float: left;
content: '';
display: block;
clear: both;
}
13、单行文本溢出
.container{
width: 500px;
height: 30px;
border: 1px solid #f40;
line-height: 30px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
多行文本…
14、背景图片 background-image: url();
- 图片代替文字应该如何代替？
<html>
<head>
<meta charset="utf-8">
<title>图片代替文字</title>
<style>
a{
display: inline-block;
width: 270px;
height: 0px;
padding-top:129px;
line-height: 30px;
background-image: url(https://www.baidu.com/img/bd_logo1.png?where=super);
overflow: hidden;
background-size: 270px 129px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -185;
margin-top:-64.5px;
}
</style>
</head>
<body>
<div class="container">
<a href="https://www.baidu.com">百度</a>
</div>
</body>
</html>
15、块级元素可以套任何元素，行级元素只能套行级元素。但是p标签不能套块级元素
16、文本类元素和文字底对齐。如果文本类元素中有文本，则文本和里面的文本底对齐。
调节对齐线：
17、水平渐变
linear-gradient(方向,color1,color2,.....);
只写颜色：默认从上到下
方向有：to top,to bottom,to left,to right
可以添加透明度，color使用rgba(r,g,b,0~1)
0代表透明，1代表不透明
18、径向渐变
background-image: radial-gradient(shape size at position,
start-color, ..., last-color);