search

joephon / blog

极简博客
3 stars 2 forks source link

HTML 入门 #10

Open joephon opened 5 years ago

joephon commented 5 years ago

♦️ A 标签结构

HTML 标记语言是 XML 的一种拓展模式，所以它们有一些共同的特性

有开始就有结束，<></>

如果中间没有标签嵌套的话，也可以写成这样子 </>

HTML 标签由一对 尖括号 包裹起来的

栗子

<html>
</html>

小知识点

HTML 的标签名，是固定的，譬如 <html></html> 不能写成 <httl></httl>

后者是无效的。

有开始就有结束，记住咯～

♦️ 2 HTML 文档

HTML 文档有一个固定的结构，包含 5 对基本标签，一个格式声明

<!DOCTYPE>

<html />

<head />

<meta />

<title />

<body />

栗子

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>标题</title>
  </head>
  <body>
  </body>
</html>

小知识点

HTML 的文档结构，是固定的。

譬如：每一个 Web 页面都至少包含 栗子 里的 5 对标签 和一个格式声明。

♦️ 3 结构标签

HTML 标签都是成对地出现，且有各自的作用，下面来学习这些标签

<!DOCTYPE> 声明 HTML 文档的格式

<html /> 定义 HTML 文档流从这里开始

<head /> 定义 HTML 文档流的头部

<meta /> 定义 HTML 文档的资源

<title /> 定义 HTML 文档的标题

<body /> 定义 HTML 文档流的主体

栗子

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>标题</title>
  </head>
  <body>
  </body>
</html>

小知识点

HTML 的标签是相互嵌套的，嵌套在外面的叫爸爸，嵌套在里面的是儿子，爸爸外面是爷爷，儿子里面是孙子，依此类推。

为了让标签更有可读性，一般采用缩进风格来表示嵌套关系

即：缩进 2 个 空格

♦️ 4 标签的属性

每一个 HTML 标签都拥有自己的属性

属性 写在开始标签里面，也就是 <> 里面

栗子

<meta charset="utf-8" />

<div class="class"></div>

<p style="color: #000">我是一个段落</p>

上面 <meta /> 标签的标签名是 meta

charset="utf-8" 是 <meta /> 标签的属性

charset 是属性名，"utf-8" 是属性值

<div /> <p> 同理

小知识点

由此可见，HTML 标签不但被一对尖括号包裹

还拥有标签名、属性名、属性值

♦️ 5 属性的作用

HTML 的标签都拥有属性，这是为了让标签更好地工作

不过，某些标签是可以不写任何属性的

譬如：<div /> <p>

但有些标签如果不写属性，将无法正常工作

譬如：<input /> <video />

栗子

<div>我是一个块级元素，如果不加属性，也可以正常显示</div>

<p>我是一个段落，也是块级元素，需要不需要属性，主要看程序猿</p>

<input value="我是input标签的值，某些时候我是必不可少的"/>

<video src="如果没有定义视频资源，我将无法工作">
  你能看到我，说明你的浏览器不兼容 video 标签
</video>

小知识点

在 HTML 的所有属性里，绝大多数都是 通用属性

即：每个标签都拥有的属性

譬如：style、class

♦️ 6 注释风格

编程的世界里，但凡能称为语言的一般都会有注释

HTML 的注释风格遵循 XML 的风格

都被包裹在一对尖括号里 <>

以 "!" 开头，两条横杆紧随其后 "--"

栗子

<!-- -->

<!-- <div> Hello </div> -->

<!--
<input value="我是value的值"/>
-->

小知识点

注释在编程世界里是很常见也很有用的东西

注释会被浏览器或者编译器忽略

因而不会对代码产生任何效果，除了稍微增加了代码体积

但却给了程序员很大的方便

♦️ 7 p 标签

HTML 有许许多多的标签，一口气学完，可能够呛

大多数人都很难办到一下子掌握几百个标签，毕竟，罗马不是一天建成的

然而，千里之路，始于足下

接下来我们将一个一个积累，不积硅步无以至千里嘛～

栗子

<p>我是一个段落</p>

<p>我也是一个段落

<!-- 如果你想偷懒的话，p 标签的结束部分</p>是可以省略的 -->

<p>
  我也是一个段落哦
</p>

<!-- 段落一般都会比较长，为了结构为清晰，一般会缩进两个空格 -->

小知识点

标签有许许多多，即有共性，也有差异性

悄悄告诉你，p 标签属于块级元素哦

♦️ 8 h1 标签

<h1 /> 标签有一个系列，分别是 1，2，3，4，5，6

h 是 head 的缩写，表示头部，顾名思义 <h1 /> 标签一般被用来表示标题

