HTML常见的元素二

a元素

锚点跳转链接

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <a href="#theme1">主题一</a>
    <a href="#theme2">主题二</a>
    <a href="#theme3">主题三</a>
    <h2 id="theme1">主题一</h2>
    <p>
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
    </p>
    <h2 id="theme2">主题二</h2>
    <p>
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
    </p>
    <h2 id="theme3">主题三</h2>
    <p>
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
    </p>
  </body>
</html>

图片链接

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <a href="https://www.mi.com/redmik50" target="_blank">
      <img src="./0ab8e5096ac6f08bd632e4d5a15d1792.jpg" alt="" />
    </a>
  </body>
</html>

其他URL地址

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <a href="http://github.com/coderwhy/HYMiniMall/archive/master.zip"
      >下载zip包</a
    >
  </body>
</html>

iframe元素

利用iframe元素可以实现，在一个HTML文档中嵌入其他HTML文档
frameborder属性
- 用于规定是否显示边框
  - 1 显示
  - 0 不显示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>哈哈哈</h1>
    <p>呵呵呵呵呵</p>
    <iframe
      src="http://www.taobao.com"
      width="800"
      height="600"
      frameborder="0"
    ></iframe>
    <iframe
      src="http://www.mi.com"
      width="800"
      height="600"
      frameborder="0"
    ></iframe>
    <iframe
      src="http://www.baidu.com"
      width="800"
      height="600"
      frameborder="0"
    ></iframe>
    <iframe
      src="http://www.jd.com"
      width="800"
      height="600"
      frameborder="0"
    ></iframe>
  </body>
</html>

_parent和top的区别了解

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <iframe src="./other/iframe元素所在的页面.html" frameborder="1"></iframe>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <iframe src="./a元素所在的网页.html" frameborder="1"></iframe>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <a href="http://www.taobao.com" target="_top">打开淘宝</a>
  </body>
</html>

div元素 span元素的历史

div division 分开分配的意思
span 跨域、涵盖的意思
无所用，无所不用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .area {
        border: 1px solid red;
      }

      .keyword {
        font-size: 30px;
        color: blue;
        font-weight: 700;
      }
    </style>
  </head>
  <body>
    <h1>学习前端</h1>
    <div class="area">
      <h2>1.学习HTML+CSS</h2>
      <p>先学习HTML，在学习CSS，了解一些历史/本质等等</p>
    </div>
    <div class="area">
      <h2>2.学习JavaScript</h2>
      <p>
        学习<span class="keyword">JavaScript</span>的基本语法，<span
          class="keyword"
          >BOM/DOM</span
        >，学<span class="keyword">网络请求</span>，学习<span class="keyword"
          >es6~12</span
        >，学习一些<span class="keyword">高级语法</span>，<span class="keyword"
          >原理</span
        >
      </p>
    </div>
    <div class="area">
      <h2>3.学习工具</h2>
      <p>npm/node/webpack/git</p>
    </div>
  </body>
</html>

strong元素

内容加粗、强调

i元素

内容倾斜

code元素

用于显示代码

br元素

换行

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>好好<strong>学习</strong>，天天<i>向上</i></p>
  </body>
</html>

HTML全局属性

某些属性只能在特定的元素中
- img元素的 src
- a元素的 href
全局属性
- id
- class
- data-
- style
- title

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p title="coderwhy" style="color: red" id="why" class="kobe">
      我是coderwhy
    </p>
  </body>
</html>

额外补充

字符实体

HTML实体是一段以连字符(&)开头，以分好(;)结束的文本(字符串)
实体常常用于显示保留字符(这些字符会被解析为HTML代码)和不可见的字符(如“不换行空格”)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <span>hehehehe</span>
    <p>我是段落， <span>哈哈&lt;哈哈&gt;</span>， 呵呵呵呵</p>
    <p>&lt;hehehehehe&gt;</p>
  </body>
</html>

URL

统一资源定位符
URL无非就是一个给定的独特资源在web上的地址
- 理论上说，每个有效的URL都指向一个唯一的资源
- 这个资源可以是一个HTML页面，一个CSS文档，一幅图像等等

