HTML的入门学习

～猿来如此

已于 2024-06-29 13:32:13 修改

阅读量990

点赞数 13

文章标签： html css

于 2024-06-29 13:30:13 首次发布

本文链接：https://blog.csdn.net/2401_86071727/article/details/140052041

版权

1.HTML的概念

HTML（HyperText Markup Language）中文名称为超⽂本标记语⾔，它是构成网页整体框架的基础。浏览.html或.htm为后缀的文件，可以使用看到网页内容，包括文字、图片、视频等可直观感受到的信息。

<!-- ⽂档头信息，此行必加，避免不同浏览器解析出现问题 -->
<!DOCTYPE html> 
<!-- 属性lang是单词language的缩写，意思是语⾔，”en”代表英语，”zh-CN”代表中⽂，为避免
编译出现无法解析文字，一般推荐使用"en" -->
<html lang="en">
<!-- head标签的内容不会在⽹⻚内部直接显示，它⽤来帮助浏览器解析⻚⾯的，但title标签中的
内容可在浏览器选项卡中显示，每个网页只有一个head标签 -->
<head>
<!--meta标签⽤来设置⽹⻚的⼀些元数据，⽐如⽹⻚的字符集，关键字、简介meta是⼀个⾃结束标
签，编写⼀个⾃结束标签时，可以在开始标签中添加⼀个/-->
<!--字符编码，浏览器会根据字符编码进⾏解析常⻅的字符编码有：gb2312、gbk、unicode、utf-8。-->
<meta charset="UTF-8">
<!--viewport 设备的屏幕width=device-width width属性控制设备的宽度。假设您的⽹站将被
带有不同屏幕分辨率的设备浏览， 那么将它设置为 device-width 可以确保它能正确呈现在不同
设备上initial-scale=1.0 确保⽹⻚加载时，以 1:1 的⽐例呈现，不会有任何的缩放。-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 浏览器选项卡上的名字 -->
<title>该内容可显示在顶部选项卡</title>
<!-- 框架标签要有头有尾，编写代码时要留心 -->
</head>
<!--body标签⽤来设置⽹⻚的主体内容，⽹⻚中所有可⻅的内容，都要求在body中编写-->
<body>
<!-- 在body⾥的内容都是显示在浏览器的视图区的，即网页内部区域 -->
该区域编写网页内容
<!-- 尾部标签要符合嵌套逻辑 -->
</body>
</html>

2.HTML基础标签的使用

2.1 h标签

h标签即标题标签，通常用来表示网页的主要内容。在文字大小的显示效果上，从<h1/>到<h6/>依次递减，其内容的重要性也相应递减。

h标签的格式

<h1>标题内容</h1>

2.2 p标签

段落标签，⽤于表示内容的⼀个段落，p标签中的内容独占⼀⾏，并且各个段落之间有⼀个间距。

p标签的格式

<p>内容独占一行</p>

2.3 hr标签

用于页面内生成分割符。

hr标签的格式

内容<hr>

或

<hr>内容

2.4 实体字符

HTML中的特殊符号无法直接使用，需要特定的代码进行解析，常用符号有以下几种：

空格
<	<
>	>
“	"
&	&
‘	'
©	©
®	®

实体字符的使用没有特别要求，只需在内容中完整写出即可。

2.5 img标签

用于插入图片，并在浏览器中显示。

img标签的格式
<img src=" " alt=" ">

<img src="图⽚的链接或本地路径地址"

alt="在图⽚不能显示的时对图⽚的描述"

width="图片宽度，单位px（可不设置）"

height="图片高度，单位px（可不设置）"

title="⿏标悬停时，弹出的描述框中显示的自定义内容（按需设置）">

2.6 a标签

⽤于实现⻚⾯与⻚⾯之间跳转的。

href中可使用 "#" ——>直接回到⻚⾯的顶部；"javascript"——> 不会⾃动回到⻚⾯的顶部

a标签的格式
<a href="链接(如https://www.baidu.com)" target=" " title="自定义标题">自定义内容</a>

target的属性⽤于控制页面进行本选项卡跳转或新建选项卡跳转，使用如下：

本选项卡跳转（默认设置）

<a href=" " target="_self" title=" "></a>

新建选项卡跳转

<a href=" " target="_blank" title=" "></a>

2.7 div标签

⼀个纯粹的块元素，主要⽤来进⾏⻚⾯基本结构的搭建，用法如下：

<body>

<div>

<div>页面分为多个盒子块</div>

</div>

</body>

2.8 span标签

专⻔⽤来选中⽂字，然后为⽂字来设置样式

<span>文字</span>

3.常用标签

除上述基础标签外还有一些标签是被开发人员广泛使用的。如：

3.1 mailto链接

设置电脑中邮件的默认发送信息，前提是电脑中装有邮箱软件。

href中是收件人邮箱地址，使⽤⽅式：
<a href="mailto:name@email.com">内容</a>

3.2 锚点

用于内容与绑定内容的跳转，类似于点击某一标题会自动跳转到改标题的详情内容页。

  <a> href="#div50">跳转到本页面的标签对应id的内容</a>
  <a href="./test.html#03">跳转到其他页面的标签对应id的内容</a>
  <div>这是第49个标签</div>
  <div id="div50">这是第50个标签</div>  
  <div>这是第51个标签</div>
  <div>这是第52个标签</div>
  <div>这是第53个标签</div>

3.3 video标签

其作⽤是播放视频。

格式:

<video autoplay controls loop poster=" " src=" "></video>

src:告诉video标签需要播放的视频地址
autoplay:⽤于告诉video标签是否需要⾃动播放视频
controls:⽤于告诉video标签是否需要控制条
poster:⽤于告诉video标签视频没有播放之前显示的占位图⽚
loop:⼀般⽤于做⼴告视频，⽤于告诉video标签视频播放完毕之后是否需要循环播放

4.VSCode编写HTML的快捷语法

VSCode是当今编写HTML代码的主流软件，因此学习快捷编码方式能帮助我们更快、更高效的开发网页。以下是一些常用到的快捷方式：

4.1使用shift＋1 生成 " ! " 来快速创建HTML的整体框架，如：

4.2使用标签 > 标签的方式可快速生成父子元素，如：

4.3使用标签 * n (n取整整数) 可快速生成多个相同标签，如：

4.4将2和3的方法结合可得到自己想要的标签组合，如：

4.5使用标签 * n{内容} (n取整整数)可快速创建多个相同标签内容，如：

～猿来如此

关注

13
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
HTML的入门学习

a href="链接(如https://www.baidu.com)" target=" " title="自定义标题">自定义内容h标签即标题标签，通常用来表示网页的主要内容。在文字大小的显示效果上，从到依次递减，其内容的重要性也相应递减。段落标签，⽤于表示内容的⼀个段落，p标签中的内容独占⼀⾏，并且各个段落之间有⼀个间距。用于内容与绑定内容的跳转，类似于点击某一标题会自动跳转到改标题的详情内容页。title="⿏标悬停时，弹出的描述框中显示的自定义内容（按需设置）">
复制链接

扫一扫