前端学习路线之html5 （一）

最新推荐文章于 2023-02-09 11:28:08 发布

前端扫地僧

最新推荐文章于 2023-02-09 11:28:08 发布

阅读量1k

点赞数

文章标签：前端 html5 html

本文链接：https://blog.csdn.net/qq_45839045/article/details/121960787

版权

html基础认知

概念

HTML（Hyper Text Markup Language）中文译为：超文本标记语言；

html专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频、超链接等内容进行描述，比如图片img，视频video、段落p等；

注意：html是超文本标记语言，不是编程语言；

XHTML介绍： XHTML：Extensible Hypertext Markup Language，可扩展超文本标注语言。 XHTML的主要目的是为了取代HTML，也可以理解为HTML的升级版。 HTML的标记书写很不规范，会造成其它的设备(ipad、手机、电视等)无法正常显示。 XHTML与HTML4.0的标记基本上一样。 XHTML是严格的、纯净的HTML。

# HTML的专有名词

网页：由各种标记组成的一个页面就叫网页。
主页(首页) : 一个网站的起始页面或者导航页面。
标记：比如<p>称为开始标记，</p>称为结束标记，也叫标签。每个标签都规定好了特殊的含义。
元素：比如<p>内容</p>称为元素.
属性：给每一个标签所做的辅助信息。
XHTML：符合XML语法标准的HTML。
DHTML：dynamic，动态的。javascript + css + html合起来的页面就是一个 DHTML。
HTTP：超文本传输协议。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP：邮件传输协议，FTP：文件传输协议。

html基本结构

一个完整的html页面是从一个固定的结构开始搭建的

一对html标签表示整个html页面，里面嵌套了head和body两个标签：

head标签：表示网页的头部信息，一般是为浏览器提供对应的网站需要的相关信息，浏览器中是不会显示的；比如：标题title、引入css、字符编码等；但是title标题会在浏览器的标题栏显示；

body标签：里面的内容是浏览器最终解析给用户显示在浏览器里面的内容；

html基本语法规范（重点了解）

01、html标签必须要加在一对尖括号<>里面；

<html></html> 
<body></body>
<br >

02 、html标签分为两大类，双标签和单标签； 双标签：成对出现，由开始和结束标签组成，开始标签和结束标签直接可以放内容，一般里面主要嵌套文本、图片等内容；

<html></html>
<div></div>
<h2></h2>
<span></span>
<strong></strong>

单标签：只有开始没有结束标签，往往表示某一个功能；

<br>换行
<hr>水平线等

03、html标签关系分为嵌套和并列两种关系：

比如html的基本结构：

<html>
<head>
    <title>网站标题</title>
</head>
<body>
    网站主题
</body>
</html>

嵌套（父子级）关系：html嵌套了head和body两个标签，head里面又嵌套了title标签；并列（兄弟）关系：head和body属于并列关系； 04、html标签属性，HTML 标签可以拥有属，属性提供了有关 HTML 元素的更多的信息。

<img src="" alt="" title="" width="">

以上代码中img表示图片标签,我们可以设置它的相关属性用来描述图片，比如：src用来查找图片路径，width设置图片的宽度大小；

注意：不同的属性和属性之间要用空格隔开，属性名和属性值之间要用等号（=）链接，属性值必须要书写在英文的引号里面（建议使用双引号）；

四、html常用标签（重点应用）

我们可以人为的将html常见的标签分为具有语义的html标签和没有语义html标签；

具有语义的html标签

作用：让我们的网页结构更加清晰简洁（比如标题标签、段落标签）

标题标签h

双标签，有 h1-h6六个级别组成；

    <h1>我是标题标签h1</h1>
    <h2>我是标题标签h2</h2>
    <h3>我是标题标签h3</h3>
    <h4>我是标题标签h4</h4>
    <h5>我是标题标签h5</h5>
    <h6>我是标题标签h6</h6>

特点：01、默认加粗，独自占一行 02、文字的大小依次减小，权重也依次减小；

注意事项： 01、h1标签一个页面建议只使用一次，而且里面主要放网站的标志或者logo； 02、h2标签一个页面建议最多使用2次，主要放一些重要的标题内容； 03、h3-h6可以随便使用的；

段落标签p

双标签p，设置网站中文字段落，段落里面只能嵌套文本和图片等内容；

<p>里面嵌套一段文字</p>

换行标签br

单标签，表示换行功能；浏览器在解析html代码的时候，对回车换行解析为一个空格实现不了换行效果；

 <br>
 <br />

水平线hr

可以设置一条水平线，基本不用，后期用css边框实现

