html 的常见元素主要分为两类:head 区域的元素、body 区域的元素。下面来分别介绍。
head 区域的 html 元素,不会在页面上留下直接的内容。
base元素的介绍:
<base href="/">
base 标签用于指定基础的路径。指定之后,所有的 a 链接都是以这个路径为基准。
body 区域的 html 元素,会直接出现在页面上。
常见标签的重要属性:
一个常见的html文档,它的结构可以是:
<section>
<h1>一级标题</h1>
<section>
<h2>二级标题</h2>
<p>段落内容</p>
</section>
<section>
<h2>二级标题</h2>
<p>段落内容</p>
</section>
<aside>
<p>广告内容</p>
</aside>
</section>
<footer>
<p>某某公司出品</p>
</footer>
按照样式分类:
form
表单元素。对外的表现是行内元素(不会独占一行),对内的表现是块级元素(可以设置宽高)。
注意:在 HTML5 中 a > div
是合法的, div > a > div
是不合法的 ;但是在 html 4.0.1 中, a > div
仍然是不合法的。
比如下拉框这种比较复杂的元素,是自带默认样式的。如果没有这个默认样式,则该元素在页面上不会有任何表现,则必然增加一些工作量。
同时,默认样式也会带来一些问题:比如,有些默认样式我们是不需要的;有些默认样式甚至无法去掉。
如果我们不需要默认的样式,这里就需要引入一个概念:CSS Reset。
方案一:
CSS Tools: Reset CSS。链接:https://meyerweb.com/eric/tools/css/reset/
方案二:
雅虎的 CSS Reset。链接:https://yuilibrary.com/yui/docs/cssreset/
我们可以直接通过 CDN 的方式引入:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
方式三:(比较有争议)
*{
margin: 0;
padding: 0;
}
上面何种写法,比较简洁,但也有争议。有争议的地方在于,可能会导致 css 选择器的性能问题。
上面的几种 css reset 的解决思路是:将所有的默认样式清零。
但是,Normalize.css 的思路是:既然浏览器提供了这些默认样式,那它就是有意义的。既然不同浏览器的默认样式不一致,那么,Normalize.css
就将这些默认样式设置为一致。
共同点:二者都是表示斜体。
区别:
自闭和的元素中不能再嵌入别的元素。且 HTML5 中要求加斜杠。
所以,如果我们是通过 Ajax 提交表单数据,也建议加上 form。
更多更详细的学习可以在w3school上进行