1:了解页面结构和标签,和样式引入方式
页面结构:
一、创建页眉 <header role="banner">
页眉包括网站标志、主导航和其他全站链接,甚至搜索框。也适合对页面深处的一组介绍性或导航性内容进行标记。
注意:role=“banner”(横幅)地标角色改善可访问性
二、标记导航 <nav role="navigation"> <ul>无序链接列表</ul> 或 <ol>有序链接列表</ol> </nav>
nav 标记文档中重要的链接群。
三、标记页面的主要区域 <main role="main">
main元素包围着代表页面主题的内容,一个页面仅使用一次。
四、创建文章 <article>段落、列表、音频、视频、图像、图形</article>
article元素表示文档、页面、应用或网站的一个独立的容器。可以是一篇帖子、文章、评论或交互式的小部件或小工具。
五、定义区块 <section>段落、列表、音频、视频、图像、图形</section>
section元素代表文档或应用的一个一般的区块。section是具有相似主题的一组内容,通常包含一个标题。
注意:section可嵌套在article里,反之不行。
六、指定附注栏 <aside role="complementary">
使用aside的例子包括重要引述、侧栏、指向相关文章的一组链接、广告、nav元素组(友情链接)、相关产品列表等。
注意:对于与内容有关的图像(图表、图形或带有说明文字的插图)使用figure而非aside。
七、创建页脚 <footer>
footer元素代表嵌套它的最近的article、aside、blockquote、body、details、fieldset、figure、nav、section或td元素的页脚。页脚通常包含关于它所在区块的信息,如相关文档的链接、版权信息、作者或其他类似条目。
注意:只能对页面级的footer使用role="contentinfo",且一个页面只能使用一次。
八、创建通用容器 <div>
div是没有任何语义的通用容器。有了div就可以为其添加样式或javascript效果。
注意:div是块级内容的无语义容器。span是短语内容的无语义容器,可放在段落p元素内。
九、使用ARIA改善可访问性
WAI-ARIA:无障碍网页倡议-无障碍的富互联网应用。ARIA的地标角色可以帮助用户识别页面区域,从而让屏幕阅读器用户可以直接跳到这些区域。通常,对这些区域指定role属性就可以了。
十、为元素添加title属性
可以使用title属性为网站任何部分加上提示标签,在屏幕阅读器可以为用户朗读title文本,提升无障碍访问功能。
原文链接:https://www.cnblogs.com/zhuqs/p/7493988.html
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
常用HTML标签元素结合及简介
<html> </ html>创建一个HTML文档
<head> </ head>设置文档标题和其他在网页中不显示的信息
<title> </ title>设置文档的标题
<h1> </ h1>最大的标题
<pre> </ pre>预先格式化文本
<u> </ u>下划线
<b> </ b>黑体字
<i> </ i>斜体字
<tt> </ tt>打字机风格的字体
< cite> </ cite>引用,通常是斜体
<em> </ em>文字文本(通常是斜体加黑体)
<strong> </ strong>加重文本(通常是斜体加黑体)
<font size =“” color =“”> </ font>设置字体大小从1到7,颜色使用名称或RGB的十六进制值
<BASEFONT> </ BASEFONT>基准字体标记
<big> </ big>字体加大
<SMALL> </ SMALL>字体缩小
<STRIKE> </ STRIKE>加删除线
<CODE> </ CODE>程式码
<KBD> </ KBD>键盘字
<SAMP> </ SAMP>范例
<VAR> </ VAR>变量
<BLOCKQUOTE> </ BLOCKQUOTE>向右缩排
<DFN> </ DFN>述语定义
<ADDRESS> </ ADDRESS>地址标记
<sup> </ SUP>上标字
<SUB> </ SUB>下标字
<xmp> ... </ xmp>固定宽度字体(在文件中空白,换行,定位功能有效)
<plaintext> ... </ plaintext>固定宽度字体(不执行标记符号)
<listing> ... </ listing>固定宽度小字体
<font color = 00ff00> ... </ font>字体颜色
<font size = 1> ... </ font>最小字体
<font style ='font-size:100 px'> ... </ font>无限扩大
格式标志标签
<p> </ p>创建一个内部
<p align =“”>将逐步按左,中,右对齐
<br> 换行插入换行符
<blockquote> </ blockquote>从两边缩进文本
<dl > </ dl>定义列表
<dt>放在每个定义术语词前
<dd>放在每个定义之前
<ol> </ ol>创建一个标有数字的列表
<ul> </ ul>创建一个标有
圆点的列表<li>放在每个列表项之前,若在<ol> </ ol>之间则每个列表项加上一个数字,
若在<ul> </ ul>之间则每个列表项加上一个圆点
<div align =“”> </ div>用来放置大块HTML样式,也用于格式化表
<MENU>选项清单
<DIR>目录清单
<nobr> </ nobr >强行不换行
<hr size =' 9'width = '80%'color ='ff0000'>水平线(设置宽度)
<center> < / center>水平居中
链接标志表格标志
<a href="URL"> </a>创建超文本链接
<a href="mailtEMAIL">
</a>创建自动发送电子邮件的链接
<a name="name"> </ a >创建位于文档内部的书签
<a href="#name"> </a>创建指向文档内部书签的链接
<BASE>文档中不能被该站点标识的其他所有链接源的URL
<LINK>定义一个链接和源之间的相互关系
链接标记注解:
◆target =“ ...”决定链接源在什么地方显示(用户自定义的名字,_blank,_parent,_self,_top
◆rel =“ ...”发送链接的类型
◆rev =“ ...”保存链接的类型
◆accesskey =“ ...”指定该元素的热键
◆shape =“ ...”允许我们使用已定义的形状定义客户端的图形样式(默认,矩形,圆形,多边形
◆coord =“。 ..“使用分辨率或长度百分比来定义形状的尺寸
◆tabindex =” ...“使用定义过的tabindex元素设置在各个元素之间的焦点获取顺序(使用tab键使元素获得焦点)
大部分标签可以运用时候通过CSS控制更改样式达到我们想要的布局效果。
如果可以转载,请注明文章出处和来源网址:http : //www.divcss5.com/html/h323.shtml
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
引入方式:1:行内样式
2:嵌入式(style)
3:链接式(.在test.html引入test.css文件)
4:导入式(import(url(demo.css)))
2:页面布局
元素选择器:
.class | .intro | 选择 class="intro" 的所有元素。 | 1 |
#id | #firstname | 选择 id="firstname" 的所有元素。 | 1 |
* | * | 选择所有元素。 | 2 |
element | p | 选择所有 <p> 元素。 | 1 |
element,element | div,p | 选择所有 <div> 元素和所有 <p> 元素。 | 1 |
element element | div p | 选择 <div> 元素内部的所有 <p> 元素。 | 1 |
element>element | div>p | 选择父元素为 <div> 元素的所有 <p> 元素。 | 2 |
element+element | div+p | 选择紧接在 <div> 元素之后的所有 <p> 元素。 | 2 |
[attribute] | [target] | 选择带有 target 属性所有元素。 | 2 |
[attribute=value] | [target=_blank] | 选择 target="_blank" 的所有元素。 | 2 |
[attribute~=value] | [title~=flower] | 选择 title 属性包含单词 "flower" 的所有元素。 | 2 |
[attribute|=value] | [lang|=en] | 选择 lang 属性值以 "en" 开头的所有元素。 | 2 |
:link | a:link | 选择所有未被访问的链接。 | 1 |
:visited | a:visited | 选择所有已被访问的链接。 | 1 |
:active | a:active | 选择活动链接。 | 1 |
:hover | a:hover | 选择鼠标指针位于其上的链接。 | 1 |
:focus | input:focus | 选择获得焦点的 input 元素。 | 2 |
:first-letter | p:first-letter | 选择每个 <p> 元素的首字母。 | 1 |
:first-line | p:first-line | 选择每个 <p> 元素的首行。 | 1 |
:first-child | p:first-child | 选择属于父元素的第一个子元素的每个 <p> 元素。 | 2 |
:before | p:before | 在每个 <p> 元素的内容之前插入内容。 | 2 |
:after | p:after | 在每个 <p> 元素的内容之后插入内容。 | 2 |
:lang(language) | p:lang(it) | 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。 | 2 |
element1~element2 | p~ul | 选择前面有 <p> 元素的每个 <ul> 元素。 | 3 |
[attribute^=value] | a[src^="https"] | 选择其 src 属性值以 "https" 开头的每个 <a> 元素。 | 3 |
[attribute$=value] | a[src$=".pdf"] | 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。 | 3 |
[attribute*=value] | a[src*="abc"] | 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。 | 3 |
:first-of-type | p:first-of-type | 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 | 3 |
:last-of-type | p:last-of-type | 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 | 3 |
:only-of-type | p:only-of-type | 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 | 3 |
:only-child | p:only-child | 选择属于其父元素的唯一子元素的每个 <p> 元素。 | 3 |
:nth-child(n) | p:nth-child(2) | 选择属于其父元素的第二个子元素的每个 <p> 元素。 | 3 |
:nth-last-child(n) | p:nth-last-child(2) | 同上,从最后一个子元素开始计数。 | 3 |
:nth-of-type(n) | p:nth-of-type(2) | 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 | 3 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 同上,但是从最后一个子元素开始计数。 | 3 |
:last-child | p:last-child | 选择属于其父元素最后一个子元素每个 <p> 元素。 | 3 |
:root | :root | 选择文档的根元素。 | 3 |
:empty | p:empty | 选择没有子元素的每个 <p> 元素(包括文本节点)。 | 3 |
:target | #news:target | 选择当前活动的 #news 元素。 | 3 |
:enabled | input:enabled | 选择每个启用的 <input> 元素。 | 3 |
:disabled | input:disabled | 选择每个禁用的 <input> 元素 | 3 |
:checked | input:checked | 选择每个被选中的 <input> 元素。 | 3 |
:not(selector) | :not(p) | 选择非 <p> 元素的每个元素。 | 3 |
::selection | ::selection | 选择被用户选取的元素部分。 | 3 |
布局
table 布局
<table class=container>
<tbody>
<tr>
<td class=left> 左 </td>
<td class=right> 右 </td>
</tr>
</tbody>
</table>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
flex 布局
盒模型:
平时说的宽度和高度指的是内容区的宽度和高度(content)
盒子占用的空间是 content + padding + border + margin
display / poistion
display 有如下几个值
block(元素表现为块级元素,有固定宽高,独占一行)
inline(元素表现为行内元素,不能设置宽高)
inline-block (对外表现为行内元素,对内表现为块级元素)
position 有如下几个值
static(默认情况,存在文档流当中)
relative(根据元素本身原来所应该处的位置偏移,不会改变布局的计算)
absolute(绝对定位,脱离文档流,不会对别的元素造成影响,相对的是父级最近的 relative 或者 absolute 定位元素)
fixed(绝对定位,脱离文档流,相对于的是屏幕,就是那些浮动的广告那样,怎么拉都固定在同一个位置,而 absolute 元素离开屏幕就看不见了)
position 的层叠是按顺序层叠的,不过可以通过设置 z-index 来改变层叠顺序,只有 relative,absolute,fixed 可以设置 z-index。
flexbox 布局
.container{
height:200px;
width: 200px;
display: flex
}
.left{
background-color: red;
flex: 1;
}
.middle{
background-color: yellow;
flex: 1;
}
.right{
background-color: green;
flex: 1;
}
</style>
<body>
<div class=container>
<div class=left></div>
<div class=middle></div>
<div class=right></div>
</div>
</body>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
float 布局
对自身的影响
float 元素可以形成块,如 span 元素。可以让行内元素也拥有宽和高,因为块级元素具有宽高
浮动元素的位置尽量靠上
尽量靠左(float:left)或右(float:right),如果那一行满足不了浮动元素的宽度要求,则元素会往下掉
对兄弟元素的影响
不影响其他块级元素的位置
影响其他块级元素的文本
上面贴非 float 元素
旁边贴 float 元素或者边框
对父级元素的影响
从布局上 “消失”
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
高度塌陷
<style>
*{
margin: 0;
padding: 0;
}
.container{
width: 200px;
background-color:red;
}
.left{
background-color: yellow;
float: left;
height: 50px;
width:50px;
}
.right{
background-color: yellow;
float: right;
height: 50px;
width:50px;
}
</style>
<body>
<div class=container>
<span class=left>float</span>
<span>我是字</span>
<span class=right>float</span>
</div>
<div class="container" style="height: 200px;background: blue">
</div>
</body>
两个 float 元素虽然包含在第一个 container 中,但是却超出了第一个 container 的范围,在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。
但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。
解决办法有下面几种
1:父元素设置 overflow: auto 或者 overflow: hidden
2:给父元素加一个 after 伪类
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
两栏布局
<style>
*{
margin: 0;
padding: 0;
}
.container{
width: 400px;
height: 200px;
}
.left{
background-color: yellow;
float: left;
height: 100%;
width:100px;
}
.right{
background-color: red;
margin-left: 100px;
height:100%;
}
.container::after{
content: '';
display: block;
visibility: hidden;
clear: both
}
</style>
<body>
<div class=container>
<div class=left></div>
<div class=right></div>
</div>
</body>
最重要的是 margin-left: 100px;
,这一句将浮动元素的位置空了出来,所以右边栏里面的元素不会影响到浮动的 div。
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
三栏布局
<style>
*{
margin: 0;
padding: 0;
}
.container{
width: 400px;
height: 200px;
}
.left{
background-color: yellow;
float: left;
height: 100%;
width:100px;
}
.right{
background-color: green;
float: right;
height: 100%;
width:100px;
}
.middle{
background-color: red;
margin-left: 100px;
margin-right: 100px;
height:100%;
}
.container::after{
content: '';
display: block;
visibility: hidden;
clear: both
}
</style>
<body>
<div class=container>
<div class=left></div>
<div class="middle"></div>
<div class=right></div>
</div>
</body>
得到错误布局!!!!!!!!!!!!!!!!!
正确写法!!!!!!!!!!!!!!!!!!!!!
因为浮动元素会把块级元素的位置空出来,所以这里右边的浮动元素把上面的位置空了下来,所以正确的写法应该是
<div class=container>
<div class=left></div>
<div class=right></div>
<div class="middle"></div>
</div>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
响应式布局
meta 标签
<meta name="viewport" content="width=device-width, initial-scale=1">
width = device-width 这一句的意思是让页面的宽度等于屏幕的宽度。
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
使用 rem
rem 指的是 html 元素的 font-size,html 元素的 font-size 默认是 16px,所以 1 rem = 16px;然后根据 rem 来计算各个元素的宽高,然后配合 media query 就可以实现自适应。
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
media query
ss2 允许用户根据特定的 media 类型定制样式,基本语法如下
@media screen and (max-width: 360px) {
html { font-size: 12px; }
}
1
2
3
意思就是: 当屏幕的宽度小于等于 360 px 的时候 html 的字体大小为 12 px。
有一个需要注意的点是范围大的要放在上面,范围小的放在下面。假设有两个样式,一个适应 360px 以下,一个适应 640px 以下,如果 360px 的放在上面,但是小于 360px 同样满足小于 640px,这就不是我们想要的结果了,所以范围大的需要放在上面。
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
原文链接:https://blog.csdn.net/zhang6223284/article/details/81909600
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------