<hr>

文本格式化标签

特点：一行可以放多个；

加粗 b标签和strong标签

<b>加粗</b>
<strong>加粗</strong>

倾斜标签 i 标签和em标签

<i>倾斜</i>
<em>倾斜</em>

下划线 u标签和ins标签

<u>下划线</u>
 <ins>下划线</ins>

删除线 s标签和del标签

<s>删除线</s>
<del>删除线</del>

图片标签img

单标签：<img >

常见用属性 src属性：是原则性属性，必须要书写，主要是查找图片的路径；

alt属性：原则性属性，必须要书写，有利于网站的SEO优化；替换文本的功能，当图片加载错误或者找不到图片路径的时候，替换位置提示用户；

 <img src="01.jpg" alt="这里是一张图片">

title属性：提示文本，鼠标移入图片后悬停的时候出现的提示性文字； title属性不光可以设置给img标签，其他标签也可以使用。比如a标签；

    <img src="01.jpg" alt="这里是一张图片" title="一张美丽的图片">
    <a href="#" title="跳转到传智"></a>

宽width和高height属性：设置图片的宽度和高度大小。实际开发中，如果需要给图片设置宽高，建议只设置一个宽或者高，这样图片就会等比例缩放，如果两个都设置了可能会导致图片拉伸变形；

超链接标签a（基本语法为重点）

作用：实现页面之间的相互跳转；

基本语法：

 <a href=""></a>

常用属性：

<a href="http://www.baidu.com" target="_blank">跳转到百度</a>

href属性：设置要跳转的目标位置，一般建议里面书写相对路径； href属性是a的原则性属性，必须要的，如果不写就会失去超链接的功能； target属性：设置打开超链接a的方式，一般使用blank取值，实现新窗口打开链接；target="blank"

超链接常见的链接形式

外部链接：直接跳转到在线网址，设置href的取值为在线网址，必须要加http://

 <a href="http://www.baidu.com" target="_blank">跳转到百度</a>

项目内部跳转：要跳转的位置和当前文件是平级关系，直接设置href的取值为目标文件的名称；

<a href="./04招聘页面.html" target="_blank">跳转到招聘页面</a>

空链接：不知道我们的跳转目标，我们就用一个#代表空

<a href="#">空链接</a>

假链接：只需要超链接a的手型样式，不需要任何跳转功能，就用javascript:;

<a href="javascript:;">假链接</a>

下载链接：点击下载文件，直接设置href的取值为一个压缩包即可

<a href="./img.zip">下载图片</a>

锚点链接（了解）

作用：实现页面内部的跳转

实现的步骤：

01、找到要跳转的位置，然后用id在标签身上做标记；

 <h2 id="mao1">工作责任</h2>

02、设置超链接a的href取值为#id值

<a href="#mao1">跳转到工作责任</a>

视频标签video

基本语法：

<video src="视频路径"></video>

常用属性： src属性：查找视频的路径 autoplay属性：自动播放属性，高版本浏览器一般都是禁止自动播放的； muted属性：静音播放，用来解决高版本浏览器不支持自动播放的问题； controls属性：播放控件，不同的浏览器可能得到样式不一致，后期用js控制； loop属性：循环播放，可以实现一直循环播放视频；

<video src="./media/2.mp4" autoplay="autoplay" muted="muted" controls="controls" loop="loop"></video>

注意：

01、属性的取值和属性一致，我们可以直接简写属性即可；

<video src="./media/2.mp4" autoplay muted controls loop></video>

02、可以在视频标签之间添加提示文本，当浏览器不支持video标签的时候会提醒用户，浏览器不支持。

<video src="./media/2.mp4" autoplay muted controls loop>提示信息</video>

03、video标签我们一般建议引入的视频格式为mp4格式，因为mp4格式几乎所有浏览器都支持；

音频标签audio

基本语法：

<audio src=""></audio>

常用属性： src属性：查找音频的路径 autoplay属性：自动播放属性，高版本浏览器一般都是禁止自动播放的； controls属性：播放控件，不同的浏览器可能得到样式不一致，后期用js控制； loop属性：循环播放，可以实现一致循环播放视频；

<audio src="./media/2.mp3" autoplay="autoplay"  controls="controls" loop="loop"><audio>

注意事项和视频标签一样，插入的音频格式建议使用mp3几乎所有浏览器都支持；

没有语义html标签

布局标签div

主要做网页的基本结构，独自占一行；

布局标签span

主要用来设置特殊的文字效果或者小图标，一行可以放多个；

这期介绍了html的几个常用标签，下期我们来介绍html骨架的代码的基本含义。