URL的标准格式

[协议类型]://[服务器地址]:[端口号]/[文件路径]:[文件名]?[查询]#[片段ID]
http: // 123.207.32.32:8000 /

URI

统一资源标志符/标识符
用于表示web技术使用的逻辑或物理资源

URL和URI的区别

URI
- 统一资源标识符，用于标识web技术使用的逻辑或物理资源
URL
- 统一资源定位符，俗称网络地址，相当于网络中的门牌号

URL作为一个网络web资源的地址，可以唯一将一个资源标识出来，所以URL是一个URI
所以URL是一个URI
但是URI不是一个URL

复习回顾

一、HTML结构

1.1.文档声明

1.2.HTML元素

lang

1.3.head

元数据
- meta -> charset -> UTF-8
- title -> 标题

二、body元素

2.1.h1~h6

演练
区别

2.2.p元素

元素
区分

2.3.案例

2.4.img元素

两个属性
- src
- alt
地址
- 网络地址
- 本地地址
  - 绝对路径
  - 相对路径

2.5.a元素

两个元素
- href
- target
  - _self
  - blank
  - _parent
  - _top
本页面的锚点链接
a元素和img元素

2.6.iframe元素

嵌套网页
某些网页禁止嵌套(原理)
和a元素结合(target另外两个值)

2.6.div/span

历史
案例

2.7.不常用元素

strong
i
code
br
...

2.8.全局属性

id
class
style
title

三、额外知识

为什么需要字符实体
三个

&nbsp;
&lt;
&gt;

3.2.URL

URL的格式
- 协议://主机:端口号/路径/文件名?查询#片段id
和URI的区别
- URL 定位符(网络地址)
- URI 标识符

课后作业

一. 完成课堂所有的代码练习（必须全部自己实现）

二. 寻找h元素和p元素的案例，并且实现

三. 寻找a元素结合img元素的案例（3个）

四. 说出div元素和span元素的作用和区别

作用

快速搭建页面，不用在意过多的元素使用和布局

区别

功能区别
- div元素是一个块级元素，它包含的元素会自动换行
- span元素是一个行内元素，它包含的元素前后不会自动换行
- span没有结构上的意义，只是单纯的应用样式，其他元素不适合时，就可以使用span元素
- span元素可以作为div元素的子元素
- div元素不能是span元素的子元素
使用区别
- span元素宽度是被包含的内容宽度决定
- span元素可以通过CSS声明转换为块元素

五. HTML全局属性有哪些？分别是什么作用。

id
- 元素id
- 具有唯一性
class
- 类
- 多个类有空格分开，可以写多个
style
- 样式
- 行内样式，权重很高
title
- 标题
- 悬停某个元素，有相关的提示信息
data-
- 自定义属性
- 在小程序尤为重要，使用概率极高

六.预习CSS（按照MDN文档）

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps

01-HTML+CSS/02-2-HTML常见的元素二

HTML常见的元素二

a元素

锚点跳转链接

图片链接

其他URL地址

iframe元素

_parent和top的区别 了解

div元素 span元素的历史

strong元素

i元素

code元素

br元素

HTML全局属性

额外补充

字符实体

URL

URL的标准格式

URI

URL和URI的区别

复习回顾

一、HTML结构

1.1.文档声明

1.2.HTML元素

1.3.head

二、body元素

2.1.h1~h6

2.2.p元素

2.3.案例

2.4.img元素

2.5.a元素

2.6.iframe元素

2.6.div/span

2.7.不常用元素

2.8.全局属性

三、额外知识

3.2.URL

课后作业

一. 完成课堂所有的代码练习（必须全部自己实现）

二. 寻找h元素和p元素的案例，并且实现

三. 寻找a元素结合img元素的案例（3个）

四. 说出div元素和span元素的作用和区别

五. HTML全局属性有哪些？分别是什么作用。

六.预习CSS（按照MDN文档）

推荐阅读更多精彩内容

_parent和top的区别了解