HTML常用标签的基本介绍

时间：2021-08-29 19:38:06

二. HTML

1. 了解HTML

我们可以通过查看源代码的形式, 看到制作出来的网页

通过仔细观察网页源代码我们可以知道: 制作网页的语言是用 "<" ">" 括起来的. 有些是成对出现,有些不是 -----> 我们一般称这样用尖括号括起来的语言为 HTML

HTML 是 Hyper Text Markup Language 的首字母简写, 意思是超文本标记语言, 超文本指的是超链接, 标记指的是标签, 是一种用来制作网页的语言, 这种语言由一个个的标签组成, 用这种语言制作的文件保存的是一个文本文件, 文件的扩展名为 .html 或者 .htm

2. HTML文档的基本结构

html文件的基本结构为:

<!DOCTYPE html>  <!--html的文档声明,声明当前html文档的版本-->
<html>           <!--根标签: html开始标签 -->
    <head>       <!--html标签中的第一个子标签: head开始标签-->
     <meta charset="UTF-8">    <!--单个标签meta: 主要用于当前文档设置, 这里设置的是文档的编码格式 utf-8-->
     <title>Document</title>   <!--title标签: 主要用于设置当前文档标题-->
    </head>      <!--html标签中的第一个子标签: head结束标签-->
    <body>       <!--html标签中的第二个子标签: body开始标签-->
    
    </body>      <!--html标签中的第二个子标签: body结束标签-->
</html>          <!--根标签: html结束标签 -->

注意:

html语言中注释的写法: <!-- 注释的内容 -->

快捷键: ctrl + / 取消注释: ctrl + /

说明:

  • 基本上所有的html文件都是按照这样的格式作为模板进行开发.

  • head标签的主要作用:

    • 网页的设置

    • 资源的引用

  • head标签中的内容一般不会显示在网页上.

  • body中的内容通常用于网页显示

3. 快速创建HTML文档

我们可以新建一个.html文件, 在文件中快速创建基本标签:

快速创建的方法是: 在文件中敲一个 " ! " 然后按 tab 键 即可: 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    浙江温州浙江温州 江南皮革厂倒闭了
    浙江温州最大皮革厂 江南皮革厂倒闭了
    王八蛋王八蛋黄鹤老板 吃喝嫖赌吃喝嫖赌
    欠下了欠下了3.5个亿 带着他的小姨子跑了
    我们没有没有没有办法办法 拿着钱包抵工资工资
    原价都是100多200多300多的钱包 统统20块
    20块20块统统20块 统统统统统统20块
    黄鹤王八蛋王八蛋黄鹤 你不是你不是你不是人
    100多200多300多的钱包 统统20块统统20块
    黄鹤王八蛋王八蛋黄鹤 你不是你不是你不是人
    我们辛辛苦苦干了 辛辛苦苦给你给你干了大半年
    你你你不发不发工资工资 你还我还我血汗钱
    还我血汗钱
</body>
</html>

我们可以看到,这样就可以快速的创建一个基本的html文档了, 我们可以在这个文档中快速的编写代码

说明:

  • lang="en": 声明这个网页的语言是英文, 如果是中文则为: lang="zh-CN", 主要是做统计使用, 国内网页一般不关心这个值.

  • 第五行的主要作用是: 让网页在移动端观看时, 网页不缩放.

  • 第六行的主要作用是: 如果网页在 IE 浏览器上观看, 让 IE 以最高版本显示网页

4. HTML标签

学习 HTML 语言就是学习标签的用法, HTML 标签有20多个, 学会这些标签的使用, 就基本上学会了 HTML的使用

1. 认识标签:

在html语言中, 用尖括号括起来的部分, 我们成为标签.

2. 标签的了解:

  • 成对的标签

  • 单个的标签

无论是成对的标签还是单个的标签,都需要用 " < > " 括起来

例如: 


 <!DOCTYPE html>  
<html lang="en">
<head>  
    <meta charset="utf-8">
    <title>我的主页</title>
</head>
<body>
    <ul>
        <li><a href="#">这是个链接</a></li>
    </ul>
    <hr>
    <img src="../day001/image.png" alt="">
</body>
</html>

由上图我们可以知道:

  • <html> <head> <body> <title> <ul> <li> <a> 这样的标签是成对的

  • <meta> <hr> <img> 这样的标签是单个的

同时: 由上面的代码我们也可以获取到:

标签是可以嵌套的: 例如 上面的代码中 html 标签, 嵌套了 head 标签和 body 标签.

body 标签又嵌套了 ul 标签, ul 标签嵌套了 li , li 嵌套了 a标签等等.

类似于这样标签中添加标签的写法,我们称之为标签的嵌套.

3. 标签的属性

有些标签内部有这样的设置: 


<img src="../day001/image.png" alt="">

其中 src=" " 和 alt=" " 这部分内容, 我们称之为当前标签的属性.

说明:

  • 有些标签的属性是相同的, 有些标签的属性是不同的.

  • 通过标签的属性,我们可以给当前的标签设置不同的内容.

总结:

  • 我们只需要知道标签的尖括号内部添加的设置是属性即可

  • html 常用标签的属性我们在学习的过程中慢慢掌握.

4. 标签的分类

注意: 在前端中, 元素指的就是标签, 所以我们有时候说: xx元素, 即指的是 xx标签

