coderwhy前端学习笔记三-EW帮帮网

完整的HTML结构

一个完整的HTML结构包括哪几部分呢？

文档声明
html元素
✓ head元素
✓ body元素

文档声明

HTML最上方的一段文本我们称之为文档类型声明，用于声明文档类型

<!DOCTYPE html>
 HTML文档声明，告诉浏览器当前页面是HTML5页面；
 让浏览器用HTML5的标准去解析识别内容；
 必须放在HTML文档的最前面，不能省略，省略了会出现兼容性问题；
◼ HTML5的文档声明比HTML 4.01、 XHTML 1.0简洁非常多(了解即可)

html元素
◼ <html> 元素表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素。
所有其他元素必须是此元素的后代。

◼ W3C标准建议为html元素增加一个lang属性，作用是
 帮助语音合成工具确定要使用的发音;
 帮助翻译工具确定要使用的翻译规则;

◼ 比如常用的规则：
lang=“en” 表示这个HTML文档的语言是英文；
lang=“zh-CN” 表示这个HTML文档的语言是中文；

head元素
◼ HTML head 元素规定文档相关的配置信息（也称之为元数据），包括文档的标题，引用的文档样式和脚本等。
什么是元数据（meta data），是描述数据的数据；
这里我们可以理解成对整个页面的配置：

◼ 常见的设置有哪些呢？一般会至少包含如下2个设置。
◼ 网页的标题： title元素

◼ 网页的编码： meta元素
 可以用于设置网页的字符编码，让浏览器更精准地显示每一个文字，不设置或者设置错误会导致乱码；
 一般都使用utf-8编码，涵盖了世界上几乎所有的文字；

body元素
◼ body元素里面的内容将是你在浏览器窗口中看到的东西，也就是网页的具体内容和结构。
之后学习的大部分HTML元素都是在body中编写呈现的；

HTML元素
◼ HTML元素本身很多，但是常用的元素就是那么几个。
 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element
 我们只需要记住常用的，不常用的学会查看文档即可；
◼ 常用的元素（暂时掌握下面几个就够了， 90%时间都在写这几个）：
 p元素、 h元素；
 img元素、 a元素、 iframe元素；
 div元素、 span元素；
◼ 下阶段学习的元素：
 ul、 ol、 li元素；
 button元素、 input元素；
 table、 thead、 tbody、 thead、 th、 tr、 td；
◼ HTML5新增元素（后续学习）

案例分析 – 使用什么元素

常见元素 – h元素
◼ 在一个页面中通常会有一些比较重要的文字作为标题，这个时候我们可以使用h元素。
◼ <h1>–<h6> 标题 (Heading) 元素呈现了六个不同的级别的标题
 Heading是头部的意思，通常会用来做标题
 <h1> 级别最高，而 <h6> 级别最低。

◼ 注意： h元素通常和SEO优化有关系（什么是SEO，后续再介绍）

常见元素 – p元素
◼ 如果我们想表示一个段落，这个时候可以使用p元素。
◼ HTML <p>元素（或者说 HTML 段落元素）表示文本的一个段落。
p元素是paragraph单词的缩写，是段落、分段的意思；
p元素多个段落之间会有一定的间距；

案例练习

<!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>

  <p>
    史蒂夫·乔布斯（Steve Jobs，1955年2月24日—2011年10月5日 [1]  ），出生于美国加利福尼亚州旧金山，美国发明家、企业家、苹果公司联合创始人。
  </p> 
  <p>
    1976年4月1日，乔布斯签署了一份合同，决定成立一家电脑公司。 [2]  1977年4月，乔布斯在美国第一次计算机展览会展示了苹果Ⅱ号样机。1998年苹果推出iMac [3]  ，创新的外壳颜色透明设计使得产品大卖，并让苹果度过财政危机。2011年8月24日，史蒂夫·乔布斯向苹果董事会提交辞职申请。 [4] 
  </p>
  <p>
    乔布斯被认为是计算机业界与娱乐业界的标志性人物，他经历了苹果公司几十年的起落与兴衰，先后领导和推出了麦金塔计算机、iMac、iPod、iPhone、iPad等风靡全球的电子产品，深刻地改变了现代通讯、娱乐、生活方式。乔布斯同时也是前皮克斯动画工作室的董事长及首席执行官。
  </p>
  <p>
    2011年10月5日，史蒂夫·乔布斯因患胰腺神经内分泌肿瘤 [5]  病逝，享年56岁。 [1] 
  </p>

</body>
</html>

常见元素 - img元素
◼ 我们应该如何告诉浏览器来显示一张图片呢？使用img元素。
◼ HTML <img> 元素将一份图像嵌入文档。
 img是image单词的所以，是图像、图像的意思；
 事实上img是一个可替换元素（ replaced element ）；
