① HTML介绍及标签用法


本人是个新手,写下博客用于自我复习、自我总结。
如有错误之处,请各位大佬指出。
学习资料来源于:尚硅谷


在最开始,首先要提到W3C。W3C的出现为了制定网页开发的标准,以使同一个网页在不同的浏览器中有相同的效果。所以,我们需要制订我们编写的网页都需要遵循W3C的规范。在这里插入图片描述
结构:HTML用于描述页面的结构
表现:CSS用于控制页面中元素的样式
行为:JavaScript用于响应用户操作

在这里插入图片描述


HTML简介

HTML(Hypertext Markup Language)超文本标记语言。

• 它负责网页的三个要素之中的结构。
• HTML使用标签的的形式来标识网页中的不同组成部分。
• 所谓超文本指的是超链接,使用超链接可以让我们从一个页面跳转到另一个页面。

最简单的HTML可以在记事本上书写,只需要改txt格式为html。这时可以发现,普通的写在网页中就是一行,可能不会呈现出你想要的格式。所以,书写HTML肯定需要格式。示例:(具体格式之后再提)
(在记事本上书写,并改txt为html)

<html>
	<head>
		<title>哈哈,我在哪出现?</title>
	</head>
	<body>
		<h1>回乡偶书(二首)</h1>
		<h2>其一</h2>
		<h2>贺知章</h2>
		<p>少小离家老大回</p>
		<p>乡音无改鬓毛衰</p>
		<p>儿童相见不相识</p>
		<p>笑问客从何处来</p>
	</body>
</html>

标签
• HTML中的标记指的就是标签。
• HTML使用标记标签来描述网页。
• 结构:
<标签名>标签内容</标签名>

标签一般成对出现,但是也存在一些自结束标签:<标签名/>

元素
• 我们还将一个完整的标签称为元素。
• 这里我们可以将元素和标签认为是一个同义词。

<h1>一级标题</h1>

上边的h1我们就称为元素

<p>我是一个<em>段落</em></p>

p也是一个元素,em是p的子元素,p是em的父元素。

<body>
    <p><em>内容</em></p>
</body>

• body也是一个元素。
• body是p和em的祖先元素。
• p和em是body的后代元素。

注释
• HTML注释中的内容不会在网页中显示。
• 格式:

<!-- 注释内容 -->

• 合理的使用注释可以帮助开发人员理解网页的代码。
• 注释不能嵌套!

属性
• 可以为HTML标签设置属性。
• 通过属性为HTML元素提供附加信息。
• 属性需要设置在开始标签或自结束标签中。
• 属性总是以名称 / 值对的形式出现。
• 比如:name=“value”
• 有些属性可以是任意值,有些则必须是指定值。

<h1 title="我是一个标题">标题</h1>

例:

<html>
	<head>
		<title>标签的属性</title>
	</head>
	<body>
	<!-- 
		属性,在标签中(开始标签或自结束标签)还可以设置属性
			属性是一个名值对(x=y)
			属性用来设置标签中的内容如何显示
			
			属性和标签名或其他属性应该使用空格隔开
			
			属性不能瞎写,应该根据文档中的规定来编写,
		    有些属性有属性值,有些没有。如果有属性值,属性值应该使用引号引起来
	-->
		<h1>这是我的<font color="red" size='3'>第二个</font>网页!</h1>
	<body>
</html>

常见属性

• id
– id属性作为标签的唯一标识,在同一个网页中不能出现相同的id属性值。

• class
– class属性用来为标签分组,拥有相同class属性的标签我们认为就是一组,可以出现相同的class属性,可以为一个元素指定多个class。

• title
– title属性用来指定标签的标题,指定title以后,鼠标移入到元素上方时,会出现提示文字。


doctype

HTML总共有很多的版本,而且这其中至少有三个版本在广泛使用,那么浏览器怎么知道我们在使用哪个版本呢?

为了让浏览器知道我们使用的HTML版本,我们还需要在网页的最上边添加一个doctype声明,来告诉浏览器网页的版本。

比如:在这里插入图片描述
在这里插入图片描述
我们会发现html4.01和xhtml的文档声明十分的麻烦。不过现在使用的是html5的文档声明,而且非常简单:

<!DOCTYPE html>

需要注意的是,如果不写的话,解析网页时可能会产生一些不可预期的行为,所以避免的最好方式就是在页面中编写正确的doctype。当然在用eclipse等软件时,这些都会自动生成。

