Open joephon opened 5 years ago
HTML 标记语言是 XML 的一种拓展模式,所以它们有一些共同的特性
HTML
XML
有开始就有结束,<></>
<></>
如果中间没有标签嵌套的话,也可以写成这样子 </>
</>
HTML 标签由一对 尖括号 包裹起来的
尖括号
<html> </html>
HTML 的标签名,是固定的,譬如 <html></html> 不能写成 <httl></httl>
<html></html>
<httl></httl>
后者是无效的。
有开始就有结束,记住咯~
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 对标签 和一个格式声明。
Web
栗子
HTML 标签都是成对地出现,且有各自的作用,下面来学习这些标签
<!DOCTYPE> 声明 HTML 文档的格式
<html /> 定义 HTML 文档流从这里开始
<head /> 定义 HTML 文档流的头部
<meta /> 定义 HTML 文档的资源
<title /> 定义 HTML 文档的标题
<body /> 定义 HTML 文档流的主体
HTML 的标签是相互嵌套的,嵌套在外面的叫爸爸,嵌套在里面的是儿子,爸爸外面是爷爷,儿子里面是孙子,依此类推。
为了让标签更有可读性,一般采用缩进风格来表示嵌套关系
即:缩进 2 个 空格
空格
每一个 HTML 标签都拥有自己的属性
属性 写在开始标签里面,也就是 <> 里面
属性
<>
<meta charset="utf-8" /> <div class="class"></div> <p style="color: #000">我是一个段落</p>
上面 <meta /> 标签的标签名是 meta
meta
charset="utf-8" 是 <meta /> 标签的属性
charset="utf-8"
charset 是属性名,"utf-8" 是属性值
charset
"utf-8"
<div /> <p> 同理
<div />
<p>
由此可见,HTML 标签不但被一对尖括号包裹
还拥有标签名、属性名、属性值
标签名
属性名
属性值
HTML 的标签都拥有属性,这是为了让标签更好地工作
不过,某些标签是可以不写任何属性的
譬如:<div /> <p>
但有些标签如果不写属性,将无法正常工作
譬如:<input /> <video />
<input />
<video />
<div>我是一个块级元素,如果不加属性,也可以正常显示</div> <p>我是一个段落,也是块级元素,需要不需要属性,主要看程序猿</p> <input value="我是input标签的值,某些时候我是必不可少的"/> <video src="如果没有定义视频资源,我将无法工作"> 你能看到我,说明你的浏览器不兼容 video 标签 </video>
在 HTML 的所有属性里,绝大多数都是 通用属性
通用属性
即:每个标签都拥有的属性
譬如:style、class
style
class
编程的世界里,但凡能称为语言的一般都会有注释
HTML 的注释风格遵循 XML 的风格
都被包裹在一对尖括号里 <>
以 "!" 开头,两条横杆紧随其后 "--"
<!-- --> <!-- <div> Hello </div> --> <!-- <input value="我是value的值"/> -->
注释在编程世界里是很常见也很有用的东西
注释会被浏览器或者编译器忽略
因而不会对代码产生任何效果,除了稍微增加了代码体积
但却给了程序员很大的方便
HTML 有许许多多的标签,一口气学完,可能够呛
大多数人都很难办到一下子掌握几百个标签,毕竟,罗马不是一天建成的
然而,千里之路,始于足下
接下来我们将一个一个积累,不积硅步无以至千里嘛~
<p>我是一个段落</p> <p>我也是一个段落 <!-- 如果你想偷懒的话,p 标签的结束部分</p>是可以省略的 --> <p> 我也是一个段落哦 </p> <!-- 段落一般都会比较长,为了结构为清晰,一般会缩进两个空格 -->
标签有许许多多,即有共性,也有差异性
悄悄告诉你,p 标签属于块级元素哦
<h1 /> 标签有一个系列,分别是 1,2,3,4,5,6
<h1 />
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 标签一样,都是块级元素哟
<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 标签不一样,它是内联标签哟
如果 HTML 的世界是一场撸啊撸的话,<span /> 标签便是一枚强大辅助
<span />
它通常和 p 标签一起出现
在处理文本的时候,p 标签是 ADC,span 标签呢,乃一枚给力辅助
<p> 我系ADC啊 <span class="niuB">我系辅助啊</span> </p>
span 标签运用得最多的地方,是局部文字高亮
除此之外,通常还被用来做文字图标 font icon
font icon
对了,span 标签和 a 标签一样,它是内联标签哟
在 HTML 里,有一类标签是是专门用来引入资源的,其中 style 标签算一个
除此之外 style 标签和寻常标签没啥两样
都是有开始,有结束,被包裹在 </> 一对尖括号之间
<style> .niuB { color: red } </style>
嵌套在 style 标签里面的东东,叫做 CSS 这里知道就好,不深究。
CSS
<!DOCTYPE html> <html> <head> <style> .niuB { color: red } </style> ... </head> <body> ... </body> </html>
style 标签是一种资源标签,用来引入 CSS 样式
一般嵌套在 head 标签之间,为啥呢?
因为样式要优先加载,不然用户就会看到一坨木有样式的简陋页面
作为资源标签,style 即不是内联也不是块级哟
在 HTML 里,还有一个资源标签叫 script
script 的意思是:脚本,顾名思义 script 标签引入的定然是脚本语言了
没错,你猜对了,被嵌套在 <script /> 标签里的正是 JS
<script />
<script> var a = "niuB!" </script> <script src="https://newteo.com/static/js/demo.js"/>
嵌套在 script 标签里面的东东,叫做 JavaScript 也就是 JS。 一句带过,不深究。
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 一样,即不是内联也不是块级哟
学习到这里,童鞋们总共掌握了 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 个注释 -->
掌握这些标签,你就可以编写最基本的网页啦~
♦️ A 标签结构
HTML
标记语言是XML
的一种拓展模式,所以它们有一些共同的特性有开始就有结束,
<></>
如果中间没有标签嵌套的话,也可以写成这样子
</>
HTML
标签由一对尖括号
包裹起来的栗子
小知识点
HTML
的标签名,是固定的,譬如<html></html>
不能写成<httl></httl>
后者是无效的。
有开始就有结束,记住咯~
♦️ 2 HTML 文档
HTML
文档有一个固定的结构,包含 5 对基本标签,一个格式声明<!DOCTYPE>
<html />
<head />
<meta />
<title />
<body />
栗子
小知识点
HTML
的文档结构,是固定的。譬如:每一个
Web
页面都至少包含栗子
里的 5 对标签 和一个格式声明。♦️ 3 结构标签
HTML
标签都是成对地出现,且有各自的作用,下面来学习这些标签<!DOCTYPE>
声明HTML
文档的格式<html />
定义HTML
文档流从这里开始<head />
定义HTML
文档流的头部<meta />
定义HTML
文档的资源<title />
定义HTML
文档的标题<body />
定义HTML
文档流的主体栗子
小知识点
HTML
的标签是相互嵌套的,嵌套在外面的叫爸爸,嵌套在里面的是儿子,爸爸外面是爷爷,儿子里面是孙子,依此类推。为了让标签更有可读性,一般采用缩进风格来表示嵌套关系
即:缩进 2 个
空格
♦️ 4 标签的属性
每一个
HTML
标签都拥有自己的属性属性
写在开始标签里面,也就是<>
里面栗子
上面
<meta />
标签的标签名是meta
charset="utf-8"
是<meta />
标签的属性charset
是属性名,"utf-8"
是属性值<div />
<p>
同理小知识点
由此可见,
HTML
标签不但被一对尖括号包裹还拥有
标签名
、属性名
、属性值
♦️ 5 属性的作用
HTML
的标签都拥有属性,这是为了让标签更好地工作不过,某些标签是可以不写任何属性的
譬如:
<div />
<p>
但有些标签如果不写属性,将无法正常工作
譬如:
<input />
<video />
栗子
小知识点
在
HTML
的所有属性里,绝大多数都是通用属性
即:每个标签都拥有的属性
譬如:
style
、class
♦️ 6 注释风格
编程的世界里,但凡能称为语言的一般都会有注释
HTML
的注释风格遵循XML
的风格都被包裹在一对尖括号里
<>
以 "!" 开头,两条横杆紧随其后 "--"
栗子
小知识点
注释在编程世界里是很常见也很有用的东西
注释会被浏览器或者编译器忽略
因而不会对代码产生任何效果,除了稍微增加了代码体积
但却给了程序员很大的方便
♦️ 7 p 标签
HTML
有许许多多的标签,一口气学完,可能够呛大多数人都很难办到一下子掌握几百个标签,毕竟,罗马不是一天建成的
然而,千里之路,始于足下
接下来我们将一个一个积累,不积硅步无以至千里嘛~
栗子
小知识点
标签有许许多多,即有共性,也有差异性
悄悄告诉你,p 标签属于块级元素哦
♦️ 8 h1 标签
<h1 />
标签有一个系列,分别是 1,2,3,4,5,6h 是 head 的缩写,表示头部,顾名思义
<h1 />
标签一般被用来表示标题h 后面的数字 1,2,3,4,5,6 表示标题的权重,或者说字号的大小。
所以数字越小,字号越大,权重越高。
栗子
小知识点
<h1 />
系列的标签非常好掌握,学一个就懂 6 个不过呢,h 系列可以说是
HTML
里有且仅有的了所以后面的标签,还得扎扎实实一个一个积累
悄悄告诉你,h 标签和 p 标签一样,都是块级元素哟
♦️ 9 a 标签
<a />
标签是一个强大的标签!为什么呢?因为它让你可以在 Web 的世界里驰骋
这是怎么办到的?
a 标签俗称锚点,它有一个 "href" 的属性
给这个属性赋一个正确的值,a 标签就能拽你装逼带你飞
栗子
小知识点
a 标签大有用途,除了上面的用法还有很多哟
不过现在来不及解释那么多了,童鞋们自己撸几个 a 标签体验下上面的区别哈
对了,a 标签和 p、h 标签不一样,它是内联标签哟
♦️ 10 span 标签
如果 HTML 的世界是一场撸啊撸的话,
<span />
标签便是一枚强大辅助它通常和 p 标签一起出现
在处理文本的时候,p 标签是 ADC,span 标签呢,乃一枚给力辅助
栗子
小知识点
span 标签运用得最多的地方,是局部文字高亮
除此之外,通常还被用来做文字图标
font icon
对了,span 标签和 a 标签一样,它是内联标签哟
♦️ J style 标签
在
HTML
里,有一类标签是是专门用来引入资源的,其中 style 标签算一个除此之外
style
标签和寻常标签没啥两样都是有开始,有结束,被包裹在
</>
一对尖括号之间栗子
嵌套在 style 标签里面的东东,叫做
CSS
这里知道就好,不深究。小知识点
style 标签是一种资源标签,用来引入 CSS 样式
一般嵌套在 head 标签之间,为啥呢?
因为样式要优先加载,不然用户就会看到一坨木有样式的简陋页面
作为资源标签,style 即不是内联也不是块级哟
♦️ Q script 标签
在
HTML
里,还有一个资源标签叫 scriptscript 的意思是:脚本,顾名思义 script 标签引入的定然是脚本语言了
没错,你猜对了,被嵌套在
<script />
标签里的正是 JS栗子
嵌套在 script 标签里面的东东,叫做
JavaScript
也就是JS
。 一句带过,不深究。小知识点
script 标签是一种资源标签,用来引入
JS
代码可以被嵌套在 head 和 body 之间
有两种书写方式,注意到了吗?自闭合、带 src 属性的模式,和开标签、闭标签模式
作为资源标签,script 和 style 一样,即不是内联也不是块级哟
♦️ K 综合练习
学习到这里,童鞋们总共掌握了 16 个标签、一条声明、一个注释
惊不惊喜,意不意外?
为了方便童鞋巩固知识点,可以简单归纳为几句话
5 根钢筋水泥 2 处资源入口 9 枚文本常客 1 条声明 1 个注释
栗子
小知识点
掌握这些标签,你就可以编写最基本的网页啦~
这篇文章价值九元