第1章从0到1学H5C3____初识HTML5+html基础标签

た入场券 2023-05-31 02:25 27阅读 0赞

**目录**

一、什么是HTML

二、  HTML基本结构

三、网页的基本标签

1.标题标签

2.段落标签

3.字体样式标签

4.特殊符号

5.图片标签

6.a链接标签

7.标签分类

四、小结

--------------------

# 一、什么是HTML #

HTML：Hyper Text Markup Language（超文本标记语言） 。超文本包括：文字、图片、音频、视频、动画等

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hemhhb2p1YW4_size_16_color_FFFFFF_t_70][] html标签通过浏览器转换成页面

# 二、  HTML基本结构 #

新建 HTML 文档：文件名.html （点后缀是为了让系统更好的识别文件，让系统知 道拿什么软件来打开）

<!DOCTYPE html>  
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    </body>
    </html>

注意：1.html 是由一对对的标签组成的语言，每一对标签都有它的特殊功能，例： <html></html>，第一个叫头标签，第二个叫尾标签，尾标签要加上结束符

2.**<html lang=“en”></html>**属于根标签，一个 HTML 文件里只能有一对 HTML 标签， 其他所有的标签都必须写在 HTML 里边。 lang=“en”：告诉搜索引擎爬虫，我们的网站是关于什么内容的。en 是英文的，zh 是 中文的，de 是德文的。

注意：属性名和属性值都写在头标签后面（空一格），写法：属性名=“属性值”

3.HTML 里边分为两个标签:<head></head>和<body></body>

**               <head></head>** 标签：里边装思想，编辑给浏览器的，人看不到，

**               <body></body>** 标签：里边装表皮，身体。展现给用户看的，皮肤类的。

4.①拓展：在 head 标签里写以下代码，符合搜索引擎爬虫的喜好，可以在搜索页面把你的 页面往前靠：

**                <meta content="服装" name="keywords">（关键字）**

**                <meta content="这是一套 xxxx" name="description">（描述）**

**           **  **    ②head标签中还包含**

**<meta charset="UTF-8" />** 单标签，防止网页出现乱码，网页中可以识别任何国家 的语言。

**<title> </title>**标签：里边放网页的标题（页脚标）

# 三、网页的基本标签 #

##        1.标题标签  ##

![20191218102211584.png][]六级标题标签，从 h1 到 h6 字号依次减小，作用：独 占一行，加粗字体，字体逐渐变小。一个网页h1应该只用1次。

##        2.段落标签 ##

段落标签，能让标签里的内容成段展示。

##       3.字体样式标签 ##

<strong>徐志摩人物简介</strong>
    <p>
        <em>1910</em>年入杭州学堂<br/>
        <em>1918</em>年赴美国克拉大学学习银行学<br/>
        ...
    </p>

##       4.特殊符号 ##

<table> 
 <tbody> 
  <tr> 
   <td> <p>特殊符号</p> </td> 
   <td> <p>字符实体</p> </td> 
   <td> <p>示例</p> </td> 
  </tr> 
  <tr> 
   <td> <p>空格</p> </td> 
   <td> <p>&amp;nbsp;</p> </td> 
   <td> <p>&lt;a&nbsp;href="#"&gt;百度&lt;/a&gt;&amp;nbsp;|&amp;nbsp;</p> <p>&lt;a&nbsp;href="#"&gt;新浪&lt;/a&gt;</p> </td> 
  </tr> 
  <tr> 
   <td> <p>大于号(&gt;)</p> </td> 
   <td> <p>&amp;gt;</p> </td> 
   <td> <p>如果时间&amp;gt;晚上6点，就坐车回家</p> </td> 
  </tr> 
  <tr> 
   <td> <p>小于号(&lt;)</p> </td> 
   <td> <p>&amp;lt;</p> </td> 
   <td> <p>如果时间&amp;lt;早上7点，就走路去上学</p> </td> 
  </tr> 
  <tr> 
   <td> <p>引号(")</p> </td> 
   <td> <p>&amp;quot;</p> </td> 
   <td> <p>W3C规范中，HTML的属性值必须用成对的&amp;quot;引起来</p> </td> 
  </tr> 
  <tr> 
   <td> <p>版权符号@</p> </td> 
   <td> <p>&amp;copy;</p> </td> 
   <td> <p>&amp;copy;&nbsp;2004-2018&nbsp;盛邦升华</p> </td> 
  </tr> 
 </tbody> 
</table>

##       5.图片标签 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hemhhb2p1YW4_size_16_color_FFFFFF_t_70 1][]

注意：**src 里边放图片路径，分为网上的 URL（超链接）、本地绝对路径（需要把地址写全）、 本地相对路径（必须 html 文件和图片文件在同一目录下 ../返回上一层）**

**              alt 图片占位符，当图片地址发生错误时展示文字信息（只有出错的时候会展示）**

**              title 图片提示符，鼠标移到图片上时，出现提示内容**

##       ##

##    6.a链接标签 ##

![20191218103841150.png][]

注意：1)href 里边放网址，target=“\_blank”的作用是跳转后新打开一个页面，a 标签里 可以放任何东西，比如你在标签里加一个 img 标签，你点图片的任何一个区域就都可以跳转了。

2)锚点

从A页面的甲位置跳转到本页中的乙位置 (页面内跳转)

从A页面的甲位置跳转到B页面中的乙位置（页面间跳转）

<div id=“demo1”></div>
    <div id=“demo2”></div>
    
    <a href=“#demo1”>find demo1</a>
    <a href=“#demo2”>find demo2</a>
    
    <a href="help.html#register">新用户注册帮助</a>

3)功能性链接

①打电话，例如： **<a href="tel:13836015478">给歌哥打电话</a>**

②发邮件： **<a href="mailto:邮箱地址">给格哥发邮件</a>** **   **

③协议限定符（黑客）：例如： **<a href="javascript:while(1)\{alert('让你手**  **欠!')\}">点我试试啊！来啊</a>，** 你这么写的话他就会强制运行里边的 js 代码。

##       ##

##      7.标签分类 ##

1)**按行内元素和块元素分**：

块元素：无论内容多少，该元素独占一行（p、h1-h6，div…）

行内元素：内容撑开宽度，左右都是行内元素的可以排在一行(a、strong、em…)

2) **成对标签和自闭合标签**

**               ** 成对标签：以“< >”开始、“</ >”结束;如 <p></p>,<h1></h1>

自闭合标签：如<img>,<hr>,<br>

#     四、小结 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hemhhb2p1YW4_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hemhhb2p1YW4_size_16_color_FFFFFF_t_70]: /images/20230531/ff5e7d4a09a54fabb4df1823789acff1.png
[20191218102211584.png]: /images/20230531/3f37a4472bc34bafb6505847eebe89a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hemhhb2p1YW4_size_16_color_FFFFFF_t_70 1]: /images/20230531/2b783a62874a4e1f9476ff62013b86c5.png
[20191218103841150.png]: /images/20230531/11e0639b12504d598963d16fdc07fe5b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hemhhb2p1YW4_size_16_color_FFFFFF_t_70 2]: /images/20230531/ae9335662be1493c8116f017ccbcd5a1.png