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

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

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 205,874评论 6赞 479
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,151评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 152,270评论 0赞 342
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,137评论 1赞 278
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,116评论 5赞 370
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,935评论 1赞 283
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,261评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,895评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,342评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,854评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,978评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,609评论 4赞 322
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,181评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,182评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,402评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,376评论 2赞 352
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,677评论 2赞 344

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的区别了解