新手入门的常识

最新推荐文章于 2023-04-14 15:30:26 发布

qq_41109549

最新推荐文章于 2023-04-14 15:30:26 发布

阅读量368

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/qq_41109549/article/details/107430690

版权

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>创建一个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 布局

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
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 元素或者边框
对父级元素的影响
从布局上 “消失”

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
高度塌陷

.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 伪类

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

两栏布局

.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。
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

三栏布局

.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>

得到错误布局！！！！！！！！！！！！！！！！！
这里写图片描述

正确写法！！！！！！！！！！！！！！！！！！！！！

因为浮动元素会把块级元素的位置空出来，所以这里右边的浮动元素把上面的位置空了下来，所以正确的写法应该是

这里写图片描述

-----------------------------------------------------------------------------------------------------------------------------------------------------------------
响应式布局
meta 标签

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

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

qq_41109549

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
新手入门的常识

1：了解页面结构和标签，和样式引入方式页面结构：一、创建页眉 <headerrole="banner">页眉包括网站标志、主导航和其他全站链接，甚至搜索框。也适合对页面深处的一组介绍性或导航性内容进行标记。注意：role=“banner”（横幅）地标角色改善可访问性二、标记导航 <navrole="navigation"><ul>无序链接列表</ul> 或 <ol>有序链接列表</ol></nav&gt...
复制链接

扫一扫