除此以外,还有编码问题。如果我们保存文件时使用的是utf-8进行编码,而浏览器读取页面时使用gb2312,这样就会导致页面中的内容不能正常显示,也就是我们所说的乱码。
(常见的字符集:ASKII、ISO8859-1、GBK、GB2312、UTF-8。)

所以我们只需要统一两者使用的字符集就可以解决乱码问题。为了页面有更好的使用性,一般会使用utf-8。

在html5中只需要使用meta标签即可完成这个任务:

<meta charset="utf-8" >

meta作用:
– meta 标签可提供有关页面的元信息,比如针对搜索引擎和更新频度的描述和关键词。
– meta 标签位于文档的头部,不包含任何内容。meta 标签的属性定义了与文档相关联的名称/值对。
在这里插入图片描述

例:

<!DOCTYPE html>
<html>
<head>
	<!-- 可以通过meta标签来设置网页的字符集,避免乱码问题 -->
	<meta charset="UTF-8">
	<!-- 
            meta主要用于设置网页中的一些元数据,元数据不是给用户看
        
            charset 指定网页的字符集
            name 指定的数据的名称
            content 指定的数据的内容
            
            keywords 表示网站的关键字,可以同时指定多个关键字,关键字之间使用,隔开
            <meta name="keywords" content="网上购物,网上商城,手机">
                    
            description 用于指定网站的描述
            <meta name="description" content="京东JD.COM-专业的综合网上购物商城">
            网站的描述会显示在搜索引擎的搜索的结果中
     -->
	<meta name="keywords" content="HTML5,前端,CSS3">
	<meta name="description" content="这是一个非常不错的网站">
	<!--
    <meta http-equiv="refresh" content="3;url=https://www.baidu.com"> 
        将页面重定向到另一个网站
    -->
	<title>网页的基本结构</title>
</head>
<body>
	<h1><font color="red" size='3'>示例</font></h1>
</body>
</html>

常用标签

< html >

• 作用:
– < html >标签用于告诉浏览器这个文档中包含的信息是用HTML编写的。

• 用法:
– 所有的网页的内容都需要编写到html标签中,一个页面中html标签只能有一个。
– html标签中有两个子标签head和body 。


< head >

• 作用:
– < head >标签用来表示网页的元数据,head中包含了浏览器和搜索引擎使用的其他不可见信息。

• 用法:
– head标签作为html标签的子元素的出现,一个网页中只能有一个head。


< title >

• 作用:
– < title >标签表示网页的标题,一般会在网页的标题栏上显示。
– title标签中的文字,是页面优化的最重要因素。在搜索引擎的搜索时最先看到的、最醒目的内容。

• 用法:
– 建议将title标签紧贴着head标签编写,这样搜索引擎可以快速检索到标题标签。
– 网站中的多个页面的title也不应该重复,这样不利于搜索隐藏检索。


< body >

• 作用:
– < body >标签用来设置网页的主体,所有在页面中能看到的内容都应该编写到body标签中。

• 用法:
– body标签作为html的子标签使用。


< h1 > ~ < h6 >

• 作用:
– h1 ~ h6都是网页中的标题标签,用来表示网页中的一个标题,不同的是,从h1 ~ h6重要性越来越低。
– 标题标签相当于正文的标题,通常认为重要性仅次于页面的title。
– 一般标题标签我们只会使用到h3,h3以后的标题标签对于搜索引擎就没有什么意义了。
– 一个页面中只会使用一个h1标签。


< p >

• 作用:
– < p >标签表示网页中的一个段落。
– 一般浏览器会在段落的前和后各加上一个换行,也就是段落会在页面中自成一行。


< br />

• 作用
– < br />标签表示一个换行标签,使用br标签可以使br标签后的内容另起一行


< hr />

• 作用:
– < hr />标签是水平线标签,使用hr标签可以在页面中打印一条水平线,水平线可以将页面分成上下两个部分。


< img /> ※

• 作用:
– < img />标签是图片标签,可以用来向页面中引入一张外部的图片。img标签是一个自结束标签。

img这种元素属于替换元素(块和行内元素之间,具有两种元素的特点)

• 属性:
– src :指向一个外部的图片的路径。(路径规则和超链接是一样的)
– alt :图片的描述。这个描述默认情况下不会显示,有些浏览器会图片无法加载时显示搜索引擎会根据alt中的内容来识别图片,如果不写alt属性则图片不会被搜索引擎所收录。