标签按照显示的不同, 可以分为两类:

  • 块元素 (行元素)

  • 内联元素 (行内元素)

块元素的特点:

  • 单个块元素在浏览器中默认独占一行

  • 两个块元素不能够在一行显示, 他们会自动换成两行显示

  • 块元素可以设置宽高等属性.

内联元素:

  • 多个内联元素可以在一行显示

  • 内联元素不能够设置宽高, 设置了也没有用, 不会显示出效果

  • 内联元素的宽高由他们本身的内容多少来支撑, 内容多,宽高自动增加.

常用的块元素标签:

1. 标题标签

表示文档的标题, 除了具有块元素基本特征之外, 还含有默认的外边距和字体大小


<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

2.段落标签:

表示文档中的一个文字段落, 除了具有块元素基本特征, 还含有默认的外边距

<p>
    既然你诚心诚意的问了， 
    我们就大发慈悲的告诉你！ 
    为了防止世界被破坏， 
    为了守护世界的和平； 
    贯彻爱与真实的邪恶， 
    可爱又迷人的反派角色~~ 
    武藏！ 
    小次郎！ 
    我们是穿梭在银河的火箭队！白洞，白色的明天在等着我们！！ 
    就是这样~喵~~~~ 
</p>
​
段落标签中如果想要强制换行,需要使用<br>标签, 这个标签是个单个标签,所以只有一个.
​
另外在html中, 如果想要写大于号, 小于号, 或者空格等, 需要使用代码来实现, 这样更加优雅~
代码实现大于号:  &gt;
代码实现小于号:  &lt;
代码实现空格:    &nbsp;

3. 通用块容器标签 div

表示文档中一块内容, 具 有块元素基本特性, 没有其他默认样式


<div>这是一个div元素</div>
<div>这是第二个div元素</div>
<div>
    <h3>自我介绍</h3> 
    <p>
        姑娘貌美一枝花，才学素养人品佳。
        活泼开朗不八卦，头脑敏锐有想法。
        踏实奋进不做假，乐于求知肯深挖。
        舞文弄墨擅策划，慧心妙舌喜表达。
        交友广泛爱分享，微博日日落不下。
        四年深造象牙塔，学习实践两手抓。
        只待应届招聘季，我花开后百花杀。
    </p>
</div>

常用内联元素标签

1.超链接标签 a

链接到另外一个网页, 具有内联元素基本特征, 默认文字蓝色, 有下划线 


<a href="02.html">第二个网页</a>
<a href="http://www.baidu.com">百度网站</a>
<a href="http://www.baidu.com"><img src="images/logo.png" alt=""></a>
<a href="#">默认链接</a>
​
<a href="http://www.itcast.cn">原来的窗口打开界面</a>
<a href="www.baidu.com" target="_blank">新窗口打开界面</a>

说明:

  • a 标签的 href 属性可以添加 # 号, 这个是缺省链接地址:

  • 不确定地址时, 我们可以临时使用 # 来占位,确定后替换即可

  • 如果想要跳转到当前页面的最上方时, 可以使用 #

  • a 标签有 target 属性

    • 如果不设置该属性, 在当前页面打开新页面

    • 如果设置该属性, 则会在新窗口中打开新页面

2.通用内联容器标签 span

具有内联元素基本特性, 没有其他默认样式

我们一般在文字段落的中间部分强调某一部分的时候调用span,添加样式,从而改变强调的部分的样式:

例如: 这是一段文字,其中梅总需要强调,所以我们可以使用span来完成强调的操作.


<p>这是一个段落文字, 段落文字中有<span>特殊标志或者样式<span>的文字</p>

3. 图片标签 img

在网页中插入图片, 具有内联元素基本特性, 但是它支持宽高设置


<img src="images/pic.png" alt="图片">

说明:

  • src属性主要是添加要展示的图片地址

  • alt属性的作用:

    • 图片加载失败时, 显示的提示信息

    • 搜索引擎在收录图片时, 根据这个属性值来收录图片

    • 制作无障碍网页, 方便盲人的读屏软件读取.

特殊的一些标签:

空格: 在html中, 空格一般会用: &nbsp;表示

回车: 在html中回车换行一般用<br>表示

小于号( < ): 在html中一般用&lt;表示

大于号( > ): 在html中一般用&gt;表示

删除标签: del 或者 ( s )

倾斜标签: em 或者 ( i )

下划线标签: ins 或者 ( u )

总结:

  • HTML 整体是由标签组成的, 各个标签的功能很多都是重复的

  • 同学们学习标签用法的时候多多练习即可

  • 标签整体分为: 块级标签 和 行内标签

    • 块级标签可以设置宽高值, 独占一行

    • 行内标签自动设置宽高值, 一行内可以有多个

    • 一般来说, 块级元素可以包含行内元素,行内元素不能包含块级元素.

    • 特殊情况, 需要记住: p 标签不能嵌套 div

  • a 标签用于跳转(超链接) [跳转网页, 跳转页面, 跳转文件等]

  • 标题标签用于设置标题, 共有6级

  • div就是一个无色透明的容器,看不见,摸不到

  • img标签主要用于设置图片

  • p 标签就是paragraph(段落) 通常用于包裹段落

  • span是一个行内元素通常用于p标签内部,个别文字设置时使用.

标签：

相关文章