一. HTML的基本语法特征
1.1 标签要严格关闭
大部分标签有开始就要有关闭.
如果遗漏了关闭标签会带来很多的问题, 浏览器会出现解析异常.
1.2 要正确的处理嵌套关系
正确:
<div><p>hello world</p></div>错误:
<div><p>hello world</div></p>
注意:
html只关注标签与标签之间的嵌套关系, 而不关注有没有换行有没有tab.下面两种写法是一致的:
<div><p>hello world</p></div><div> <p>hello world </p> </div>
1.3 空白折叠现象
如果文本中出现多个空格,换行, tab则会折叠为一个空格显示.
<p>hello world</p>
<p>hello
world</p>
效果图:
二. 字符实体引用
前面大家知道了空白折叠现象, 多个空格会折叠成一个空格, 但是如果我们需要在页面中输入多个空格怎么办?
<div>这是div标签</div>表示标签, 浏览器会解析. 如果我就想在页面中展示前面的这段文本怎么办?
为了解决前面的问题, html给我们提供了字符实体引用(character entity reference)的概念, 用字符实体引用来替换一些特殊的符号.
比如: (空格), >(大于号 > ), <(小于号 < )
<p>你 好</p>
<p><div>这个是div</div></p>
几个有用的实体引用:
HTML 4 DTD定义了252个命名实体。HTML 4规范要求使用标准DTD，并且不允许用户定义其它的命名实体.
所有252个实体引用参考:
- 百度百科:https://baike.baidu.com/item/HTML%E5%AE%9E%E4%BD%93/9172201
- 维基百科:https://zh.wikipedia.org/wiki/XML%E4%B8%8EHTML%E5%AD%97%E7%AC%A6%E5%AE%9E%E4%BD%93%E5%BC%95%E7%94%A8%E5%88%97%E8%A1%A8
三. h系列标签
h标签也叫heading标签.
<h1>, <h2>, ... <h6> 共有 6 个标签.
这 6 个标签都是为标题设定, 其目的是为搜索引擎优化而设定. 他们的权重和优先级随着数字的增大而减小.
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
注意:
- 关于搜索引擎优化(SEO)的问题, 后续课程会专门讨论.
四. <p>标签
p是单词paragraph的简写, html用<p>标签表示一个段落.
该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。
从HTML的角度来看, <p>是 文本级 的标签. 所以在<p>里面以后只放: 文本, 图片, 超级链接和表单元素.
容器级标签和文本级标签
从HTML的角度来看, 可以把标签分为 容器级标签 和 文本级标签
容器级标签: 可以简单理解为能嵌套其他所有标签的标签 常见容器级的标签:
div h ul ol dl li dt dd等.文本级标签: 只能嵌套文字,图片,超链接的标签。 常见文本级的标签:
span p a等.
注意:
如果在文本级标签中放入了其他不应该放的元素, 则浏览器会自动更正其不正确的嵌套关系.
<p>
我在p的内部
<div>我在div内部</div>
</p>
使用浏览器的审查元素功能我们发现浏览器自动更正了嵌套关系:
所以, 在嵌套标签的时候一定要注意.
五. <br>标签
前面我们了解到文本的空白折叠现象, 也就是说, 如果你在源码中的换行, 浏览器是不会解析出来换行的.
使用<br>标签可以实现文本内换行.
例如:
<p>今天是
星期三</p>
<p>今天是<br>星期三 </p>
注意:
在现代前端开发中, 几乎很少会用到
<br>标签, 因为他很多情况下是不符合我们标签的语义化的要求的.当你在使用
<br>标签的时候, 你应该思考下, 是否应该用一个新的段落, 而不是使用<br>标签.
六. <hr>标签
<hr>标签是一个展示型的标签.
展示一个 水平线.
<p>今天是<br>星期三 </p>
<p>今天是</p>
<p>星期三</p>
<hr>
注意:
- 像这种展示效果的标签在实际开发中使用较少. 应该使用后面学习的
css来实现这种效果.