例:

<!DOCTYPE html>
<html>
<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>图片标签</title>
</head>
<body>
    <!-- 
        width 图片的宽度 (单位是像素)
        height 图片的高度    
               宽度和高度中如果只修改了一个,则另一个会等比例缩放

            注意:
                一般在pc端,不建议修改图片的大小,需要多大的图片就裁多大
                但是在移动端,经常需要对图片进行缩放(大图缩小)

           图片的格式:
            jpeg(jpg)
                - 支持的颜色比较丰富,不支持透明效果,不支持动图
                - 一般用来显示照片
            gif
                - 支持的颜色比较少,支持简单透明,支持动图
                - 颜色单一的图片,动图
            png
                - 支持的颜色丰富,支持复杂透明,不支持动图
                - 颜色丰富,复杂透明图片(专为网页而生)
            webp
                - 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
                - 它具备其他图片格式的所有优点,而且文件还特别的小
                - 缺点:兼容性不好
            base64 
                - 将图片使用base64编码,这样可以将图片转换为字符,通过字符的形式来引入图片    
                - 一般都是一些需要和网页一起加载的图片才会使用base64
     -->
    <img src="./img/1.gif" alt="松鼠">

    <img width="200"  src="https://d2ggl082rr1mkp.cloudfront.net/category/IronMan_preview_1521810286_220_310.jpeg" alt="钢铁侠">

	<!--
	这是Data URI scheme。
	Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。
	比如下面的这两串字符,其实是两张图片,将这些字符复制黏贴到浏览器的地址栏中,就能看到它了。
        
	data表示取得数据的协定名称,image/jpeg是数据类型名称,base64 是数据的编码方法,
	逗号后面就是这个image/png文件base64编码后的数据。
	-->
    <img src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMZaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjJDQUQyNzAxMTY4NDExRTZBMTdEOTlBRDNBNjk4N0QzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjJDQUQyNzAwMTY4NDExRTZBMTdEOTlBRDNBNjk4N0QzIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSIyMEIwNzYzMUNEQzQ2NkI5NzM4RUFEQjBCNTdFMUE5RiIgc3RSZWY6ZG9jdW1lbnRJRD0iMjBCMDc2MzFDREM0NjZCOTczOEVBREIwQjU3RTFBOUYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAM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">
    
</body>
</html>

< a > ※

• 作用:
– < a >标签是超链接标签,通过a标签,可以快速跳转到其他页面。
• 属性:
– href :指向一个链接地址,这个地址可以是一个外部网站的地址,也可以写一个内部页面的地址。
– target:设置打开目标页面的位置,可选值:_blank新窗口、_self当前窗口。

在a标签中可以嵌套除它自身外的任何元素。

例:

