基本HTML结构
文档声明
<!DOCTYPE html>
告诉浏览器使用哪个HTML版本进行解析
<html>元素
根元素或顶级元素
<html>元素
包含<head>和<body>元素
-<head></head>元数据，用来描述html本身的信息
-<body></body>内容
元素
开始标签 + 内容 + 结束标签
*不是所有元素都有成对的标签，也有单标签元素
<head>元素
①描述网页基本信息
②指向渲染网页需要其他文件链接
③各大厂商根据自己需要定制
属性
①只能在开始标签里
②形式：属性名=“属性值”
例如：<h1 class="title">
有的属性只有属性名
例如：disable布尔属性
- 全局属性，如
class属性 - 某一类元素属性，如
form表单相关元素的name、value属性 - 某一个元素属性，如
alt属性只用于img元素
class
用来设置元素的一个或多个类名，这样以后的CSS或JS就可以方便对该元素进行操作。具有以下特点：
- 类名不能以数字开头（牢记）。
- 类名可以设置多个值，以空格分开，如
<div class="box box--menu"></div>。 - 不同的元素可以有相同的类名，如
<p class="p1 red">文本</p>
<div class="red">我也有一个类名为red</div>
id
设置元素的唯一性，经常用于JS操作或CSS操作，也可用作定义锚点。具有以下特点：
- 在整个HTML文档中必须是唯一的，也就是说一个HTML文档中不能出现两个一样的id值。
- 不可以和class那样设置多个值。
注释
格式：<!--注释内容-->
常用基本元素
标题元素
heading
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>定义标题，从大到小
注意：标题具有语义性，不仅仅是用来标识字体大小。
段落元素
paragraph
<p>标签定义段落，每个<p>标签默认另起一行
图片元素
image
<img>用来在网页中嵌入图片，该标签没有结束标签。
PS：像这种只有一个标签的元素我们称之为“空元素”(empty element)
<img>标签有两个必需的属性：src属性和alt属性。其中src属性为图片地址，alt属性为图片加载失败时的替换文字。
实例如下：
<img src="//placehold.it/300" alt="我是图片加载失败后的文字" width="150" height="150">
效果如下：
链接元素
anchor
<a>标签定义超链接，用于网页之间的跳转，有一个重要的属性href，用来指定链接的目标。
实例如下：
<a href=“http：//www.qq.com” target="_blank">QQ</a>
(target属性作用：网页在新标签页打开)
效果如下：QQ
给图片添加超链接需要用到元素嵌套的方法
实例如下：
<a href="http://www.qq.com" target="_blank">
<img src="placehold.it/300" alt="QQ">
</a>
效果如下：
列表元素
列表分为无序列表和有序列表两种
无序列表<ul>unorder list
有序列表<ol>order list，其直接子标签为<li>list（不可以是其他）
<ul>实例如下：
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
效果如下：
- HTML
- CSS
- JS
<ol>实例如下：
<ol>
<li>打开门</li>
<li>放入大象</li>
<li>关上门</li>
</ol>
效果如下：
- 打开门
- 放入大象
- 关上门
div元素
division
<div>标签用来分割为独立的、不同的部分，每一个<div>标签默认另起一行。
如我们要创建一个区块，包含<h2>和<p>元素：
实例如下：
<div>
<h2>区块标题</h2>
<p>区块描述文字</p>
</div>
span元素
<span>标签被用来组合文档内的行内元素。如下：
<p>前端三大语言：<span>HTML</span>、<span>CSS</span>、<span>Javascript</span></p>
HTML字符实体
预留字符
HTML中，<和>不能直接使用
如果希望正确显示，必须在源代码中使用实体字符，如<表示小于号，>表示大于号。
空格
HTML中的连续空格会被截短，多个空格最后只会显示一个空格。
想要显示多个空格，就需要用到实体字符
实例如下：
<p> 空格 好多啊，只显示了一个</p>
<p>空格 好多啊，全部显示</p>
效果如下：
空格 好多啊，只显示了一个
空格 好多啊，全部显示
常用字符实体
空格  
小于号 < <
大于号 > >
和号 & &
版权 © ©
乘号 × ×
块级元素和行内元素
二者可以互相转换
块级元素
- 默认占据整行宽度
行内元素
- 同行显示
- 默认宽度由内容决定
862
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
