HTML的基本结构与标签的初步了解 - 君无药_H5之家

一、初步了解HTML

HTML是一种超文本标签语言，浏览器则是用来“解释和执行”HTML源码的工具。

HTML的基本结构

其中<!DOCTYPE html>是文档类型声明，声明这个文件必须是HTML5文件，让浏览器按照HTML5准备进行解析，必须在HTML5中，必须要有，且是一定要写在文件的最上方滴。

<title></title>是网页的标题，显示在最上方的文字：

<head> </head>是用来描述网页的一些关键信息。例如网页的配置、设置、关键字等等。。。这些信息，大多在浏览器看不到，但是对网页的解析至关重要！
<body> </body>则是所有的代码都写在其中。
二、初步了解标签
1、<head>头部部分 1）link：网页标题的图标链接网页的小图标，网页选项卡上面的小图片

其中rel="icon"表示当前link的作用是链接网页图标

href="img/ss.gif"表示图标的地址所在的位置

2)meta:用于描述网页的各种信息

①其中<meta charset="utf-8" />设置网页的编码格式为utf-8格式
常见的中文编码格式：GB2312：国标码，简体中文；GBK：扩展国标码，简体中文
utf-8：万国码，兼容各种语言编码，常用！

②可以设置网页的关键字有助于搜索引擎的搜索，多个关键字用英文逗号分开

③设置网页的详细信息，搜索引擎时标题下面的一段文字！

name="description" 表示这个meta标签设置的是网页的描述信息；
content="" 表示描述信息的详细内容！！

2、<body>主体部分

1）标签的分类

①块级标签：显示为块状，独占一行，自动换行。
②行级标签：在一行中，从左往右依次排列，不会自动换行。

2）块级标签

常见的块级标签有：

a.标题标签：<h1></h1>......<h6></h6> 特点:h1最大，h6最小且自动加粗。

b.水平线标签：<hr/>

c.段落标签：<p></p>

d.换行标签：<br/>

e.引用标签：<blockquote></blockquote>
要的cite属性表明引用的来源，一般为网址，且网址不会在网页中展示，浏览器一般显示为首行缩进

f.预格式标签：<pre></pre>
浏览器默认显示样式：①显示为等宽字体

②代码中的换行，空格等元素可在浏览器中直接显示。

HTML基本块级标签这是h1标签这是h2标签这是h3标签这是h4标签这是h5标签这是h6标签这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！ if(entity != null){ tring result = EntityUtils.toString(entity,"UTF-8");//HttpEntity转为字符串类型 jsonObject = JSONObject.fromObject(result);//字符串类型转为JSON类型 } 光明正大的不要脸！这段话就是抄的！你能咋地！

g.有序列表
<ol> （order list）
　　<li>...</li> 列表项可以有n多个
　　<li>...</li>
　　<li>...</li>
</ol>

h.无序列表
<ul> (unorder list)
　　<li>...</li> n多个
　　<li>...</li>
　　<li>...</li>
</ul>

i.定义描述列表
<dl>
　　<dt>一般只有一项</dt> （列表标题）
　　<dd>可以有很多项</dd> （列表描述项）
　　<dd>132</dd>
　　<dd>123</dd>
</dl>

g.组合标签显示效果：上面是图片，下面是图片的标题，同时图片和标题前代缩进。
<figure>
　　<img/> 图片
　　<figcaption></figcaption> 图片的标题。
</figure>

k.分区标签

<div></div> 可以包裹任何标签，也可以被包裹进任何标签。

HTML基本块级标签这是无序列表第一项这是无序列表第二项这是无序列表第三项这是无序列表第四项这是无序列表第一项这是无序列表第二项这是无序列表第三项这是无序列表第四项这是dl列表的标题这是dl列表的描述项1这是dl列表的描述项2这是dl列表的描述项3图片的描述标题这是div里面的文字！！！ 11111

3)行级标签

常见的行级标签：

（1）文本标签span

① span标签只是包裹作用，没有任何其他含义；
② span作用与div类似，需配合CSS使用。只不过div是块级标签、span是行级标签

（2）强调标签em与strong；倾斜标签i；加粗标签b；四个之间的区别