<!DOCTYPE html>
<html>
<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>超链接</title>
</head>
<body>
    <a href="https://www.baidu.com" target="_self">超链接</a>
    <br><br>
    <a href="NewFile.html" target="_block">超链接2</a>
    <br><br>
    <a href="#bottom">去底部</a>
    <br><br>
    <!-- 
	可以跳转到页面的指定位置,只需将href属性设置 #目标元素的id属性值

    id属性(唯一不重复的)
        - 每一个标签都可以添加一个id属性
        - id属性就是元素的唯一标识,同一个页面中不能出现重复的id属性    
     -->
    <a href="#p3">去第三个自然段</a>
    <br><br>

    <p>在我的后园,可以看见墙外有两株树,一株是枣树,还有一株也是枣树。 这上面的夜的天空,奇怪而高,我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去,使人们仰面不再看见。然而现在却非常之蓝,闪闪地䀹着几十个星星的眼,冷眼。他的口角上现出微笑,似乎自以为大有深意,而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字,人们叫他们什么名字。我记得有一种开过极细小的粉红花,现在还开着,但是更极细小了,她在冷的夜气中,瑟缩地做梦,梦见春的到来,梦见秋的到来,梦见瘦的诗人将眼泪擦在她最末的花瓣上,告诉她秋虽然来,冬虽然来,而此后接着还是春,蝴蝶乱飞,蜜蜂都唱起春词来了。她于是一笑,虽然颜色冻得红惨惨地,仍然瑟缩着。 枣树,他们简直落尽了叶子。先前,还有一两个孩子来打他们,别人打剩的枣子,现在是一个也不剩了,连叶子也落尽了。他知道小粉红花的梦,秋后要有春;他也知道落叶的梦,春后还是秋。他简直落尽叶子,单剩干子,然而脱了当初满树是果实和叶子时候的弧形,欠伸得很舒服。但是,有几枝还低亚着,护定他从打枣的竿梢所得的皮伤,而最直最长的几枝,却已默默地铁似的直刺着奇怪而高的天空,使天空闪闪地鬼䀹眼;直刺着天空中圆满的月亮,使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝,不安了,仿佛想离去人间,避开枣树,只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子,却仍然默默地铁似的直刺着奇怪而高的天空,一意要制他的死命,不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声,夜游的恶鸟飞过了。 我忽而听到夜半的笑声,吃吃地,似乎不愿意惊动睡着的人,然而四围的空气都应和着笑。夜半,没有别的人,我即刻听出这声音就在我嘴里,我也即刻被这笑声所驱逐,回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响,还有许多小飞虫乱撞。不多久,几个进来了,许是从窗纸的破孔进来的。他们一进来,又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了,他于是遇到火,而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩,雪白的纸,折出波浪纹的叠痕,一角还画出一枝猩红色的栀子。 猩红的栀子开花时,枣树又要做小粉红花的梦,青葱地弯成弧形了……我又听到夜半的笑声;我赶紧砍断我的心绪,看那老在白纸罩上的小青虫,头大尾小,向日葵子似的,只有半粒小麦那么大,遍身的颜色苍翠得可爱,可怜。 我打一个呵欠,点起一支纸烟,喷出烟来,对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。</p>
    <p>在我的后园,可以看见墙外有两株树,一株是枣树,还有一株也是枣树。 这上面的夜的天空,奇怪而高,我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去,使人们仰面不再看见。然而现在却非常之蓝,闪闪地䀹着几十个星星的眼,冷眼。他的口角上现出微笑,似乎自以为大有深意,而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字,人们叫他们什么名字。我记得有一种开过极细小的粉红花,现在还开着,但是更极细小了,她在冷的夜气中,瑟缩地做梦,梦见春的到来,梦见秋的到来,梦见瘦的诗人将眼泪擦在她最末的花瓣上,告诉她秋虽然来,冬虽然来,而此后接着还是春,蝴蝶乱飞,蜜蜂都唱起春词来了。她于是一笑,虽然颜色冻得红惨惨地,仍然瑟缩着。 枣树,他们简直落尽了叶子。先前,还有一两个孩子来打他们,别人打剩的枣子,现在是一个也不剩了,连叶子也落尽了。他知道小粉红花的梦,秋后要有春;他也知道落叶的梦,春后还是秋。他简直落尽叶子,单剩干子,然而脱了当初满树是果实和叶子时候的弧形,欠伸得很舒服。但是,有几枝还低亚着,护定他从打枣的竿梢所得的皮伤,而最直最长的几枝,却已默默地铁似的直刺着奇怪而高的天空,使天空闪闪地鬼䀹眼;直刺着天空中圆满的月亮,使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝,不安了,仿佛想离去人间,避开枣树,只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子,却仍然默默地铁似的直刺着奇怪而高的天空,一意要制他的死命,不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声,夜游的恶鸟飞过了。 我忽而听到夜半的笑声,吃吃地,似乎不愿意惊动睡着的人,然而四围的空气都应和着笑。夜半,没有别的人,我即刻听出这声音就在我嘴里,我也即刻被这笑声所驱逐,回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响,还有许多小飞虫乱撞。不多久,几个进来了,许是从窗纸的破孔进来的。他们一进来,又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了,他于是遇到火,而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩,雪白的纸,折出波浪纹的叠痕,一角还画出一枝猩红色的栀子。 猩红的栀子开花时,枣树又要做小粉红花的梦,青葱地弯成弧形了……我又听到夜半的笑声;我赶紧砍断我的心绪,看那老在白纸罩上的小青虫,头大尾小,向日葵子似的,只有半粒小麦那么大,遍身的颜色苍翠得可爱,可怜。 我打一个呵欠,点起一支纸烟,喷出烟来,对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。</p>
    <p id="p3">在我的后园,可以看见墙外有两株树,一株是枣树,还有一株也是枣树。 这上面的夜的天空,奇怪而高,我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去,使人们仰面不再看见。然而现在却非常之蓝,闪闪地䀹着几十个星星的眼,冷眼。他的口角上现出微笑,似乎自以为大有深意,而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字,人们叫他们什么名字。我记得有一种开过极细小的粉红花,现在还开着,但是更极细小了,她在冷的夜气中,瑟缩地做梦,梦见春的到来,梦见秋的到来,梦见瘦的诗人将眼泪擦在她最末的花瓣上,告诉她秋虽然来,冬虽然来,而此后接着还是春,蝴蝶乱飞,蜜蜂都唱起春词来了。她于是一笑,虽然颜色冻得红惨惨地,仍然瑟缩着。 枣树,他们简直落尽了叶子。先前,还有一两个孩子来打他们,别人打剩的枣子,现在是一个也不剩了,连叶子也落尽了。他知道小粉红花的梦,秋后要有春;他也知道落叶的梦,春后还是秋。他简直落尽叶子,单剩干子,然而脱了当初满树是果实和叶子时候的弧形,欠伸得很舒服。但是,有几枝还低亚着,护定他从打枣的竿梢所得的皮伤,而最直最长的几枝,却已默默地铁似的直刺着奇怪而高的天空,使天空闪闪地鬼䀹眼;直刺着天空中圆满的月亮,使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝,不安了,仿佛想离去人间,避开枣树,只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子,却仍然默默地铁似的直刺着奇怪而高的天空,一意要制他的死命,不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声,夜游的恶鸟飞过了。 我忽而听到夜半的笑声,吃吃地,似乎不愿意惊动睡着的人,然而四围的空气都应和着笑。夜半,没有别的人,我即刻听出这声音就在我嘴里,我也即刻被这笑声所驱逐,回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响,还有许多小飞虫乱撞。不多久,几个进来了,许是从窗纸的破孔进来的。他们一进来,又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了,他于是遇到火,而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩,雪白的纸,折出波浪纹的叠痕,一角还画出一枝猩红色的栀子。 猩红的栀子开花时,枣树又要做小粉红花的梦,青葱地弯成弧形了……我又听到夜半的笑声;我赶紧砍断我的心绪,看那老在白纸罩上的小青虫,头大尾小,向日葵子似的,只有半粒小麦那么大,遍身的颜色苍翠得可爱,可怜。 我打一个呵欠,点起一支纸烟,喷出烟来,对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia quasi numquam quam molestias cumque eveniet ab nobis doloribus dolores. Nesciunt, distinctio tempore similique consequuntur nulla dolorem sapiente minus praesentium impedit.</p>

    <!-- 
        可以直接将超链接的href属性设置为#,这样点击超链接以后
        页面不会发生跳转,而是转到当前页面的顶部的位置
     -->
    <a href="#">这是一个新的超链接</a>
    <br><br>
    
    <!-- 可以使用 javascript:; 来作为href的属性,此时点击这个超链接什么也不会发生 -->
    <a href="javascript:;">这是一个新的超链接</a>
    <br><br>

    <a id="bottom" href="#">回到顶部</a>
