HTML学习笔记

最新推荐文章于 2023-01-12 15:14:08 发布

poem23

最新推荐文章于 2023-01-12 15:14:08 发布

阅读量569

点赞数 1

分类专栏： html 文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/poem23/article/details/122599536

版权

html 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

Hey,guys.我是poem23.

这是我在b站关于《黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程》的学习笔记，链接附上https://www.bilibili.com/video/BV14J4114768?p=1，希望我的笔记能帮助到你。

HTML

什么是网页？

网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。
网页是网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读。
网页时构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html后缀结尾的文件，因此俗称其为HTML文件。

什么是HTML？

HTML指的是超文本标记语言（Hyper Text Markup Language）,它是用来描述网页的一种语言。
HTML不是一种编程语言，而是一种标记语言（markup language）。
标记语言是一套标签（markup tag）

所谓超文本，有两层含义：
a. 它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）；
b. 它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。

常用浏览器

浏览器是网页显示、运行的平台。常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等，平时称为五大浏览器。

浏览器内核（渲染引擎）

负责读取网页内容、整理讯息、计算网页的显示方式并显示页面。

目前国内一般浏览器都会采用Webkit/Blink内核，如360、UC、QQ、搜狗等。

Web标准

W3C（万维网联盟）是国际最著名的标准化组织。

为什么需要Web标准？

1.让web的发展前景更广阔。
2.内容能被更广泛的设备访问。
3.更容易被搜索引擎搜索。
4.降低网站流量费用。
5.使网站更易于维护。
6.提高页面的浏览速度。

web标准的构成

主要包括结构（structure）、表现（presentation）和行为（behavior）三个方面。

HTML标签

HTML语法规范

1.HTML标签是由尖括号包围的关键词，例如<title>。
2.HTML标签通常是成对出现的，例如<html>和</html>，我们称为双标签，标签对中的第一个标签为开始标签，第二个标签是结束标签。
3.有些特殊的标签必须是单个标签（极少情况），例如</br>，我们称为单标签。

标签关系

双标签可以分为两类：包含关系和并列关系。

HTML基本结构标签

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。
HTML页面也称为HTML文档。

基本结构标签总结

第一个页面

接下来，给你一个例子来试试吧
1.首先，新建一个文本文档

2.在文本中输入以下代码，保存并关闭

<html>
   <head>
	<title> 第一个页面</title>
    </head>
    <body>
       键盘敲烂, 工资过万
    </body>
</html>

3.将文本文档重命名

点击“是”（我的电脑默认使用的是联想浏览器）

4.双击打开它

这样你就得到一个简单的html页面啦~

HTML常用标签

根据标签的语义，在合适的地方给一个最为合适的标签，可以让页面结构更清晰。

标题标签

<h1>--<h6>

<h1>我是一级标题</h1>

标签语义：作为标题使用，并且依据重要性递减
特点：
1.加了标题的文字会变得加粗，字号也会依次变大
2.一个标题独占一行

标题标签（例）

//先不用在意字符集，下一篇文章会做介绍
<!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>
    <h2>文字加粗一行显。</h2>
    <h3>由大到小依次减，</h3>
    <h4>从重到轻随之变。</h4>
    <h5>语法规范书写后，</h5>
    <h6>具体效果刷新见。</h6>
</body>
</html>

这是生成结果：
在这里插入图片描述
你可以参考上面第一个页面的部分完成它。

段落标签和换行标签

在HTML中，编辑时回车符和空白符是起不到实际作用的，而这时如果我们想换行就需要借助段落标签以及换行标签。

<p>段落标签</p>

①paragraph的缩写
②文本在一个段落中会根据浏览器窗口的大小自动切换
③段落和段落之间有一个比较大的空隙

<br />换行标签

①break的缩写
②强制换行
③是一个单标签，简单开启新的一行，和段落不一样，段落之间会插入一些垂直的间距。

段落标签和换行标签（例）

下面是我给的一个例子

<!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>
    这是使用了三个   空白符

    这里用到了回车符
    这是用到了<br/>换行标签
    <p>这是用到了段落标签</p>
</body>
</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>
<br>
    我是<strong>加粗</strong>的文字
    我是<b>加粗</b>的文字<br>
    我是<em>倾斜</em>的文字
    我是<i>倾斜</i>的文字<br>
    我是<ins>下划线</ins>
    我是<u>下划线</u><br>
    我是<del>删除线</del>
    我是<s>删除线</s>
</body>
</html>

为了将他们分开显示，我使用了换行标签。结果：
在这里插入图片描述

div和span标签

<div>和<span>标签是没有语义的，他们就是一个盒子，用来装内容的。
<div>这是头部</div>
<span>今日价格</span>
div是division的缩写，表示分割、分区。span意为跨度、跨距

特点：
①<div>标签用来布局，但是现在一行只能放一个</div>。相当于一个大盒子，对照下面图片理解。
②<span>标签用来布局，一行上可以多个<span>。相当于一个小盒子。
③具体用法在本篇文章中不做详细介绍。

div和span标签（例）

<!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>我是一个div标签，我独占一行</div>
    <div>我是一个div标签，我独占一行</div>
    <span>百度</span>
    <span>新浪</span>
    <span>搜狐</span>
</body>
</html>