HTML CSS那些事
程序员文章站
2022-05-06 19:17:05
...
什么是<!DOCTYPE>?
DOCTYPE是HTML5标准网页声明,且必须声明在HTML文档的第一行,来告知浏览器的解析器用什么文档标准解析这个文档。
HTML语义化
- 用正确的标签做正确的事
- 页面内容结构化
- 无CSS样式时也容易阅读,便于维护和理解
- 便于浏览器,搜索引擎解析。有利于爬虫标记,利于SEO(搜索引擎优化)。
例如<article>,<section>,<nav>,<aside>,<footer>等
- <header>
通常被放置在页面或者页面中某个区域的标题,还可以防止收缩表单,logo图片等元素
<header>
<h1>这是标题</h1>
</header>
- <nav>
表示页面导航,可以通过导航链接到往回走那的其他页面,或者当前页面的其他部分.
<nav>不但可以作为页面独立区域存在,而且我们可以在<header>标签中使用。此外<nav>标签还可以显示在侧边栏中。由此可见一个页面之中可以有多个<nav>标签。
<header>
<h1>这是标题</h1>
<nav>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</nav>
</header>
- <aside>
所包含的内容不是页面的主要内容、具有独立性,是对页面的补充。
<aside>一般使用在页面、文章的侧边栏、广告、友情链接等区域。
<article>
<h1>HTML语义化标签</h1>
<p>....正文.....</p>
<aside>
<h2>什么是语义化标签</h2>
<p>balabala</p>
</aside>
</article>
- <footer>
一般放在页面的某个区域的底部。包含版权信息,联系方式等信息
跟<header>标签一样,<footer>标签的使用个数没有限制,可以在任意需要的区块底部使用。
<footer>
<small>
版权所有 © balabalabala
</small>
</footer>
- <section>
是一个主题性的内容分组,通常用于对页面进行分块或者对文章等进行分段
<section>标签所包裹的是有一组相似的主题的内容,可以用这个标签来实现文章的章节、标签式对话框中的各种标签页等类似的功能。
<section>通常包含一个头部<header>、可能还会包含一个尾部<footer>。
<article>
<h1>标题</h1>
<p>内容</p>
<section>
<h2>小标题<h2>
<p>小标题的内容</p>
</section>
<section>
<h2>小标题-2<h2>
<p>小标题的内容</p>
</section>
<section>
<h2>小标题-3<h2>
<p>小标题的内容</p>
</section>
</article>
sre和href的区别
- src是指向外部资源的位置,指向的内容会嵌入到文档中当前标签所在的位置,在请求src资源时会将其指向的资源下载并应用到文档内,如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,知道将该资源加载、编译、执行完毕,所以一般js脚本会放在底部而不是头部。
- href是指网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。
css盒模型
- IE盒模型 box-sizing:border-box(怪异盒模型)
- W3C标准盒模型 box-sizing:box-content(标准盒模型)
应用场景
- 表单:表单中有一些input元素其实还是传统的IE盒模型,带由一些默认的样式,而且在不同平台或浏览器的表现不一,造成表单的差异。此时我们可以用box-sizing属性在构建一个风格的表单元素
- 设置子类元素的margin或者border是,可能撑破父元素的尺寸,这时我们就需要使用box-sizing:border-box来将border包含进元素尺寸中,这样就不会存在在冲破父层元素的情况了
上一篇: 这粥我不太敢喝
推荐阅读
-
css垂直居中的几种方式_html/css_WEB-ITnose
-
请大家帮我看一下我这段代码中的ul和a为什么不能显示在同一行中。_html/css_WEB-ITnose
-
新手问,像这样用div做好还是dl dt dd做好_html/css_WEB-ITnose
-
过渡_html/css_WEB-ITnose
-
jquery给HTML元素添加 事件_html/css_WEB-ITnose
-
如何优雅地使用Sublime Text3_html/css_WEB-ITnose
-
前端wap页面问题,跪求解答,_html/css_WEB-ITnose
-
chrome中不可见字符引发的float问题_html/css_WEB-ITnose
-
栅格布局的两种简单的实现方式_html/css_WEB-ITnose
-
css3实现的文本无法选中效果_html/css_WEB-ITnose