◼ img有两个常见的属性：
 src属性： source单词的缩写，表示源
✓ 是必须的，它包含了你想嵌入的图片的文件路径。
 alt属性：不是强制性的，有两个作用
✓ 作用一：当图片加载不成功（错误的地址或者图片资源不存在），那么会显示这段文本；
✓ 作用二：屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义；

img元素 - 图片的路径
◼ 设置img的src时，需要给图片设置路径：
 网络图片：一个URL地址（后续会专门讲URL）；
✓ 网络图片的设置非常简单，给一个地址即可；
 本地图片：本地电脑上的图片，后续会和html一起部署到服务；
◼ 本地图片的路径有两种方式：
 方式一：绝对路径（几乎不用）；
✓ 从电脑的根目录开始一直找到资源的路径；
 方式二：相对路径（常用）；
✓ 相当于当前文件的一个路径；
✓ . 代表当前文件夹（1个.），可以省略
✓ .. 代表上级文件夹（2个.）
◼ 对于网页来说，不管什么操作系统（Windows、 Mac、 Linux），路径分隔符都是 /，而不是 \

<!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>

  <div class="box">fdafdas</div>
  
  <!-- 
    src:
      1.网络图片
      2.
   -->
  <!-- <img src="https://s10.mogucdn.com/mlcdn/c45406/180919_3f62ijgkj656k2lj03dh0di4iflea_750x390.jpg"> -->

  <!-- 本地图片
    图片的路径: 
      1> 绝对(absolute)路径: 根盘符开始查找, 一直找到这个资源
      2> 相对(relative)路径: bx
  -->
  <!-- <img src="F:\共享给学生文件夹\上课资料\01_阶段一-HTML+CSS\Learn_HTML_CSS\images\gouwujie01.jpg" alt=""> -->
  <img src="../images/gouwujie01.jpg" alt="">

</body>
</html>

img元素 - 图片的格式
◼ img元素支持的图片格式非常多：

常见元素 – a元素
◼ 在网页中我们经常需要跳转到另外一个链接，这个时候我们使用a元素；
◼ HTML <a> 元素（或称锚（anchor）元素）：
 定义超链接，用于打开新的URL；
◼ a元素有两个常见的属性：
 href： Hypertext Reference的简称
✓ 指定要打开的URL地址；
✓ 也可以是一个本地地址；
 target：该属性指定在何处显示链接的资源。
✓ _self：默认值，在当前窗口打开URL；
✓ _blank：在一个新的窗口中打开URL；
✓ 其他不常用, 后面iframe可以讲一下；

a元素 - 锚点链接
◼ 锚点链接可以实现：跳转到网页中的具体位置
◼ 锚点链接有两个重要步骤：
在要跳到的元素上定义一个id属性；
定义a元素，并且a元素的href指向对应的id；

<!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>
  <!-- 
    页面内的锚点效果
    1. 在跳转到的元素上添加id
    2. 定义a元素, 并且a元素的href属性指向id
   -->

   <a href="#theme01">跳转到主题一</a>
   <a href="#theme02">跳转到主题二</a>
   <a href="#theme03">跳转到主题三</a>
  
  <h2 id="theme01">主题一</h2>
  <p>
    我是coderwhy <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><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><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>
    <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><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="theme02">主题二</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><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><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><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><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="theme03">主题三</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><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><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><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><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>

a元素 - 图片链接
◼ 在很多网站我们会发现图片也是可以点击进行跳转的
img元素跟a元素一起使用，可以实现图片链接；

◼ 实现思路：
a元素中不存放文字，而是存放一个img元素；
也就是img元素是a元素的内容；

a元素 – 其他URL地址
◼ a元素一定是用来跳转到新网页的么？
 https://github.com/coderwhy/HYMiniMall/archive/master.zip
 http://mailto:12345@qq.com

<!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>
  
  <!-- 指向链接: zip压缩包 -->
  <a href="https://github.com/coderwhy/HYMiniMall/archive/master.zip">下载zip包</a>

  <!-- 指向其他协议地址: mailto -->
  <a href="mailto:123@qq.com">发邮件给123@qq.com</a>

</body>
</html>

iframe元素
◼ 利用iframe元素可以实现：在一个HTML文档中嵌入其他HTML文档
◼ frameborder属性
 用于规定是否显示边框
✓ 1：显示
✓ 0：不显示
◼ a元素target的其他值:
 _parent：在父窗口中打开URL
 _top：在顶层窗口中打开URL

