【HTML】_当图片不能加载时显示文字-CSDN博客

Hyper Text Markup Language 超文本标记语言

超文本：通过一系列的超链接将不同空间的资源连接起来形成了一个网状结构。
标记：指标签，一个超文本内容需要一个标签进行链接。

HTML的文档结构

<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8">
		<title>小笼包の第一个网页</title>	
	</head>
	<body>
		欢迎来到小笼包的世界！
	</body>
</html>

<!DOCTYPE html>：代表网页文档类型，申明浏览器解析网页代码的解析规则（大小写均可）

<html>: 根标签，每个网页有且仅有一个

<head>：网页头部

 <!-- 专门针对ie浏览器，以高版本ie浏览器加载页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--针对移动端布局，开启理想视口 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 定义网络关键字，作为搜索引擎的搜入，有利于seo优化 -->
    <meta name="keywords" content="小笼包">
    <!-- 定义网页描述 -->
    <meta name="description" content="个人网页|小笼包的日常生活~">

meta定义网页关键字和描述，有利于搜索引擎收录、seo优化（不要轻易更改其内容）

<title>小笼包の第一个网页</title>：网页标题，显示在窗口栏，有利于seo优化

<meta charset="utf-8">：定义文档编码集

<body>：网页主体，写网页的结构代码和内容

!DOCTYPE
1.申明文档类型

2.申明html版本，告诉浏览器用哪种版本的解析规则解析代码

3.决定浏览器的加载模式（标准模式：w3c规则、兼容模式：自己的规则）

h4：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

h5（简化）：

<!DOCTYPE html>

doctype不写，无法判断html版本和dtd约束条件，采用兼容模式
doctype申明正确，采用标准模式

开发工具

记事本（麻烦）
Dreamweaver（更新太慢）
webstorm（默认内置插件多，卡顿）
Hbuilder（vue推荐使用工具，启动慢）
Visual Studio code（微软开发，主流工具，可做前后端，插件自己安装）

常用的HTML标签

文本标签
用来组织网页中的文本，不同文本可以使用不同的文本标签
标题标签h：

    <h1>h1标签</h1>
    <h2>h2标签</h2>
    <h3>h3标签</h3>
    <h6>h6标签</h6>

标题标签 h1-6 数字越大，字号越大，默认加粗，默认间距

默认无样式，标签样式和浏览器样式一致

有利于搜索引擎收录，seo优化 -->

段落标签p：

    <p>
        文本
    </p>

段落标签p 一个段落需要一个段落标签，不能相互嵌套

span标签：

    <span>文本</span>

存放简短文本或提示性信息

label标签：

    <label for="">文本</label>

label标签：特殊用法，配合表单元素使用，控制表单元素，可以同行显示

for：标签上的属性，引号里面写属性值，英文单双引号都可以

换行标签br：

<!--  -->
    <br>

换行标签br，单标签

加粗标签b/strong：

    <b>文本</b>
    <strong>文本</strong>

加粗标签b/strong，推荐使用strong，可以同行显示

斜体标签i/em：

    <i>文本</i>
    <em>文本</em>

斜体i/em，推荐使用i，可以同行显示

分割线标签hr：

	<hr>

分割线hr，单标签

图片标签img

<img src="路径"  alt="加载失败显示文本" title="加载成功显示文本" width

【HTML】

Hyper Text Markup Language 超文本标记语言

HTML的文档结构

开发工具

常用的HTML标签

文本标签

图片标签img