</body>
</html>

当我们需要跳转一个服务器内部的页面时,一般我们都会使用相对路径
相对路径都会使用.或…开头
./
…/
./可以省略不写。
如果不写./
也不写…/
则就相当于写了./

./ 表示当前文件所在的目录

…/ 表示当前文件所在目录的上一级目录

例:

<!DOCTYPE html>
<html>
<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>

    <a href="./target.html">超链接1</a> 
    <br><br>
    <a href="../target4.html">超链接2</a>
    <br><br>
    <a href="./inner/target2.html">超链接3</a>
    <br><br>
    <a href="../outer/target3.html">超链接4</a>


</body>
</html>

文本标签 ※

< em >和< strong >

• em标签用于表示一段内容中的着重点。
• strong标签用于表示一个内容的重要性。
• 这两个标签可以单独使用,也可以一起使用。

<p>
<strong>警告:任何情况下不要接近僵尸。</strong>
他们只是 <em>看起来</em> 很友好,实际上他们是为了吃你的胳膊!
</p>

• 通常em显示为斜体,而strong显示为粗体。

< i >和< b >

• i标签会使文字变成斜体。
• b标签会使文字变成粗体。
• 这两个标签和em和strong类似,但是这两个标签没有语义。
• 所以根据html5标准,当我们只想设置文本特殊显示,而不需要强调内容时就可以使用i和b标签。

< small >

