块元素标签与内联元素标签
块元素标签：默认占有一行，可以设置宽度和高度
内联元素标签：默认可以排列在一行，不能设置宽度和高度，宽度和高度由内容决定
* 图片标签和input标签是行内块元素,具有内联元素和块元素的特点(可以标签的宽高)
实体字符
1> & --> "&"
2> ¥ -->人民币 "¥"
3> © -->版权 "©"
4> × -->乘号 "×"
5> ÷ -->除号 "÷"
锚点
1> 定义锚点:
Ⅰ <a name="锚点名">a>
Ⅱ <a id="锚点名">a>
2> 跳转锚点:
Ⅰ <a href="#锚点名">内容a>
"#"表示不跳转
label标签
for + id 高亮选中表单
eg:
<label for="username">用户名label>
<input type="text" id="username" name="username">
运行结果:
鼠标单击用户名标签会高亮选中用户名的输入文本框
属性
1> 表单属性
checked="checked" 单选按钮/多选按钮 默认选中
selected="selected" 下拉列表 默认选中
disabled = "disabled" 禁止点击按钮
placeholder= "string" "string" 是用于占位的字符串
eg1:
label>性 别label>
<input type="radio" name="gender" value="0">男
<input type="radio" name="gender" value="1">女
<input type="radio" name="gender" value="3" checked="checked">保密
运行结果:
表单的性别默认选为保密
eg2:
<label>籍 贯label>
<select name="site">
<option value="0">北京option>
<option value="1">上海option>
<option value="2">广州option>
<option value="3" selected="selected">上海option>
select>
运行结果:
籍贯默认选中上海
eg3:
<input type="button" value="普通按钮" disabled="disabled">
运行结果:
按钮变为灰色,无按钮效果
eg4:
<label for="info">简 介label>
<textarea name="info" id="info" cols="20" rows="10" placeholder="请输入个人简介"> textarea>
运行结果:
多行文本输入框在没有输入内容前显示占位的字符串,输入文本内容后占位字符串消失.
2>
样式
1> 表单样式
resize: none; 禁止修改多行文本框尺寸
outline:none; 设置input框获得焦点时，是否显示高亮的框线
2> 列表样式
list-style: none; 去掉列表项的小圆点
3> 块元素样式
margin: auto; 设置块元素相对页面水平居中
4) 样式效果
cursor: pointer; 光标移动到按钮上方显示手指
浮动
一.浮动的特点
1) 浮动元素不占空间
2) 浮动元素层级要高于普通元素半级
3) 设置浮动的元素，一定是块元素
4) 浮动可以横向排列
二.设置元素浮动
1) 利用float属性
2) 利用绝对定位(position: absolute;)与固定定位(position: fixed;)
* 给元素设置绝对定位与相对定位会使元素脱离文档流，不占据文档流的位置
* 绝对定位是相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
三.浮动流
浮动元素产生浮动流
所有产生了浮动流的元素,块级元素看不到他们,产生了bfc的元素和具有文本属性(inline)的元素以及文本都能看到浮动元素.
*即浮动元素不是分层,他对不同属性的元素会产生不同的效果(可以理解为对块元素不可见,对产生了BFC的元素和具有文本属性(inline)的元素可见)比如img和input标签是可见的因为他们具有inline属性
*设置元素为浮动和修改元素具有inline属性都会触发BFC
四.清除浮动流
清除浮动流的作用:解决块元素无法包裹浮动元素的问题
方法一:
<body>
<div class="wrapper">
<div class="content">1div>
<div class="content">2div>
<div class="content">3div>
div>
body>
<style>
.wrapper{
border: 1px solid red;
float: left;
//以上四种方式都可以,前三种系统会将元素装换成inline-block,会触发BFC,就能看到浮动元素
}
.content{
float: left;
color: white;
background: black;
width: 100px;
height: 100px;
}
style>
方法二:
<body>
<div class="wrapper">
<div class="content">1div>
<div class="content">2div>
<div class="content">3div>
<p>p> //不需要定义内容,只要逻辑上存在就能撑开wrapper的边框线
div>
body>
<style>
.wrapper{
border: 1px solid red;
}
.content{
float: left;
color: white;
background: black;
width: 100px;
height: 100px;
}
p{
clear: both; //清除周边的浮动流
# 语法：
# clear : none | left | right | both
}
style>
四.块级元素浮动之后的布局情况
https://blog.csdn.net/qq_35485206/article/details/75020174
选择器
一. 选择器的使用
一个类选择器可以被多个标签使用
一个标签可以使用多个类
class="类名1 类名2"
二. 伪类选择器
1> hover选择器
定义方法:
.类名/标签名(比如p、a、span):hover{
样式1;
样式2;
...
}
类的使用方法:
class="类名"
2> link选择器
定义方法同 2>
3> visited选择器
定义方法同 2>
4> active选择器
定义方法同 2>
* 1>、2>、3>、4>总结:
依次表示 鼠标悬停、未访问、已访问、鼠标点击 的样式
不必单独定义类,可以同时定义类和伪类选择器
三. 属性选择器
定义方法:
.类名/标签名(比如p、a、span)[属性+条件+属性值]{
样式1;
样式2;
...
}
eg1:
给指定类或标签满足属性条件的元素加样式
/*给带有class属性的元素加样式*/
.box li[class] {
font-size: 70px;
}
/*给带有class属性,且属性值为"one"元素加样式*/
.box li[class="one"] {
color: red;
}
/*给带有class属性,且属性值以"col"开头的元素加样式*/
.box li[class^="col"] {
list-style: none;
}
/*给带有class属性,且属性值以"d"结尾的元素加样式*/
.box li[class$="d"] {
color: green;
}
/*给带有class属性,且属性值包含"o"的元素加样式*/
.box li[class*="o"] {
color: orange;
}
/*给带有type属性而且其属性值"text"的元素加样式*/
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
快捷键
ul>li*n 快速创建含有n个列表的列表标签
eg1:
ul>li*3
运行效果:
<ul>
<li>li>
<li>li>
<li>li>
ul>
ul>(li>a{列表文字})*n 快速创建含有n个列表的链接列表标签
eg2:
ul>(li>a{列表文字})*3
运行效果:
<li><a href="">列表文字a>li>
<li><a href="">列表文字a>li>
<li><a href="">列表文字a>li>
div*n 快速创建n个通用块容器标签
eg3:
div*3 + table键
运行效果:
<div>div>
<div>div>
<div>div>
Javascript浏览器调试
1) alert(调试信息); --将调试信息以弹窗形式显示,会默认阻止程序执行
2) console.log(调试信息); --将调试信息显示在Console控制台(路径:google浏览器-检查-Console)
3) document.write(调试信息); --将调试信息添加到主窗口,且不覆盖原内容
4) document.title= 调试信息; --将调试信息显示在浏览器标题栏
document.getElementsByTagName("标签名")[n].style.background = "green";
* n 表示标签名为"标签名"的第n个元素
访问body标签可以简写为: document.body.style.background = "red";
常见问题
图片并排排列图片之间会有间距
原因:凡是带有inline的元素都有文字属性(文字之间有空格或换行,且自带行间距)
eg:
书写方式1
<img src="1.jpg" alt="1">
<img src="1.jpg" alt="1">
书写方式2
<img src="1.jpg" alt="1"><img src="1.jpg" alt="1">
输出结果:
方式1两图片横向会有8px(第一个图片右方的4px+第二个图片左方的4px)的间距,纵向会有4px的间距
方式2图片之间没有有间距
解决办法:
1) 按方式1书写(只能解决横向间距的问题<建议书写方式>)
2) 设置img样式(通过将外边距设置为负值删除间距)
img{
margin-left: -8px;
}
