通知设置 新通知
HTML语义化简介 —— 主体结构标签
王老师 发表了文章 • 0 个评论 • 1736 次浏览 • 2019-07-12 13:47
什么是语义化？就是用合理、正确的标签来展示内容，比如h1~h6定义标题。
语义化优点（面试重点）：
易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
有利于开发和维护，语义化更具可读性，代码更好维护。
这次介绍下主体结构标签，如图所示：
1、<header>
<header>定义文档或者文档的部分区域的页眉，应作为介绍内容或者导航链接栏的容器。
在一个文档中，您可以定义多个<header>元素，但需要注意的是<header>元素不能作为<address>、<footer> 或 <header> 元素的子元素。
2、<nav>
<nav>描述一个含有多个超链接的区域，该区域包含跳转到其他页面或页面内部其他部分的链接列表。
在一个文档中，可定义多个<nav>元素。
3、<main>
<main> 定义文档的主要内容，该内容在文档中应当是独一无二的，不包含任何在文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站logo，搜索框（除非搜索框作为文档的主要功能）。
需要注意的是在一个文档中不能出现多个<main>标签。
4、<article>
<article>元素表示文档、页面、应用或网站中的独立结构，是可独立分配的、可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。
当<article>元素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的<article>元素可嵌套在代表博客文章的<article>元素中。
5、<aside>
<aside> 元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。
6、<footer>
<footer>定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
使用footer插入联系信息时，应在 footer 元素内使用 <address> 元素。
7、<section>
<section>表示文档中的一个区域（或节），比如，内容中的一个专题组。
如果元素内容可以分为几个部分的话，应该使用 <article> 而不是 <section>。
不要把 <section> 元素作为一个普通的容器来使用，特别是当<section>仅仅是为了美化样式或方便脚本使用的时候，应使用<div>。
查看全部
什么是语义化？就是用合理、正确的标签来展示内容，比如h1~h6定义标题。
语义化优点（面试重点）：
易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
有利于开发和维护，语义化更具可读性，代码更好维护。
这次介绍下主体结构标签，如图所示：
1、<header>
<header>定义文档或者文档的部分区域的页眉，应作为介绍内容或者导航链接栏的容器。
在一个文档中，您可以定义多个<header>元素，但需要注意的是<header>元素不能作为<address>、<footer> 或 <header> 元素的子元素。
2、<nav>
<nav>描述一个含有多个超链接的区域，该区域包含跳转到其他页面或页面内部其他部分的链接列表。
在一个文档中，可定义多个<nav>元素。
3、<main>
<main> 定义文档的主要内容，该内容在文档中应当是独一无二的，不包含任何在文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站logo，搜索框（除非搜索框作为文档的主要功能）。
需要注意的是在一个文档中不能出现多个<main>标签。
4、<article>
<article>元素表示文档、页面、应用或网站中的独立结构，是可独立分配的、可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。
当<article>元素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的<article>元素可嵌套在代表博客文章的<article>元素中。
5、<aside>
<aside> 元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。
6、<footer>
<footer>定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
使用footer插入联系信息时，应在 footer 元素内使用 <address> 元素。
7、<section>
<section>表示文档中的一个区域（或节），比如，内容中的一个专题组。
如果元素内容可以分为几个部分的话，应该使用 <article> 而不是 <section>。
不要把 <section> 元素作为一个普通的容器来使用，特别是当<section>仅仅是为了美化样式或方便脚本使用的时候，应使用<div>。
css的4种引入方式5种选择器
赵老师 发表了文章 • 0 个评论 • 1869 次浏览 • 2018-04-28 11:38
2内嵌 <style></style>
3外部链接<link rel=”stylesheet” type=”text/css” href=”x..css”
4导入方式<style> @import url(test.css)</style>
区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。
选择器
1 类型选择器 p body input
2类选择器 .mybody
3id选择器 #what
4后代选择器 #what p
5伪类选择器
a：link{ color:red;}
a：visited{ color:blue;}
a：hover{ color:black;}
a：active{ color:#6600CC;}
注意：设置的顺序不能变，遵循爱恨（love/hate）原则。 ——此原则自己在网上看别人说的，便于记忆就写在这了
：root ------------------------------ 文档的根
：nth-child(n) --------------------- 作为其父元素的第n个孩子的一个元素
：nth-last-child(n) ---------------- 作为其父元素的第n个孩子的一个元素，从最后一个数起
：nth-of-type(n) ------------------ 作为其类型的第n个兄弟的一个元素
： nth-last-of-type(n) ----------- 作为其类型的第n个兄弟的一个元素，从最后一个数起
：first-child ---------------------- 作为其父元素的第1个孩子的一个元素
：last-child ----------------------- 作为其父元素的最后1个孩子的一个元素
：first-of-type -------------------- 作为其类型的第1个兄弟的一个元素
：last-of-type ------------------- 作为其类型的第1个兄弟的一个元素，从最后一个数起
：only-child -------------------- 作为其父元素的唯一1个孩子的一个元素
：only-of-type ------------------- 作为其类型的唯一1个兄弟的一个元素
：empty -------------------------- 没有孩子或文本的一个元素
：first-letter 第一个字母
：after 选择元素的后面，允许在这些位置插入内容
：before 选择元素的前面，允许在这些位置插入内容 查看全部
2内嵌 <style></style>
3外部链接<link rel=”stylesheet” type=”text/css” href=”x..css”
4导入方式<style> @import url(test.css)</style>
区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。
选择器
1 类型选择器 p body input
2类选择器 .mybody
3id选择器 #what
4后代选择器 #what p
5伪类选择器
a：link{ color:red;}
a：visited{ color:blue;}
a：hover{ color:black;}
a：active{ color:#6600CC;}
注意：设置的顺序不能变，遵循爱恨（love/hate）原则。 ——此原则自己在网上看别人说的，便于记忆就写在这了
：root ------------------------------ 文档的根
：nth-child(n) --------------------- 作为其父元素的第n个孩子的一个元素
：nth-last-child(n) ---------------- 作为其父元素的第n个孩子的一个元素，从最后一个数起
：nth-of-type(n) ------------------ 作为其类型的第n个兄弟的一个元素
： nth-last-of-type(n) ----------- 作为其类型的第n个兄弟的一个元素，从最后一个数起
：first-child ---------------------- 作为其父元素的第1个孩子的一个元素
：last-child ----------------------- 作为其父元素的最后1个孩子的一个元素
：first-of-type -------------------- 作为其类型的第1个兄弟的一个元素
：last-of-type ------------------- 作为其类型的第1个兄弟的一个元素，从最后一个数起
：only-child -------------------- 作为其父元素的唯一1个孩子的一个元素
：only-of-type ------------------- 作为其类型的唯一1个兄弟的一个元素
：empty -------------------------- 没有孩子或文本的一个元素
：first-letter 第一个字母
：after 选择元素的后面，允许在这些位置插入内容
：before 选择元素的前面，允许在这些位置插入内容
css美化复选框
刘老师 发表了文章 • 0 个评论 • 2766 次浏览 • 2018-01-27 18:03
纯css实现的主要手段是利用label标签的模拟功能。label的for属性可以关联一个具体的input元素，即使这个input本身不可被用户可见，有个与它对应的label后，用户可以直接通过和label标签交互来替代原生的input——而这给我们的样式模拟留下了空间。简而言之就是隐藏原生input，样式定义的过程留给label
以下是实现代码
<html>
<head>
<title></title>
<style>
.box{
width:500px;
margin: 0 auto;
background-color: white;
}
input[type="checkbox"]{
display: none;
}
input[type="checkbox"]+label {
position:relative;
display: inline-block;
width: 20px;
height: 20px;
background: #eee;
vertical-align: bottom;
-webkit-border-radius: 50%;
margin-right: 5px;
-webkit-box-sizing:border-box;
margin-top: 10px;
}
input[type="checkbox"]+label:before{
position: absolute;
content: "";
width: 8px;
height: 4px;
border: 2px solid #f78642;
border-top: none;
border-right: none;
transform: rotate(-45deg);
top: 5px;
left: 5px;
display:none;
}
input[type="checkbox"]:checked+label::before{
display:block;
}
</style>
</head>
<body>
<div class="box">
<input type="checkbox" value="guangpan" name="choose" id="tian">
<label for="tian"></label>
<label for="tian">天龙八部</label>
<input type="checkbox" value="kaiche" name="choose" id="shen">
<label for="shen"></label>
<label for="shen">神雕侠侣</label>
<input type="checkbox" value="laiji" name="choose" id="xiao">
<label for="xiao"></label>
<label for="xiao">笑傲江湖</label>
</div>
</body>
</html>
查看全部
纯css实现的主要手段是利用label标签的模拟功能。label的for属性可以关联一个具体的input元素，即使这个input本身不可被用户可见，有个与它对应的label后，用户可以直接通过和label标签交互来替代原生的input——而这给我们的样式模拟留下了空间。简而言之就是隐藏原生input，样式定义的过程留给label
以下是实现代码
<html>
<head>
<title></title>
<style>
.box{
width:500px;
margin: 0 auto;
background-color: white;
}
input[type="checkbox"]{
display: none;
}
input[type="checkbox"]+label {
position:relative;
display: inline-block;
width: 20px;
height: 20px;
background: #eee;
vertical-align: bottom;
-webkit-border-radius: 50%;
margin-right: 5px;
-webkit-box-sizing:border-box;
margin-top: 10px;
}
input[type="checkbox"]+label:before{
position: absolute;
content: "";
width: 8px;
height: 4px;
border: 2px solid #f78642;
border-top: none;
border-right: none;
transform: rotate(-45deg);
top: 5px;
left: 5px;
display:none;
}
input[type="checkbox"]:checked+label::before{
display:block;
}
</style>
</head>
<body>
<div class="box">
<input type="checkbox" value="guangpan" name="choose" id="tian">
<label for="tian"></label>
<label for="tian">天龙八部</label>
<input type="checkbox" value="kaiche" name="choose" id="shen">
<label for="shen"></label>
<label for="shen">神雕侠侣</label>
<input type="checkbox" value="laiji" name="choose" id="xiao">
<label for="xiao"></label>
<label for="xiao">笑傲江湖</label>
</div>
</body>
</html>
html定位详解
刘老师 发表了文章 • 0 个评论 • 2353 次浏览 • 2018-01-27 10:51
1.static（静态）定位，默认值，没有定位，元素出现在正常的流中（忽略left，right，top，bottom和z-index声明）
2.relative（相对）定位，可以通过设置left，right，top，bottom来设定其相对原来位置的偏移量，但元素本身并没有脱离普通流，也就是说元素原本所在位置依然被其占着，其余元素并不能移到他原本所在位置，相当于原来位置没有东西了但还是被占着，如下代码：
<html>
<head>
<title></title>
<style>
*{
margin:0;
padding:0;
}
.red{
background:red;
width:100px;
height:100px;
position:relative;
left:20px;
top:20px;
}
.blue{
background:blue;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div class='red'></div>
<div class='blue'></div>
</body>
</html>
在页面中显示为：
3.absolute（绝对）定位，元素会脱离普通流，使用left，right，top，bottom等属性相对其最接近的一个并有定位设置（并不一定是relative定位，只要是非static定位即可）的父元素进行绝对定位，如果不存在这样的父对象，则相对于body元素定位。如下代码：
<html>
<head>
<title></title>
<style>
*{
margin:0;
padding:0;
}
.black{
margin-top:200px;
background:black;
width:200px;
height:200px;
}
.red{
background:red;
width:100px;
height:100px;
position:absolute;
left:20px;
top:20px;
}
.blue{
background:blue;
width:100px;
height:100px;
position:absolute;
left:20px;
top:20px;
}
</style>
</head>
<body>
<div class='black'>
<div class='red'>
<div class='blue'></div>
</div>
</div>
</body>
</html>
在页面中显示为：
4.fixed（固定）定位，元素会脱离普通流，可以通过设置left，right，top，bottom来相对于窗口定位。
我们可以通过设置定位元素的z-index值来规定其在页面中的显示层级，注意，z-index属性仅对非static定位元素有效 查看全部
1.static（静态）定位，默认值，没有定位，元素出现在正常的流中（忽略left，right，top，bottom和z-index声明）
2.relative（相对）定位，可以通过设置left，right，top，bottom来设定其相对原来位置的偏移量，但元素本身并没有脱离普通流，也就是说元素原本所在位置依然被其占着，其余元素并不能移到他原本所在位置，相当于原来位置没有东西了但还是被占着，如下代码：
<html>
<head>
<title></title>
<style>
*{
margin:0;
padding:0;
}
.red{
background:red;
width:100px;
height:100px;
position:relative;
left:20px;
top:20px;
}
.blue{
background:blue;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div class='red'></div>
<div class='blue'></div>
</body>
</html>
在页面中显示为：
3.absolute（绝对）定位，元素会脱离普通流，使用left，right，top，bottom等属性相对其最接近的一个并有定位设置（并不一定是relative定位，只要是非static定位即可）的父元素进行绝对定位，如果不存在这样的父对象，则相对于body元素定位。如下代码：
<html>
<head>
<title></title>
<style>
*{
margin:0;
padding:0;
}
.black{
margin-top:200px;
background:black;
width:200px;
height:200px;
}
.red{
background:red;
width:100px;
height:100px;
position:absolute;
left:20px;
top:20px;
}
.blue{
background:blue;
width:100px;
height:100px;
position:absolute;
left:20px;
top:20px;
}
</style>
</head>
<body>
<div class='black'>
<div class='red'>
<div class='blue'></div>
</div>
</div>
</body>
</html>
在页面中显示为：
4.fixed（固定）定位，元素会脱离普通流，可以通过设置left，right，top，bottom来相对于窗口定位。
我们可以通过设置定位元素的z-index值来规定其在页面中的显示层级，注意，z-index属性仅对非static定位元素有效
清除浮动常用的三种方法
刘老师 发表了文章 • 0 个评论 • 5240 次浏览 • 2018-01-19 18:08
浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素
2、浮动会带来什么负面效果
a)会造成父元素塌陷，如果父元素有背景色，则不会显示
b)会使紧随其后的行内元素围绕排列
c)会使紧随其后的块状元素被覆盖
所以，只要有浮动产生，我们就必须清除浮动
3、清除浮动常用的三种方法
（1）添加一个空标签，这也是初学者最常用的方式
<div style='clear:both;'></div>
我们在父级标签结束之前加入此div引入clear:both;样式，这种清除浮动的方式优点是通俗易懂，适合初学者，缺点是会给页面添加很多无意义的空标签，影响代码的结构和语义化
（2）给父元素添加overflow:hidden样式（不推荐使用）
（3）使用伪元素:after
<div class="box">
<div class="left-box" style='float:left'>左边</div>
<div class="right-box" style='float:right'>右边</div>
</div>
.box:after{
display: "block";
clear:both;
height:0;
content: "";
visibility: hidden;
overflow:hidden;
}
推荐使用第三种方法清除浮动
查看全部
浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素
2、浮动会带来什么负面效果
a)会造成父元素塌陷，如果父元素有背景色，则不会显示
b)会使紧随其后的行内元素围绕排列
c)会使紧随其后的块状元素被覆盖
所以，只要有浮动产生，我们就必须清除浮动
3、清除浮动常用的三种方法
（1）添加一个空标签，这也是初学者最常用的方式
<div style='clear:both;'></div>
我们在父级标签结束之前加入此div引入clear:both;样式，这种清除浮动的方式优点是通俗易懂，适合初学者，缺点是会给页面添加很多无意义的空标签，影响代码的结构和语义化
（2）给父元素添加overflow:hidden样式（不推荐使用）
（3）使用伪元素:after
<div class="box">
<div class="left-box" style='float:left'>左边</div>
<div class="right-box" style='float:right'>右边</div>
</div>
.box:after{
display: "block";
clear:both;
height:0;
content: "";
visibility: hidden;
overflow:hidden;
}
推荐使用第三种方法清除浮动
关于浮动列表项绝对居中的方法
刘老师 发表了文章 • 0 个评论 • 1760 次浏览 • 2018-01-19 11:38
那么我们是如何调整让列表项水平局中呢，通常做法是通过调整列表项li的margin和padding使其水平居中显示，但是这样做有一个弊端，一旦屏幕大小发生变化，则列表项将不再居中，这里提供一种水平方向绝对居中的方法，
<div class='list-box'>
<ul class='list'>
<li>天龙八部</li>
<li>神雕侠侣</li>
<li>笑傲江湖</li>
<li>雪山飞狐</li>
</ul>
</div>
.list-box{
text-align:center;
}
.list{
display:inline-block;
}
.list li{
float:left;
}
此时列表项li在水平方向将绝对居中 查看全部
那么我们是如何调整让列表项水平局中呢，通常做法是通过调整列表项li的margin和padding使其水平居中显示，但是这样做有一个弊端，一旦屏幕大小发生变化，则列表项将不再居中，这里提供一种水平方向绝对居中的方法，
<div class='list-box'>
<ul class='list'>
<li>天龙八部</li>
<li>神雕侠侣</li>
<li>笑傲江湖</li>
<li>雪山飞狐</li>
</ul>
</div>
.list-box{
text-align:center;
}
.list{
display:inline-block;
}
.list li{
float:left;
}
此时列表项li在水平方向将绝对居中