二. 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="data: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="data:images/pic.png" alt="图片">

说明:

src属性主要是添加要展示的图片地址
alt属性的作用:
- 图片加载失败时, 显示的提示信息
- 搜索引擎在收录图片时, 根据这个属性值来收录图片
- 制作无障碍网页, 方便盲人的读屏软件读取.

特殊的一些标签:

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

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

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

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

删除标签: del 或者 ( s )

倾斜标签: em 或者 ( i )

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

总结:

HTML 整体是由标签组成的, 各个标签的功能很多都是重复的
同学们学习标签用法的时候多多练习即可
标签整体分为: 块级标签和行内标签
- 块级标签可以设置宽高值, 独占一行
- 行内标签自动设置宽高值, 一行内可以有多个
- 一般来说, 块级元素可以包含行内元素,行内元素不能包含块级元素.
- 特殊情况, 需要记住: p 标签不能嵌套 div
a 标签用于跳转(超链接) [跳转网页, 跳转页面, 跳转文件等]
标题标签用于设置标题, 共有6级
div就是一个无色透明的容器,看不见,摸不到
img标签主要用于设置图片
p 标签就是paragraph(段落) 通常用于包裹段落
span是一个行内元素通常用于p标签内部,个别文字设置时使用.

HTML常用标签的基本介绍相关推荐

thymeleaf中的th:常用标签
th: 的常用标签关键字功能介绍案例 th:id 替换id <input th:id="'xxx' + ${col ...
第一次预习作业（html,css,js简单介绍，HTML常用标签）
目录一.HTML,CSS,JS,简单介绍 1.HTML 2.CSS 3.JS 二.HTML常用标签一.HTML,CSS,JS,简单介绍 1.HTML HTML 是用来描述网页的一种语言. HTML ...
【2022.7.11】HTML基础介绍语法常用标签超文本链接锚点定位
来自2022.7.11 今日学习一.HTML基础介绍 1.网页 1.1什么是网页 1.2什么是HTML 1.3超文本 1.4网页的形成 2.常用浏览器 2.1常用浏览器 2.2浏览器内核 3.web ...
html，css，js简单介绍，html常用标签
目录简单介绍 HTML常用标签 1.html骨架标签 2.标题标签 3.段落标签 4.换行标签 5.文本格式化标签 6.div标签,span标签和pre标签 7.图像标签 8.超链接标签 9.注释标 ...
044_HTML介绍及常用标签
一,HTML初识 HTML: 超文本标记语言(Hypertext Markup Language, HTML)是一种用于创建网页的标记语言. 给网页交互,事实上每一个网页都是一个客户端,获取网页的服务 ...
HTML简介及常用标签介绍
一.概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以 ...
初始html(常用标签)
今天我们来学习Web前端的一些知识,这一阶段需要记忆的东西相对来说比较多,需要花时间记忆以及做好练习. 一.HTML初识 1.web服务本质 import socketdef main():sock ...
html简介及常用标签
目录一.html的简介 1.什么是html? 2.第一个html程序 3.html的规范(遵循) 4.html的操作思想二.html中常用的标签 1.文字标签和注释标签 2.注释标签 3.标题标签 ...
常见的html行级元素及语义,HTML入门之——结构，常用标签及其属性，再加上语义化...
一,HTML简介(来源HTML百度百科) HTML:超文本标记语言,是指能够包含链接,图片,程序,视频等非文字元素的页面二,HTML,XML,XHTML之间有什么区别 HTML:超文本标记语言,语法 ...

HTML常用标签的基本介绍