• small标签表示细则一类的旁注,通常包括免责声明、注意事项、法律限制、版权信息等。
• 浏览器在显示small标签时会显示一个比父元素小的字号。

<p><small>&copy;2016 XX. 保留所有权利.</small></p>

< cite >

• 使用cite标签可以指明对某内容的引用或参考。例如,戏剧、文章或图书的标题,歌曲、电影、照片或雕塑的名称等。

<p>
<cite>《七龙珠》</cite>讲的是召唤神龙的故事。
</p>

< blockquote >和< q >

• blockquote和q表示标记引用的文本。
• blockquote用于长引用,q用于短引用。
• 在两个标签中还可以使用cite属性来表示引用的地址。

孟子曾经说过:
<blockquote>天将降大任于是人也...</blockquote>
<p>孔子曾经说过:<q>学而时习之不亦说乎</q></p>

< sup >和< sub > ※

• sup和sub用于定义上标和下标。
• 上标主要用于表示类似于103中的3。
• 下标则用于表示类似余H2O中的2。

< ins >和< del >

• ins表示插入的内容,显示时通常会加上下划线。
• del表示删除的内容,显示时通常会加上删除线。

< code >和< pre >

• 如果你的内容包含代码示例或文件名,就可以使用code元素。
• pre元素表示的是预格式化文本,可以使用pre包住code来表示一段代码。

<pre>
<code>
function fun(){
alert("hello");
}
</code>
</pre>

更多其他标签和以上所有标签的使用,大家可以参照官方文档,自己尝试。

例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 
        在网页中HTML专门用来负责网页的结构
        所以在使用html标签时,应该关注的是标签的语义,而不是它的样式

        标题标签:
        h1 ~ h6 一共有六级标题
        从h1 ~ h6重要性递减,h1最重要,h6最不重要
                
        h1在网页中的重要性仅次于title标签,一般情况下一个页面中只会有一个h1
        一般情况下标题标签只会使用到h1~h3,h4~h6很少用

        标题标签都是块元素

        在页面中独占一行的元素称为块元素(block element)
     -->
     <h1>一级标题</h1>
     <h2>二级标题</h2>
     <h3>三级标题</h3>
     <h4>四级标题</h4>
     <h5>五级标题</h5>
     <h6>六级标题</h6>

     <!-- 
       hgroup标签用来为标题分组,可以将一组相关的标题同时放入到hgroup
      -->
      <hgroup>
            <h1>回乡偶书二首</h1>
            <h2>其一</h2>
      </hgroup>

     <!-- 
         p标签表示页面中的一个段落

         p也是一个块元素
      -->
      <p>在p标签中的内容就表示一个段落</p>
      <p>在p标签中的内容就表示一个段落</p>

      <!-- 
          em标签用于表示语音语调的一个加重

          在页面中不会独占一行的元素称为行内元素(inline element)
       -->
      <p>今天天气<em></em>不错!</p>

      <!-- 
          strong表示强调,重要内容!
       -->
      <p>你今天必须要<strong>完成作业</strong></p>

      鲁迅说:
      <!-- blockquote 表示一个长引用 -->
      <blockquote>
          这句话我是从来没有说过的!
      </blockquote>

      <!-- 
          q表示一个短引用
       -->
      子曰<q>学而时习之,乐呵乐呵!</q>

      <!-- 
          br标签表示页面中的换行
       -->
      <br>
      <br>

      今天天气真不错啊
</body>
</html>

效果图:
在这里插入图片描述
例:
(浏览器解析网页,会自动对内容进行修正)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <!-- 
        块元素(block element)
            - 在网页中一般通过块元素来对页面进行布局
        行内元素(inline element)
            - 行内元素主要用来包裹文字

            - 一般情况下会在块元素中放行内元素,而不会在行内元素中放块元素
            - 块元素中基本上什么都能放
            - p元素中不能放任何的块元素

            浏览器在解析网页时,会自动对网页中不符合规范的内容进行修正
            比如:
                标签写在了根元素的外部
                p元素中嵌套了块元素
                根元素中出现了除head和body以外的子元素
                ... ...
     -->

     <p>
         <h1>哈哈</h1>
     </p>
</body>
</html>

<h1>我就要写在html标签的外部!</h1>

效果图:
在这里插入图片描述
例:
(内联框架)

<!DOCTYPE html>
<html>
<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>内联框架</title>
</head>
<body>
    <!-- 
        内联框架,用于向当前页面中引入一个其他页面
            src 指定要引入的网页的路径
            frameborder 指定内联框架的边框
     -->
    <iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>
    <h1>Hello</h1>
