前端学习：HTML（一）简介 Introduce

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

目录

前言

一、实体（转义字符）

1.实体的语法

2.常用实体：

3.实体举例

二、meta标签

1.meta标签的用法

2.meta标签的主要属性值

三、语义化标签

1.简介

2.主要标签

（1）h标签(标题标签)

（2）p标签(段落标签)

四、行内元素和块元素

1.块元素(block element)

（1）特点

（2）主要标签

2.行内元素(inline element)

（1）特点

（2）主要行内标签

五、结构标签（布局标签、结构化语义标签）

1.布局标签

六、列表

• 1.有序列表

  2.无序列表

  3.定义列表

  七、超链接

  1.特点

  2.属性

  八、相对路径

  1.用法

  2. ./

  3. ../

  九、图片标签

  1.属性:

  2.图片的格式

  （1）jpeg(jpg)

  （2）gif

  （3）png

  十、内联框架

  1.属性

  十一、音视频标签

  1.特点：

  2.属性：

  ---

---

前言

本文章主要是对HTML5的部分标签和部分名称做简单的介绍。

---

一、实体（转义字符）

1.实体的语法

&实体的名字(代号);

2.常用实体：

  空格;(用于网页中编写多个连续空格，因为键盘输入的多个空格会被识别为一个)

>大于号; <小于号;(&gt&lt用于防止编写html代码中遇到的误识别)

©版权符号

3.实体举例

<p>
    今天&nbsp;&nbsp;&nbsp;&nbsp;天气真不错！
</p>
效果展示:今天     天气真不错！
            ↑↑↑↑
        四个&nbsp所构造的空格

---

二、meta标签

1.meta标签的用法

meta主要用于设置网页中的一些元数据，元数据一般不是为用户所看

2.meta标签的主要属性值

charset,name,content

charset 指定页面的字符集
name 指定数据的名称
content:指定的数据的内容

属性name中主要用到的值:keywords,description
keywords:表示网站的关键字，可以同时指定多个关键字，关键字之间用，隔开
用法:<meta name="Keywords" content="网上购物，网上商城">

description:用于指定网站的描述
用法:<meta name="description" content="京东JD.COM-专业的综合网上购物商城">
网站的描述会显示在搜索引擎的搜索的结果中

title标签的内容会作为搜索结果的超链接上的文字显示

http-equiv="refresh"，用于重定向，content中的url用于标明重定向的地址
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">

name中值为description时，content的内容在网页搜索中所显示的值，效果如图2-1所示

   图2-1 网页效果显示

---

三、语义化标签

1.简介

在使用HTML标签时，应该关注的是标签的语义，而不是它的样式

2.主要标签

（1）h标签(标题标签)<h>

一共有6级标题标签，<h1>~<h6> ,重要性逐级递减，h1最重要，h6最不重要

<h1>在网页中的重要性仅次于<title>标签，一般情况下一个页面只会有一个<h1>标签

一般情况下标题标签只会使用到h1~h3,h4~h6很少使用。标题标签都是块元素

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

相关标签:<hgroup>标签用来为标题分组，可以将一组相关的标题同时放入到<hgroup>中

<hgroup>
<h1>一级标题</h1>
<h2>二级标题</h2>
</hgroup>

（2）p标签(段落标签)<p>

p标签表示页面中的一个段落，p也是一个块元素

相关标签:

<em></em>:用于表示语音语调的一个加重，在网页中显示为斜体字。该标签不会独占一行，是行内元素。

<strong></strong>用于表示强调，重要的内容，在网页中表示为字体加粗。是行内元素

<blockquote></blockquote>用于表示一个长引用，文本的前面将会缩进。独占一行，是块元素。

<q></q>用于表示一个短引用，在文本的首尾会加上双引号，是行内元素。

<br>用于表示换行。

代码示例及效果图如图3-1所示</