div元素、 span元素的历史
◼ 在HTML中有两个特殊的元素div元素、 span元素：
 div元素： division，分开、分配的意思；
 span元素：跨域、涵盖的意思；
◼ 这两个元素有什么作用呢？无所用、无所不用。
◼ 产生的历史：
 网页的发展早期是没有css，这个时候我们必须通过语义化元素来告知浏览器一段文字如何显示；
 后来出现了css，结构和样式需要分离，这个时候html只需要负责结构即可；
 比如h1元素可以是一段普通的文本+CSS修饰样式；
 这个时候就出现了div、 span来编写HTML结构所有的结构，样式都交给css来处理；
◼ 所以，理论上来说：
 我们的页面可以没有div、 span；
 我们的页面也可以全部都是div、 span；

div元素、 span元素的区别
◼ 这个时候有一个问题：我出现一个不就可以了吗？
◼ div元素和span元素都是“纯粹的” 容器，也可以把他们理解成“盒子” ，它们都是用来包裹内容的；
div元素：多个div元素包裹的内容会在不同的行显示；
✓ 一般作为其他元素的父容器，把其他元素包住，代表一个整体
✓ 用于把网页分割为多个独立的部分
span元素：多个span元素包裹的内容会在同一行显示；
✓ 默认情况下，跟普通文本几乎没差别
✓ 用于区分特殊文本和普通文本，比如用来显示一些关键字

不常用元素
◼ strong元素：内容加粗、强调；
 通常加粗会使用css样式来完成；
 开发中很偶尔会使用一下；
◼ i元素：内容倾斜；
 通常斜体会使用css样式来完成；
 开发中偶尔会用它来做字体图标（因为看起来像是icon的缩写）；
◼ code元素：用于显示代码
 偶尔会使用用来显示等宽字体；
◼ br元素：换行元素
 开发中已经不使用；
◼ 更多元素详解，查看MDN文档：
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

HTML全局属性
◼ 我们发现某些属性只能设置在特定的元素中：
 比如img元素的src、 a元素的href；
◼ 也有一些属性是所有HTML都可以设置和拥有的，这样的属性我们称之为 “全局属性（Global Attributes）”
 全局属性有很多： https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes
◼ 常见的全局属性如下：
 id：定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。其目的是在链接（使用片段标识符），脚本或样
式（使用 CSS）时标识元素。
 class：一个以空格分隔的元素的类名（classes ）列表，它允许 CSS 和 Javascript 通过类选择器或者DOM方法来选
择和访问特定的元素；
 style：给元素添加内联样式；
 title：包含表示与其所属元素相关信息的文本。这些信息通常可以作为提示呈现给用户，但不是必须的。

字符实体
◼ 思考：我们编写的HTML代码会被浏览器解析。
◼ 如下代码是如何被解析的呢？
如果你使用小于号（<），浏览器会将其后的文本解析为一个tag。
但是某些情况下，我们确实需要编写一个小于号（<）；
这个时候我们就可以使用字符实体；

◼ 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>
    我是fdafadfadfadfasfdasfasdfadsffdafadfafaasdfa段落, 
    <span>哈哈&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;哈哈</span>
    , 呵fdasfadsfdasfadsfasdfasdfadsfasdfasdfasdfadsfadsfdas呵呵呵
  </p>

  <!-- 具体的实现 -->
  <span>&lt;hehehehe&gt;</span>

</body>
</html>

认识URL
◼ URL 代表着是统一资源定位符（Uniform Resource Locator）
◼ 通俗点说： URL 无非就是一个给定的独特资源在 Web 上的地址。
理论上说，每个有效的 URL 都指向一个唯一的资源；
这个资源可以是一个 HTML 页面，一个 CSS 文档，一幅图像，等等；

URL的格式
◼ URL的标准格式如下：
[协议类型]://[服务器地址]:[端口号]/[文件路径][文件名]?[查询]#[片段ID]

和URI的区别
◼ 和URI的区别：
URI = Uniform Resource Identifier 统一资源标志符，用于标识 Web 技术使用的逻辑或物理资源。；
URL = Uniform Resource Locator 统一资源定位符，俗称网络地址，相当于网络中的门牌号；
◼ URI在某一个规则下能把一个资源独一无二的识别出来。
URL作为一个网络Web资源的地址，可以唯一将一个资源识别出来，所以URL是一个URI；
所以URL是URI的一个子集；
但是URI并不一定是URL

◼ locators are also identifiers, so every URL is also a URI, but there are URIs which are not URLs.

本文含有隐藏内容，请开通VIP 后查看

coderwhy前端学习笔记三

完整的HTML结构

网站公告

今日签到

热门文章

最新发布