</body>
</html>

布局标签(结构化语义标签)

 <!-- 
    header 表示网页的头部
    main 表示网页的主体部分(一个页面中只会有一个main)
    footer 表示网页的底部
    nav 表示网页中的导航
    aside 和主体相关的其他内容(侧边栏)
    article 表示一个独立的文章
    section 表示一个独立的区块,上边的标签都不能表示时使用section

    div 没有语义,就用来表示一个区块,目前来讲div还是我们主要的布局元素
    span 行内元素,没有任何的语义,一般用于在网页中选中文字

  -->
 <header></header>
 <main></main>
 <footer></footer>

 <nav></nav>
 <aside></aside>
 <article></article>

 <section></section>

 <div></div>

 <span></span>

列表相关标签

在html中也可以创建列表,html列表一共有三种:
    1、有序列表
    2、无序列表
    3、定义列表

有序列表,使用ol标签来创建有序列表
    使用li表示列表项  
    
无序列表,使用ul标签来创建无序列表
    使用li表示列表项

定义列表,使用dl标签来创建一个定义列表
    使用dt来表示定义的内容
    使用dd来对内容进行解释说明

列表之间可以互相嵌套

例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ul>

    <ol>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ol>
    
    <dl>
        <dt>结构</dt>
        <dd>结构表示网页的结构,结构用来规定网页中哪里是标题,哪里是段落</dd>
        <dd>结构表示网页的结构,结构用来规定网页中哪里是标题,哪里是段落</dd>
        <dd>结构表示网页的结构,结构用来规定网页中哪里是标题,哪里是段落</dd>
    </dl>

    <ul>
        <li>
            aa
            <ul>
                <li>aa-1</li>
                <li>aa-2
                    <ul>
                        <li>aa-1</li>
                        <li>aa-2</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>

效果图:
在这里插入图片描述


音视频标签

     audio 标签用来向页面中引入一个外部的音频文件的
     音视频文件引入时,默认情况下不允许用户自己控制播放停止

    属性:
        controls 是否允许用户控制播放
        autoplay 音频文件是否自动播放
            - 如果设置了autoplay 则音乐在打开页面时会自动播放
                但是目前来讲大部分浏览器都不会自动对音乐进行播放 
        loop 音乐是否循环播放  

	 使用video标签来向网页中引入一个视频
      - 使用方式和audio基本上是一样的

例:

<!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>音视频</title>
</head>
<body>
    <!-- 
    	<audio src="./source/audio.mp3" controls autoplay loop></audio> 
    -->
    <!-- 
   		<audio src="./source/audio.mp3" controls></audio> 
    -->

    <!-- 除了通过src来指定外部文件的路径以外,还可以通过source来指定文件的路径 -->
    <audio controls>
        <!-- 对不起,您的浏览器不支持播放音频!请升级浏览器! -->
        <source src="./source/audio.mp3">
        <source src="./source/audio.ogg">
        <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
    </audio>

    <!-- 
        使用video标签来向网页中引入一个视频
          - 使用方式和audio基本上是一样的
     -->
    <video controls>
        <source src="./source/flower.webm">
        <source src="./source/flower.mp4">
        <embed src="./source/flower.mp4" type="video/mp4">
    </video>

    <iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=b00318l66nt" allowFullScreen="true" width="500" height="300"></iframe>

</body>
</html>

实体(转义字符)

实体:

• 在HTML中预留了一些字符。
• 这些预留字符是不能在网页中直接使用的。
• 比如<和>,我们不能直接在页面中使用<和>号,因为浏览器会将它解析为html标签。
• 为了可以使用这些预留字符,我们必须在html中使用字符实体。
• 语法: &实体名;
在这里插入图片描述
例:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>实体</title>
</head>
<body>
	<!-- 
        在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格

        在HTML中有些时候,我们不能直接书写一些特殊符号
        比如:多个连续的空格,比如字母两侧的大于和小于号

        如果我们需要在网页中书写这些特殊的符号,则需要使用html中的实体(转义字符)
     -->
	<p>今天&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;天气真不错!</p>
	<p>a&lt;b&gt;c</p>
</body>
</html>

运行过现在所有的代码后,就可以发现,现在只能显示想显示的事物,还没有办法给这些事物调节位置,所以CSS的存在就十分有必要。

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页