h 后面的数字 1，2，3，4，5，6 表示标题的权重，或者说字号的大小。

所以数字越小，字号越大，权重越高。

栗子

<h1>我是最大的标题</h1>
<h2>我是老二</h2>
<h3>所以我只能是老三了</h3>
<h4>请叫我四爷</h4>
<h5>辣么我就是龙五了</h5>
<h6>倒数第一也是第一</h6>

小知识点

<h1 /> 系列的标签非常好掌握，学一个就懂 6 个

不过呢，h 系列可以说是 HTML 里有且仅有的了

所以后面的标签，还得扎扎实实一个一个积累

悄悄告诉你，h 标签和 p 标签一样，都是块级元素哟

♦️ 9 a 标签

<a /> 标签是一个强大的标签！

为什么呢？因为它让你可以在 Web 的世界里驰骋

这是怎么办到的？

a 标签俗称锚点，它有一个 "href" 的属性

给这个属性赋一个正确的值，a 标签就能拽你装逼带你飞

栗子

<a>我现在还不能带你飞，因为木有href属性</a>

<a href="https://baidu.com">点我，带你飞到李彦宏面前！</a>

<a href="https://qq.com" target="_blank">点我，带你去另外一个页面装逼</a>

小知识点

a 标签大有用途，除了上面的用法还有很多哟

不过现在来不及解释那么多了，童鞋们自己撸几个 a 标签体验下上面的区别哈

对了，a 标签和 p、h 标签不一样，它是内联标签哟

♦️ 10 span 标签

如果 HTML 的世界是一场撸啊撸的话，<span /> 标签便是一枚强大辅助

它通常和 p 标签一起出现

在处理文本的时候，p 标签是 ADC，span 标签呢，乃一枚给力辅助

栗子

<p>
  我系ADC啊
  <span class="niuB">我系辅助啊</span> 
</p>

小知识点

span 标签运用得最多的地方，是局部文字高亮

除此之外，通常还被用来做文字图标 font icon

对了，span 标签和 a 标签一样，它是内联标签哟

♦️ J style 标签

在 HTML 里，有一类标签是是专门用来引入资源的，其中 style 标签算一个

除此之外 style 标签和寻常标签没啥两样

都是有开始，有结束，被包裹在 </> 一对尖括号之间

栗子

<style>
  .niuB { color: red }
</style>

嵌套在 style 标签里面的东东，叫做 CSS 这里知道就好，不深究。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .niuB { color: red }
    </style>
    ...
  </head>
  <body>
    ...
  </body>
</html>

小知识点

style 标签是一种资源标签，用来引入 CSS 样式

一般嵌套在 head 标签之间，为啥呢？

因为样式要优先加载，不然用户就会看到一坨木有样式的简陋页面

作为资源标签，style 即不是内联也不是块级哟

♦️ Q script 标签

在 HTML 里，还有一个资源标签叫 script

script 的意思是：脚本，顾名思义 script 标签引入的定然是脚本语言了

没错，你猜对了，被嵌套在 <script /> 标签里的正是 JS

栗子

<script>
  var a = "niuB!"
</script>

<script src="https://newteo.com/static/js/demo.js"/>

嵌套在 script 标签里面的东东，叫做 JavaScript 也就是 JS。 一句带过，不深究。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://newteo.com/static/js/demo.js"/>
    ...
  </head>
  <body>
    <script>
      var a = "niuB!"
    </script>
    ...
    <script src="https://newteo.com/static/js/demo2.js"/>
  </body>
</html>

小知识点

script 标签是一种资源标签，用来引入 JS 代码

可以被嵌套在 head 和 body 之间

有两种书写方式，注意到了吗？自闭合、带 src 属性的模式，和开标签、闭标签模式

作为资源标签，script 和 style 一样，即不是内联也不是块级哟

♦️ K 综合练习

学习到这里，童鞋们总共掌握了 16 个标签、一条声明、一个注释

惊不惊喜，意不意外？

为了方便童鞋巩固知识点，可以简单归纳为几句话

5 根钢筋水泥 2 处资源入口 9 枚文本常客 1 条声明 1 个注释

栗子

<!-- 5 根钢筋水泥 -->
<html /> <head /> <title /> <meta /> <body />

<!-- 2 处资源入口 -->
<style /> <script />

<!-- 9 枚文本常客 -->
<h1-6 /> <p /> <span /> <a /> 

<!-- 1 条声明 -->
<!DOCTYPE html>

<!-- 1 个注释 -->

小知识点

掌握这些标签，你就可以编写最基本的网页啦～

这篇文章价值九元