参考文章:
https://www.yuque.com/fe9/basic/hw5ara
HTML是什么
HTML 是标记语言,通过一些特定符号(标签),使文章格式固定。如下图所示:
浏览器将HTML变成人眼看到的图像,这个过程就是页面渲染。
HTML标签和元素
名词 | 解释 |
---|---|
HTML标签 | 类似于<p> 、</p> ;标签是由尖括号<> 包含关键词p 组成的。 |
HTML元素 | 由标签+内容嵌套而成。比如<p>我是一个段落</p> |
空元素 | 一般来说如果没有内容如:<p></p> 这样写其实是没有任何意义的。但是空元素不一样,比如<br> 标签,用来换行。 |
空元素与非空元素
名词 | 解释 |
---|---|
块级元素 | 独占一行,将后面的元素挤到新的一行;p 元素总是独占一行显示,它是块级元素 |
行内元素 | 行内元素紧挨着显示,不会自动换行;i 和 span 元素则没有换行,是行内元素。 |
块级元素和行内元素,下方效果:
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落,<i>我是段落里的斜体部分</i></p>
<span>我是一段文字</span>
<span>我是一段文字</span>
<span>我是一段文字</span>
HTML的属性
HTML标签 是可以拥有属性的,如下所示,效果展示。
<img alt="image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2664816/profile/profile-512.jpg?1544158617">
用属性可以增强HTML的表达效果。定义属性的方式是attr = xxx
属性 src 指定了图片的 url 地址,alt 属性定义了可替换文本,当浏览器无法载入图片时,浏览器将显示这个替换文本。
简单示例
各标签意义参考链接。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 示例</title>
<link rel="stylesheet" type="text/css" href="xxx.css">
<script src="xxx.js"></script>
</head>
<body>
<h1>我是标题</h1>
<p>我是段落</p>
</body>
</html>
显示效果如下: