当前位置:首页 > 前端技术 > 【HTML】<HyperText Markup Language>HTML基础标签

【HTML】<HyperText Markup Language>HTML基础标签

2022年08月05日 23:07:14前端技术10

【HTML】<HyperText Markup Language>HTML基础标签 _ JavaClub全栈架构师技术笔记

 目录

一、符号实体:

HTML符号实体参考手册:

二、HTML头部:

1.HEAD 标签:

2.META标签:

三、语义化标签元素:

1.语义标签:

 2.块和行内元素:

3.布局标签:

4.列表标签:

5.超链接标签:

a标签属性:

6.相对路径&绝对路径:

7.图片标签:

img标签属性: 

图片格式:

8.内联框架:

iframe属性: 

 9.音频标签:

audio标签属性:

source标签:

10.视频标签:

video标签属性: 


一、符号实体:

        在网页中编写多个空格默认情况会自动被浏览器解析为一个空格,在HTML中有些时候,我们需要写一些特殊符号。

        比如我们需要:多个连续的空格,比如字母符号的大于和小于号。如果我们需要在网页中写这些特殊符号则需要使用HTML中的实体(转义字符)

        实体语法:是以&开头;(分号)结尾:

  空格

> 大于号

< 小于号

© 版权符号

【HTML】<HyperText Markup Language>HTML基础标签 _ JavaClub全栈架构师技术笔记

HTML符号实体参考手册:

HTML ISO-8859-1 参考手册 | 菜鸟教程HTML ISO-8859-1 参考手册 现代的浏览器支持的字符集: ASCII 字符集 标准 ISO 字符集 数学符号、希腊字母、其他符号 ISO-8859-1 ISO-8859-1 是大多数浏览器默认的字符集。 ISO-8859-1 的较低部分(从 1 到 127 之间的代码)是最初的 ASCII 字符集(0-9 的数字,大写和小写英文字母表,以及一些特殊字符)。 ISO-8859-1 的较高部分(从 160 到 ..https://www.runoob.com/tags/ref-entities.html


二、HTML头部:

1.HEAD 标签:

        <head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。

        可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

2.META标签:

        <meta>元素描述了一些基本的元数据。<meta> 标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。

        META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。

        <meta> 一般放置于 <head> 区域

HTML 头部 | 菜鸟教程HTML <head> 查看在线实例 <title> - 定义了HTML文档的标题 使用 <title> 标签定义HTML文档的标题 <base> - 定义了所有链接的URL 使用 <base> 定义页面中所有链接默认的链接目标地址。 <meta> - 提供了HT..https://www.runoob.com/html/html-head.html        META中声明的元素对于浏览器客户端是不可见的,也就是用户访问页面时无法直观看到META标签中的设置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 
        <meta http-equiv="refresh" content="3;url=https"//www.baidu.com">
        将页面重定向到另一个网站
     -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <meta name="keywords" content="HTML5学习记录">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="这是一个学习HTML记录的HTML页面!">
    <!-- 
        meta 主要用于设置网页中的一些元数据,元数据不是给用户看的
            charset 指定网页的字符集
            name 指定数据的名称
                keywords关键字
                description网站描述
            content 指定数据的内容

        title 内容会作为搜索结果的链接上的文字显示
     -->
    <title>HTML学习页面</title>
</head>
<body>
    <!-- 
        在网页中编写多个空格默认情况会自动被浏览器解析为一个空格

        在HTML中有些时候,我们需要写一些特殊符号:
            比如我们需要:多个连续的空格,比如字母符号的大于和小于号
        如果我们需要在网页中写这些特殊符号则需要使用HTML中的实体(转义字符)

        实体语法:
            是以&开头;(分号)结尾:
            &nbsp; 空格
            &gt; 大于号
            &lt; 小于号
            &copy; 版权符号
     -->
</body>
</html>

三、语义化标签元素:

  • 在页面中独占一行的元素称为块元素(block element)。
  • 在页面中不会独占一行的元素称为行内元素,内联元素(inline element)。

HTML 标签列表(字母排序) | 菜鸟教程 (runoob.com)【HTML】<HyperText Markup Language>HTML基础标签 _ JavaClub全栈架构师技术笔记https://www.runoob.com/tags/html-reference.html

1.语义标签:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML学习页面</title>
</head>
<body>
    <!-- 
        hgroup标签用来为标题分组,可以将一组相关的标题同时放到hgroup
     -->
    <hgroup>
        <h1>一级标题</h1>
        <h2>二级标题</h2>
    </hgroup>
    <!-- 
        p标签表示页面中的一个段落

        p标签定义的是一个块元素!
     -->
    <p>
        这是定义在段落标签中的一个段落
    </p>

    <!-- 
        em标签:用于表示语音语调的加重
        strong标签:表示强调重要内容,粗体表示
        blockquote标签:表示一个长引用。(块元素)
        q标签:表示一个短引用。(行内元素)
     -->
</body>
</html>

 2.块和行内元素:

        通过使用块元素(block element)对页面进行布局,行内元素(inline element)一般进行修饰。一般情况下会在块元素中放行内元素,而不会在行内元素中放块元素。

        p元素中不能放任何元素!

3.布局标签:

结构化语义标签

HTML5 语义元素 | 菜鸟教程 (runoob.com)【HTML】<HyperText Markup Language>HTML基础标签 _ JavaClub全栈架构师技术笔记https://www.runoob.com/html/html5-semantic-elements.html

  • header:表示网页头部
  • main:表示网页主体部分,一个页面只有一个main
  • footer:表示网页底部

【HTML】<HyperText Markup Language>HTML基础标签 _ JavaClub全栈架构师技术笔记

4.列表标签:

HTML 支持有序、无序和定义列表:HTML 列表 | 菜鸟教程 (runoob.com)【HTML】<HyperText Markup Language>HTML基础标签 _ JavaClub全栈架构师技术笔记https://www.runoob.com/html/html-lists.html

  • 无序列表
  • 有序列表
  • 自定义列表:自定义列表不仅仅是一列项目,而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

【HTML】<HyperText Markup Language>HTML基础标签 _ JavaClub全栈架构师技术笔记

5.超链接标签:

        HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

        使用href属性,指定跳转路径或者内部页面。

        使用 target 属性,你可以定义被链接的文档在何处显示。

HTML 链接 | 菜鸟教程 (runoob.com)【HTML】<HyperText Markup Language>HTML基础标签 _ JavaClub全栈架构师技术笔记https://www.runoob.com/html/html-links.html      锚点链接:使用 target 属性和id属性,你可以定义被链接的文档在何处显示。超链接中可以使用#进行占位,默认跳转到当前页面顶部;也可以使用javascript:;进行占位,点击超链接不会发生任何操作!

a标签属性:

HTML 【HTML】<HyperText Markup Language>HTML基础标签 _ JavaClub全栈架构师技术笔记https://www.runoob.com/tags/tag-a.html部分H5属性:

【HTML】<HyperText Markup Language>HTML基础标签 _ JavaClub全栈架构师技术笔记

6.相对路径&绝对路径:

        相对路径是指目标相对于当前文件的路径,网页结构设计中多采用这种方法来表示目标的路径。相对路径有多种表示方法,其表示的意义不尽相同。表示方法如下:

  • ./ :代表文件所在的目录(可以省略不写)
  • ../ :代表文件所在的父级目录(上一级目录)
  • ../../ :代表文件所在的父级目录的父级目录(上上一级目录)
  • / :代表文件所在的根目录

        绝对路径是指完整的网址,假设图一中项目的网站域名为www.test.com,那么000.css的绝对路径应该是:https://www.test.com/HelloHBuilder/html/css/css1/000.css。

7.图片标签:

        <img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。要在页面上显示图像,你需要使用源属性(src)。

        src 指 "source"。源属性的值是图像的 URL 地址。

        alt属性:用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。当页面中的图片无法正常加载时,alt属性中定义的文本会替换图片进行展示;浏览器会根据alt属性中的文本对图片进行定义。

        height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度,页面加载时就会保留指定的尺寸(保证图片等比例缩放)。如果没有指定图片的大小,加载页面时有可能会破坏HTML页面的整体布局。

HTML 图像 | 菜鸟教程 (runoob.com)【HTML】<HyperText Markup Language>HTML基础标签 _ JavaClub全栈架构师技术笔记https://www.runoob.com/html/html-images.html

img标签属性: 

HTML 标签 | 菜鸟教程 (runoob.com)【HTML】<HyperText Markup Language>HTML基础标签 _ JavaClub全栈架构师技术笔记https://www.runoob.com/tags/tag-img.html

【HTML】<HyperText Markup Language>HTML基础标签 _ JavaClub全栈架构师技术笔记

图片格式:

  • jpeg(jpg):支持的颜色比较丰富,不支持透明效果,不支持动图。
  • gif:支持颜色少,支持简单透明度,支持动图。
  • png:支持颜色丰富,支持复杂透明度,不支持动图。
  • webp:这是谷歌退出的专门为网页图片而生的格式,拥有以上格式所有优点,文件小。缺点在于目前适配少!
  • base64:将图片进行base64编码,这样可以将图片转换为字符,通过引入字符的方式引入图片。一般适用于需要图片和页面一起加载的情况!

8.内联框架:

通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。

HTML 框架 | 菜鸟教程 (runoob.com)【HTML】<HyperText Markup Language>HTML基础标签 _ JavaClub全栈架构师技术笔记https://www.runoob.com/html/html-iframes.html内联框架语法:

<iframe src="URL"></iframe>

  • height 和 width 属性用来定义iframe标签的高度与宽度。属性默认以像素为单位。
  • frameborder 属性用于定义iframe表示是否显示边框。设置属性值为 "0" 移除iframe的边框。

iframe属性: 

HTML <iframe> 标签 | 菜鸟教程 (runoob.com)

【HTML】<HyperText Markup Language>HTML基础标签 _ JavaClub全栈架构师技术笔记

 9.音频标签:

HTML5 提供了播放音频文件的标准:

HTML5 Audio(音频) | 菜鸟教程 (runoob.com)【HTML】<HyperText Markup Language>HTML基础标签 _ JavaClub全栈架构师技术笔记https://www.runoob.com/html/html5-audio.html

【HTML】<HyperText Markup Language>HTML基础标签 _ JavaClub全栈架构师技术笔记

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML学习页面</title>
</head>
<body>
    <!-- 
        audio标签:
            用来向页面中引入一个外部的音频文件,音频文件引入时,默认情况是不允许用户进行控制
        
        属性:
            controls 是否允许用户控制播放
            autoplay 音频文件在打开页面时,是否自定播放(由于适配问题部分浏览器不会自动播放)
    -->
    <audio src="./media/就算你活在二次元.mp3" controls></audio>
</body>
</html>

audio标签属性:

HTML 标签 | 菜鸟教程 (runoob.com)【HTML】<HyperText Markup Language>HTML基础标签 _ JavaClub全栈架构师技术笔记https://www.runoob.com/tags/tag-audio.htmlH5提供的标签:

【HTML】<HyperText Markup Language>HTML基础标签 _ JavaClub全栈架构师技术笔记

source标签:

HTML <source> 标签 | 菜鸟教程 (runoob.com)

带有两个源文件的音频播放器。浏览器需要选择它所支持的源文件(如果都支持则任选一个)

<audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
</audio>

HTML 全局属性 | 菜鸟教程 (runoob.com)【HTML】<HyperText Markup Language>HTML基础标签 _ JavaClub全栈架构师技术笔记https://www.runoob.com/tags/ref-standardattributes.html

10.视频标签:

 HTML5 提供了展示视频的标准。

HTML5 Video(视频) | 菜鸟教程 (runoob.com)【HTML】<HyperText Markup Language>HTML基础标签 _ JavaClub全栈架构师技术笔记https://www.runoob.com/html/html5-video.html

【HTML】<HyperText Markup Language>HTML基础标签 _ JavaClub全栈架构师技术笔记

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML学习页面</title>
</head>
<body>
    <!-- 
        使用video标签引入视频文件到页面中
     -->
    <video src="./media/demo.mp4" width="1000px" controls></video>
</body>
</html>

video标签属性: 

HTML <video> 标签 | 菜鸟教程 (runoob.com)

【HTML】<HyperText Markup Language>HTML基础标签 _ JavaClub全栈架构师技术笔记

作者:爱吃糖的范同学
来源链接:https://blog.csdn.net/weixin_52058417/article/details/122085509

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/17683.html

标签: HTML
分享给朋友:

“【HTML】<HyperText Markup Language>HTML基础标签” 的相关文章

HTML5 速查列表

HTML 速查列表 HTML 速查列表. 你可以打印它,以备日常使用。 HTML 基本文档 <!DOCTYPE html> <html> <head> <title>文档标题<...

HTML框架结构标签(frameset)

HTML框架结构标签(frameset)

第一次了解到竟然还有HTML框架结构标签()。为此小编在实例中应用了一下,但是在搭建框架之初就遇到 了问题。为此总结本博客,以便大家能及时解决问题。 什么是HTML框架结构标签(<frameset>)...

超链接a标签的属性target的可选值有哪些以及区别

超链接a标签的属性target的可选值有哪些以及区别 1、<a target="_blank"></a> 2、<a target="_parent"></a> 3、<a targ...

HTML-列表标签list与表格标签table

HTML-列表标签list与表格标签table

目录   列表标签 表格标签 列表标签      <ul>无序列表             ...

html的class怎么使用方法,HTML的class属性怎么用?使用方法详细总结!

html的class怎么使用方法,HTML的class属性怎么用?使用方法详细总结!

我们在开发网页时有一个属性经常被用到,那就是 class。这篇文章 w3cschool 小编来为大家介绍下 HTML 的 class 属性怎么用。学习 class 看这篇文章就够了。 class 属性怎么用? class 属性用来规定元素的类名,最常用在...

有关在html中修改select标签的option selected默认选中属性实现

有关在html中修改select标签的option selected默认选中属性实现

着急想要解决办法的朋友可以直接看最后的内容:} 一般我们使用select标签时大概都会使用到option标签来填充下拉框中的内容 只有几个固定的内容写死在页面还好,可能是这样的: <select name="type"type="text...

HTML5 video 视频标签使用介绍

HTML <video> 适用于HTML 5+,用于定义在线观看的视频流媒体。 <video width="320" height="240" src="movie.ogg" controls="controls"> 这里是注释文字,如果无法...

HTML - 标签自定义属性

HTML - 标签自定义属性

html标签中,除了标准的属性名外,还可以自定义属性名(属性值为String类型),下面看下两种自定义属性的使用 1.自定义属性名 <body> <button desc="this is a button">Click me!</b...

HTML的一些常用的标签和部分css知识

HTML的一些常用的标签和部分css知识

一.form标签的注意事项 form为表单标签,属性有action和method。 action为表单提交的路径,method为表单 的提交方式。表单有九种提交请求,常用 的有两种,今天就介绍常用的两种请求get和 post。 1.get请求...

HTML标签大全(常用)

转自:https://www.cnblogs.com/moije/p/6751624.html 文本标记语言,即HTML(Hypertext Markup Language),是用于描述网页文档的一种标记语言。 HTM...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。