html常用标签
嵌套页面
<!-- 嵌套页面 -->
<div>
<!-- target属性值可以通过指定的iframe的name属性值,
实现超链接页面,在嵌套页面展示-->
<a href="https://www.jd.com" target="main_page">百度</a><!-- 百度不能跳转 -->
<a href="http://www.taobao.com" target="main_page">淘宝</a>
</div>
<iframe src="http://www.bilibili.com" main="main_page" width="100%"
height="800px scrolling="auto"></iframe>
表单标签
<!-- form表单标签 -->
<form>
<!-- type=text 声明该控件,placeholder 提示语,value文本框的输入内容 -->
<input type="text" placeholder="请输入账号名" value="">
<input type="password" placeholder="请输入密码" >
<!-- 下拉框,option子标签的value属性表示每一个下拉选项的值,value属性才会被表单提交到后台 -->
<select>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
</select>
<!-- 单选框,要想实现单选,标签内加统一name值 -->
<input type="radio" name="sex" id="1">男
<input type="radio" name="sex" id="0">女
<!-- 复选框(多选),同样实现复选加统一name属性值 -->
<input type="checkbox" value="1" name="hobby">唱
<input type="checkbox" value="2" name="hobby">跳
<!-- 文本域 -->
<textarea maxlength="50" desabled></textarea>
<!-- 按钮 -->
<input type="submit" value="提交按钮">
<input type="reset" value="重置按钮">
<input type="button" value="普通按钮">
<hr><br><br>
</form>
实体Entities
运算符表示
大于小于号可能会被误认为是标签
小于号: <
大于号: >
空格:
等同于圈c: ©
块级元素
永远独占一行
div 常用的块级元素,用于页面分区
form表单标签
h1-h6标题标签
ol有序列表
ul无序列表
p段落标签
table表格标签
内联元素
和相邻的内联元素在同一行
a 超链接标签
b粗体
br下划线
i斜体
s中划线
img图片
input输入框
label 表格标签
select下拉选择框
textarea文本域,多行文本输入框
CSS
定义
层叠样式表,定义如何显示HTML元素(长宽高、颜色、间距、背景等展示效果)
基本语法
内联样式优先级>内部样式表>外部样式表
(内部外部样式表h5改为谁在后面谁优先级大,即前面写的会覆盖后面写的)
内联样式
/*body标签内*/
<p style="color : blue;">123abc <p>
内部样式表
/*在head标签的style标签内*/
p{/* 选择器 */
color: red;/* 属性:值 */
font-size: 14px;/* 属性:值 */
}
选择器:声明哪个元素采用这个样式表(选择器可以是标签、class、id和属性)
属性:样式属性
值:属性对应的值
选择器分类
标签选择器
p{/* 选择器 */
color: red;/* 属性:值 */
font-size: 14px;/* 属性:值 */
}
类选择器
标签中声明class属性
head的style内
.p1{/* 类选择器,找的是标签的class属性值,多个标签的class属性值可以
相同*/
font-weight: bold;
}
.p2{
font-family: '楷体';
}
body内
<p class="p1">11111111111111</p>
<!-- 一个标签的class属性可以有多个值 -->
<p class="p1 p2"> 中享思途 </p>
id选择器
style内
#ip1{/* id选择器 :id属性的值不能重复*/
color: green;
width: 80%;
}
body内
<input type="text" id="ip1">
属性选择器
style内
input[type=password]{/* 属性选择器 :选择具有某一个属性值的元素*/
font-size: 24px;
}
body内
<input type="password">
选择器分类
(奇奇怪怪选择器)
3.1 上下文选择器(派生选择器)
通过依据元素在其位置的上下文关系来定义样式。
分类:
后代选择器
tr td { color: pink;}
子元素选择器
a>img { width:200px;}
/*style*/
a>img{
width: 500px;
}
/*body*/
<a href="http://www.baidu.com">
<img src="img/study.jfif">
</a>
<img src="img/R-C (1).jfif">
相邻兄弟选择器
h1+p { padding: 5px;}
style
h1+p{
font-size: 90px;
}
body
<p>444444444444444</p>
<h1>1111111</h1>
<p>22222222222</p>
<p>33333333333</p>
引入样式
引入外部样式表(推荐)
外部样式表:将头部标签内style标签里面的内容封装到一个css文件中,将文件保存到CSS文件目录下
路径:网页与css文件所在文件夹同级别,直接文件夹名/.css表示路径,若操作页面与css文件所在文件夹低一级,则用../调整为同级别再进行文件夹名/.css表示路径(即../CSS/xxx.css)
在头部标签插入
<link rel="stylesheet" type="text/css" href="css/cssDemo">
CSS盒子模型
div:盒子标签
如果把h5元素看成是一个盒子,盒子组成应该是:外边距:margin 边框粗细:border 内边距:padding 内容:content
margin padding
css文件中
#parents{
border: 1px solid black;
width: 500px;
height: 400px;
padding: 40px;/*padding距离内边框 和margin距离外边框 其他用法同理*/
margin: 0 auto;/*置顶居中,表示在html中的位置上下(上)距离0,左右距离自动*/
margin: 20px 40px 50px 70px;/*表示该div盒子顺时针表示距离上右下左边框分别为:20px,40px,50px,70px*/
margin-top: 40px;/*距离顶部40px*/
/* margin-bottom: 40px;
margin-left: 30px;
margin-right: 40px;; */
}
div{
border: 1px solid black;
width: 300px;
height: 200px;
}
body中
<div id="parent">
<div></div>
</div>
border边框
border:设置整个边框的属性:粗细,边框类型,颜色 solid实线dashed虚线
border-width:设置边框宽度(粗细) :border-width:1px
border-color
border-style:边框样式(实线虚线)
border-top:设置上边框样式:border-top: 1px solid black
文本样式
font:设置所有的字体属性
font-family:设置字体
font-size:字体大小
font——style:样式:normal正常默认字体,italic、oblique斜体
font-weight:字体粗细:font-weight: 300;(500正常,600加粗)
背景样式
background: 设置背景全部属性
background-color:设置背景色
background-size:背景图尺寸
background-image:设置背景图
background-position:设置背景图的起始位置:background-position:top center
background-position:50px 100px;左右50px,上下100px
background-attachment:背景图像是否固定或随页面的其余部分滚动
background-attachment:fixed(相对浏览器窗口而言是固定的,相对内容来说是滚动的)
background-repeat:设置背景图像是否重复:background-repeat:no-repeat;
body{
background-color: aqua;/*背景色*/
background-image: url(CSS/cssDemo.css);
}
CSS定位
position:属性定位
fixed:参照物:浏览器,脱离DOM流,不占空间,常用作漂浮广告,返回顶部等特效样式
relative:参照物:自身,存在DOM流中,占据原先的空间(top、bottom、left、right等,使指定元素相对其正常的位置进行便宜,不脱离文档流)
static静态定位:HTML元素的默认值,没有定位,元素出现在正常的流中,(按照文档的书写布局自动分配在一个合适的地方,用magin改变位置)
absolute:参照物:最近的已定位(fixed、relative、absolute)祖先元素
绝对定位:如果没有已定位的祖先元素,那么他的位置相对于html或body脱离DOM流不占据空间(通过top、right、left、bottom等属性设置偏移值)
/* position: fixed; *//* 定位:相对于浏览器窗口固定位置 */
/* position: relative; *//* 相对自身原来的位置 */
/* left: 50px;
top: 200px; */
position: absolute;/* 参照物是距离最近的已经定位的祖先元素,如果祖先元素没有定位,则参照物是body标签 */
left: 100px;
right: 150px;
overflow属性(溢出)
见day27