前端HTML学习笔记

最新推荐文章于 2024-07-18 15:09:36 发布

小西几啦啦啦

最新推荐文章于 2024-07-18 15:09:36 发布

阅读量108

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/qq_44678974/article/details/119786745

版权

前端HTML学习笔记

1、什么是HTML？

HTML是HyperText Markup Language(超文本标记语言)

它不是一种编程语言，而是一种标记语言，用于告诉浏览器如何构造你的页面。它可以由一系列HTML元素组合成web开发人员想要的简单或者复杂的页面。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

HTML特点

超文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下：

1.简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。

2.可扩展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超文本标记语言采取子类元素的方式，为系统扩展带来保证。

3.平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。

4.通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

2、创建HTML文件

打开vscode,创建html文件。

在这里插入图片描述

对基本html5页面结构的理解

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fWLXM8LE-1629283563849)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20210802193221680.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hJ3ltrng-1629283563850)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20210802194124509.png)]$

3、语法

1、元素

单标签元素，仅有一个标签

<meta />、<img />、<br />

双标签，有开始标签和结束标签

<div></div>
<p></p>

2、属性

HTML标签都拥有自己的属性，属性应该出现在元素的开始标签内部，属性名和属性值通过"="分割，属性与属性之间通过空格分割，属性名不区分大小写，属性值区分大小写并且属性值可以使用双引号引起来。

核心属性：绝大多数标签都具有的属性。title、id、class、style。

title:描述信息

<div title="header">div</div>

id:唯一标识

<div id="div1">div</div>

class:标识类元素

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

style:样式

<div style="color:red">div</div>

3、块级元素

作用：搭建页面结构

特点：

独占一行空间
默认宽度为100%
高度由子元素或内容决定
可以通过css指定其宽度

元素	作用	已有CSS效果
div	无意义的块元素
h1~h3	标题标题	margin font-size font-weight
p	段落	margin
ul,li	无序列表	margin padding list-style
ol,li	有序列表	margin padding list-style
dl,dt,dd	定义列表	dl - margin dd - margin
html
body		margin
header	H5新增的语义化标签`<br>`(样式与div类似)	`<div class="header"></div>`
footer		`<div class="footer"></div>`
nav		`<div class="nav"></div>`
article		`<div class="article"></div>`
section		`<div class="section"></div>`
aside		`<div class="aside"></div>`
address		`<div class="address"></div>`

4、行内元素

作用：在结构中填充网页内容

特点：

与其他行内元素共享一行空间
宽高由自身决定
由于不用来搭建网页结构，所以也无需通过css指定其宽度
行内元素中不可以嵌套块元素

在这里插入图片描述

4、标签

1、h标签

h标签是标题标签，在html中一共有六级标签h1-h6，在显示效果上，h1最大，h6最小

在这里插入图片描述

2、p标签

p标签是段落标签，用于表示内容中的一个自然段，p标签的文字，会独占一行，并且段与段之间会有一个间距。

在这里插入图片描述

3、br标签

br标签表示换行标签 br标签是一个自结束标签 br标签的语义是不另起一个段落换行, 而在企业开发中一般情况下需要换行都是因为需要另起一个段落, 所以在企业开发中很少使用br标签

4、hr标签

hr标签可以在页面中生成一个分割线

5、img标签

img标签用来在浏览器显现图片的

img标签的格式：

src:设置一个图片的路径（绝对路径和相对路径，最好使用相对路径）

alt:可以用来设置在图片不能显示的时，对图片的描述

<img src="" alt="">

6、a标签

a标签是用来控制页面之间的跳转的

<a href="跳转的页面">内容</a>

a标签中还有一个叫做target的属性，这个属性专门用于控制如何跳转
_self:用于当前的选项卡中进行跳转，也就是不新建页面跳转，默认就是__self
_blank:用于在新的选项卡中进行跳转，也就是新建页面跳转

7、假链接

假链接是进行点击之后不需要跳转的链接叫做假链接

假链接的格式：#直接回到页面首部

<a href="#">回到顶部</a>

8、锚点

要想通过a标签跳转到指定的位置, 那么必须告诉a标签一个独一无二的身份证号码, 这样a标签才能在当前界面中找到需要跳转到的目标位置

在HTML中, 每一个标签都有一个名称叫做id的属性, 这个属性就是用来给标签指定一个独一无二的身份证号码的

实现通过a标签跳转到指定的位置分为两步：
1、给目标位置的标签添加一个id属性, 然后指定一个独一无二的值
2、告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少

<a href="#center">跳转</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id="center">我是中部</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

独一无二的值
2、告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少

<a href="#center">跳转</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id="center">我是中部</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

小西几啦啦啦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端HTML学习笔记

前端HTML学习笔记1、什么是HTML？HTML是HyperText Markup Language(超文本标记语言) 它不是一种编程语言，而是一种标记语言，用于告诉浏览器如何构造你的页面。它可以由一系列HTML元素组合成web开发人员想要的简单或者复杂的页面。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。HTML特点超文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下： 1.简易性：
复制链接

扫一扫