目录
HTML(Hyper Text Markup Language)
HTML(Hyper Text Markup Language)
HTML
不是一门编程语言，而是一种用来告知浏览器如何组织页面的
标记语言
。
HTML
可复杂、可简单，一切取决于开发者。它由一系列的元素（
elements
）
组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。 一对标签（ tags
）可以为一段文字或者一张图片添加超链接，将文 字设置为斜体，改变字号，等等。
1.元素(Element)
<p>hello world!</p>
- 开始标签：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用。
- 与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾。
- 元素的内容，本例中就是所输入的文本本身。
- 开始标签、结束标签与内容相结合，便是一个完整的元素。
- HTML 中事先规定了一些元素，每种元素都有其语义(semantic)。这里的 p 是段落(paragraph)的语义。
2.嵌套元素(Nesting Element)
<p>我爱我的<strong>祖国</strong></p>
可以把元素放到其它元素之中
——
这被称作嵌套。
这里使用
<strong>
标签，来
强调
祖国 这一内容。
3.块级(block)元素和内联(inline)元素
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
<p>第四段</p>
<strong>第一句话</strong>
<strong>第二句话</strong>
<strong>第三句话</strong>
<strong>第四句话</strong>
- 块级元素在页面中默认以块的形式展现。更多的是表示一类段落的语义。
- 内联元素不会导致文本换行。更多的表示一个词、一句话等语义。
4.空元素(Empty Element)
不是所有元素都拥有开始标签，内容，结束标签。一些元素只有一个标签，通常用来在此元素所在位置插入/
嵌入一些东西。例如：元素
<img>
是用来在元素
<img>
所在位置插入一张指定的图片。
<img src="图片地址源">空元素（Empty elements） 有时也被叫作 空元素 (Void elements).
5.属性(Attributes)
元素可以拥有属性
属性包含元素的额外信息，这些信息不会出现在实际的内容中。在上述例子中，我们指定了 id 这个属
性，它的值是 pid，还指定了 class 这个属性，它的值是 c1 和 c2。
一个属性必须包含如下内容：
1. 一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)2. 属性名称，后面跟着一个等于号。3. 一个属性值，由一对引号“ ”引起来。
6.布尔属性
一些属性，本身可以没有值，这类属性被称为布尔属性。我们更多关心的是这个元素是否有这个属性。
<input type="text" disabled>
<input type="text" disabled="true">
<input type="text" disabled="false">
<input type="text" disabled="随便">
上述四种写法，其实效果是完全一样的。都是使得一个输入
(input)
禁止输入
(disabled)
。
大家可以和以下形式做个对比
<input type="text">7.单引号或者双引号
HTML
中，单引号和双引号的地位是相同的，以下两种情况都可以：
<a href="http://www.baidu.com"></a>
<a href='http://www.baidu.com'></a>
在一个
HTML
中已使用一种引号，你可以在此引号中嵌套另外一种引号：
<a href="http://www.baidu.com" title="你觉得'好玩吗'？"></a>
<a href="http://www.baidu.com" title='你觉得"好玩吗"？'></a>8.文档结构(Document Structure)
<html>
<head>
<meta charset="utf-8"></meta>
<title>我的第一个网页</title>
</head >
<body>
<p>这是我的第一个网页</p>
</body>
</html>
- <html></html> : <html> 元素。这个元素包裹了整个完整的页面，是一个根元素。
- <html> 是一个 HTML 文档的唯一根元素(Root Element)。虽然不遵守这个约定，大多数浏览器也可以识别，但我们还是希望大家遵循。
- <head></head> : <head>元素 . 这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。
- <meta charset="utf-8"> : 设置文档使用utf-8字符集编码。
- <title></title> : 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
- <body></body> : 包含了你访问页面时所有显示在页面上的内容，文本，图片，音频，游戏等等。
9.HTML 注释
为了将一段
HTML
中的内容置为注释，你需要将其用特殊的记号
<!
--
和
--
>
包括起来， 比如：
<p>我在注释外！</p>
<!-- <p>我在注释内！</p> -->10.实体引用(Entity References)
在
HTML
中，字符
<
,
>
,
"
,
'
和
&
是特殊字符。
它们是
HTML
语法自身的一部分
,
如果你真的想要在文本中使用符号
&
或者小于号
我们必须使用字符引用 ——
表示字符的特殊编码
,
它们可以在那些情况下使用。每个字符引用以符号&
开 始,
以分号
(;)
结束。常见实体引入如下：
| 原义字符 | 等价字符引用 |
| < | < 是小于(little) 的意思 |
| > | > 是大于(great) 的意思 |
| " | " 是引号(quotation mark) 的意思 |
| ' | ' 是单引号(apostrophe)的意思 |
| & |
&
是
and
符
(ampersand)
的意思
|
11.HTML中的空白
在上面的例子中，你可能已经注意到了在代码中包含了很多的空格
——
这是没有必要的；下面的两个代 码片段是等价的：
<p>狗 狗很 呆 萌。</p>
<p>狗 狗
很 呆 萌。</p>12.常见的元素介绍
1.标题：
<h1> 到 <h6>
<h1>学习 Java</h1>
<h2>学习 Java 基础</h2>
<h3>学习 Java Web</h3>2.段落：
<p>
<h1>课表</h1>
<p>Web</p>3.列表:
- 无序列表(Unordered Lists)： <ul>
- 有序列表(Ordered Lists): <ol>
- 列表项目(List Items): <li>
<h1>早餐提供：</h1>
<ul>
<li>豆浆</li>
<li>油条</li>
<li>豆腐脑</li>
<li>稀饭</li>
</ul>
<h1>辅导班</h1>
<ol>
<li>游泳课</li>
<li>舞蹈课</li>
<li>吉他班</li>
</ol>4.嵌套列表:
<ol>
<li>先用蛋白一个、盐半茶匙及淀粉两大匙搅拌均匀，调成“腌料”，鸡胸肉切成约一厘米见方的碎丁并
用“腌料”搅拌均匀，腌渍半小时。</li>
<li>用酱油一大匙、淀粉水一大匙、糖半茶匙、盐四分之一茶匙、白醋一茶匙、蒜末半茶匙调拌均匀，调
成“综合调味料”。</li>
<li>鸡丁腌好以后，色拉油下锅烧热，先将鸡丁倒入锅内，用大火快炸半分钟，炸到变色之后，捞出来沥干
油汁备用。</li>
<li>在锅里留下约两大匙油，烧热后将切好的干辣椒下锅，用小火炒香后，再放入花椒粒和葱段一起爆香。
随后鸡丁重新下锅，用大火快炒片刻后，再倒入“综合调味料”继续快炒。
<ul>
<li>如果你采用正宗川菜做法，最后只需加入花生米，炒拌几下就可以起锅了。</li>
<li>如果你在北方，可加入黄瓜丁、胡萝卜丁和花生米，翻炒后起锅。</li>
</ul>
</li>
</ol>5.超链接：
<a>
<p>创建了一个指向<a href="https://www.baidu.com/">百度</a>的超链接。</p>6.图片：
<img>
<h1>一张百度的图片</h1>
<img src="百度.jpg">7.块级无语义元素：
<div>
无语义元素，通常是用来组织内容，方便之后通过 css 或者 js 对其进行布局或操作。
<!-- 某个版块 -->
<div>
<h2>...</h2>
<p>...</p>
</div>
<!-- 另一个版块 -->
<div>
<h2>...</h2>
<p>...</p>
</div>8.内联无语义元素： <span>
<p>大家一起往前<span>冲</span>啊！</p>
3837
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
