HTML介绍

最新推荐文章于 2024-08-18 23:01:41 发布
最新推荐文章于 2024-08-18 23:01:41 发布
阅读量924 收藏 4
点赞数 1
文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41912427/article/details/105896690
版权

HTML的格式：

  • html是根标签（元素），一个页面只有一个跟标签，网页中的所有内容都应该写在html跟标签中；
  • head标签，该标签中的内容不会在网页中直接显示，它用来帮助浏览器解析页面
  • title网页的标题标签，默认会显示在浏览器的标题栏中；搜素引擎在检索页面时，会首先检索title标题中的内容；它是网页中对于搜索引擎来说最重要的内容，会影响到网页在搜索引擎中的排名
  • body标签用来设置网页的主体内容，网页中所有可见的内容，都应该在body中编写
  • 文档声明（doctype）:文档声明用来告诉浏览器 当前网页的版本；html5的文档声明<!doctype html>或<!Doctype HTML>
  • 通过meta标签来设置网页的元数据，元数据不是给用户看
    charset指定网页的字符集（常见的字符集 ：ASCII,ISO88591,GB2312,GBK,UTF-8），避免乱码问题
    name 指定的数据的名称
    content 指定的数据的内容
    keywords 表示网站的关键字，可以同时指定多个关键字，关键字之间用,隔开
<!Doctype HTML>
<html>
	<head>
		<meta charset="uft-8">
		<meta name="keywords" content="HTML,前端,CSS3">
		<title>网页的标题</title>
	</head>
	<body>
	</body>
</html>

HTML的注释

：注释中的内容不会在页面中显示，但是可以在源码中查看 （注释不能嵌套）

<!--   -->

HTML的自结束标签

  • <img>
  • <input>

标签的属性：属性在标签中还可以设置属性；属性是一个名值对（x=y）；属性是用来设置标签中的内容如何显示，属性和标签名或其他属性应该使用空格隔开；属性不能乱写，应该根据文档的规定来填写；有些属性有属性值，有些没有，如果有属性值，属性值应该用引号引起来

<font colour="">  </font>

字符实体：

  • &nbsp ; 空格
  • &gt ; 小于号
  • &lt ; 大于号
  • &copy ; 版权符号
  • &#039 ; 单引号
  • &amp ; 和

语义化标签

在网页中HTML专门用来负责网页的结构，所以在使用HTML标签时，应该关注的是标签的语义，而不是它的样式

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

  • hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup

<hgroup>
	<h1>回乡偶书二首</h1>
	<h2>其一<h2>
</hgroup>

  • p标签表示页面中的一个段落
    p也是一个块元素

  • em 标签用于表示语音语调 的一个加重

  • strong 表示强调，重要内容

  • blockquote 表示一个长引用（块元素）

  • q表示一个短引用（行内元素）

  • br 标签表示换行

  • 布局标签：
    1.header表示网页的头部
    2.main表示网页的主部分（一个网页只会有一个main）
    3.footer表示网页的底部
    4.nav表示网页的导航
    5.aside和主体相关的其他内容（侧边栏）
    6.article表示一个独立的文章
    7.section表示一个独立的区块，上边的标签都不能表示时使用section
    8.div没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素
    9.span行内元素，没有任何语义，一般用于在网页中选中文字

块元素和行内元素

  • 块元素
    在网页中一般通过块元素来对页面进行布局
  • 行内元素
    行内元素主要用来包裹文字

-注：1. 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
2.快元素中基本什么都能放
3.p元素中不能放任何元素

列表

在html中也可以创建列表，html列表一共有三种：1.有序列表；2.无序列表；3.定义列表

  • 有序列表，使用oil标签来创建有序列表，使用li表示列表项
<oil>
	<li>结构</li>
	<li>表现</li>
	<li>行为</li>
</oil>
  • 无序列表，使用ul标签来创建无序列表，使用li表示列表项
<ul>
	<li>结构</li>
	<li>表现</li>
	<li>行为</li>
</ul>
  • 定义列表，使用 dl 标签来创建一个定义列表，使用 dt 来表示定义的内容 ， 使用dd来对内容进行解释说明
<dl>
	<dt>结构</dt>
	<dd>结构表示网页的结构，结构用来规定网页中哪里时标题，哪里是段落</dd>
</dl>
  • 列表之间可以互相嵌套

超链接

  • 使用a 标签定义超链接

    href 属性：

1.href 指定跳转的目标路径
2.值可以是一个外部网站的地址
3.也可以是一个内部页面的地址
4.可以直接将href属性设置为#，这样点击超链接以后页面不会发生跳转，而是转到当前页面的顶部的位置
5.可以跳转到页面的指定位置，只需将href 属性设置#目标元素的id 属性值

<a href="https://www.baidu.com">超链接</a>
<a href="07.liebiao.html">超链接</a>

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

5.<a href="#p3">第三个自然段</a>
  <p id="#p3">

target属性：用来指定超链接打开的位置

可选值：
_self默认值，在当前页面中打开超链接
_blank在一个新的网页中打开超链接

<a href="07.列表.html"  target="_blank">超链接</a>

id属性（唯一不重复）

每一个标签都可以添加一个id属性
id属性就是元素的唯一标识，同一个页面中不能出现重复id属性

  • 相对路径，当我们需要跳转到一个服务器内部的页面时，一般我们都会使用相对路径，相对路径都会使用 . 或 . . 开头(. / 或者. ./)

    • ./可以省略不写，如果./不写 也不写. ./则就相当于写了./
    • ./表示当前文件所在的目录
    • . ./表示当前文件所在目录的上一级目录

  • 超链接是一个行内元素，在 a 标签中可以嵌套除它自身外的任何元素

  • 占位符
    1.在开发中可以将#作为超链接的路径的占位符使用（有功能：会跳转到页面的顶部）

<a href="#">占位符</a>

2.可以使用javascript:; 来作为href的属性，此时点击这个超链接什么也不会发生（没有任何功能）

<a href="javascript:;">占位符</a>

图片标签

图片标签用于向当前页面中引入一个外部图片
使用 img 标签来引入外部图片，img标签是一个自结束标签
img这种元素属于替换元素（块和内元素之间，具有两种元素的特点）

属性：

src 属性：指定的是外部图片的路径（路径规则和超链接是一样的）

alt 属性：
1.图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示图片
2.搜索引擎会根据alt中的内容来识别

<img src="./img/1.gif" alt="松鼠">

width属性：图片的宽度（单位时像素）
height属性：图片的高度
宽度和高度如果只修改了一个，则另一个也会等比例缩放
注意：一般情况下PC端，不建议修改图片的大小，需要多大的图片就裁多大；但在移动端，经常需要对图片进行缩放（大图缩小）

图片的格式：

  • jpeg(jpg)：
    支持颜色比较丰富，不支持透明效果，不支持动图
    一般用来显示照片
  • gif：
    支持颜色比较少，支持简单透明，支持动图
    颜色单一的图片，动图
  • png：
    支持颜色丰富，支持复杂透明，不支持动图
    颜色丰富，复杂透明图片（专为网页而生）
  • webp：
    这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
    它具备其他图片格式的所有优点，而且文件还特别的小
    缺点：兼容性不好
  • base64:
    将图片使用base64
    一般都是一些需要和网页一起加载的图片才会使用base64
  • 注：效果一样，用小的
    效果不一样，用效果好的

内联框架

用于向当前页面中引入一个其他页面
src指定要引入的网页的路径
frameborder指定内敛框架的边框

<iframe src="https://www.qq.com" width="800" height="600"></iframe>

音频

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

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

<audio src="./source/audio.mp3" controls autoplay loop></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"><!--兼容ie8 -->
</audio>

视频

使用video标签来向网页中引入一个视频，使用方式和video基本一样

<video controls>
	<source src="./source/flower.webm">
	<source src="./source/flower.mp4">
	<embed src="./source/flower.mp4" type="video/mp4">
</video>
qq_41912427
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用html简单自我介绍案例
honeygirl_的博客
10-27 3万+
案例实战： 在网页标题栏中显示“自我介绍”文本信息 以一级标题的形式显示“自我介绍”文本信息 以定义列表下面以图像的形式插入个人的头像 以段落文本形式显示个人简历 <html> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html...
20.1 HTML 介绍1
08-08
【HTML 介绍1】 HTML（HyperText Markup Language）是网页制作的基础，它是互联网上应用最广泛的语言，用于创建和设计网页。HTML 不仅仅是一种编程语言，而是一种标记语言，它通过一系列特定的标签来描述文档内容和...
Html介绍
程序员养成日记
11-20 379
目录   Html和CSS的关系 认识HTML标签 标签的语法 认识html文件基本结构 认识head标签 了解HTML的代码注释 Html和CSS的关系 1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变...
a标签的href属性
qq_29022637的博客
11-13 4140
a标签的href属性1）href属性的定义href属性链接目标地址，如果未使用href属性，则< a >标签不是超链接，而是占位符。2）href=”url” 作用 绝对url - 指向另一个站点（href=”http://www.baidu.com”） 相对url - 指向站点内的某个文件（href=”index.html”） 锚url - 指向页面中的锚（href=”#top”） 3)href常见
Web前端_html_超链接的用法
weixin_44481113的博客
06-06 1080
Web前端_html
【HTML】超链接（a标签）
yy_bazinga的博客
03-06 1032
超链接超链接href属性跳转绝对路径跳转相对路径./（当前目录）../（上级目录）跳转当前页面target属性id属性（唯一不重复的）点击无响应的超链接 超链接 超链接可以让我们从一个页面跳转到其他页面，也可以跳转到当前页面的其他位置。 使用a标签来定义超链接。 超链接是一个行内元素，在a标签中可以嵌套除它自身外的任何元素。 href属性 href属性指定跳转的目标路径，值可以是一个外部网站的地址，也可以写一个内部页面的地址。 当跳转当前页面的其他位置时，herf的值也可以是#或#目标元素的id属性值。 跳
超链接的其他用法
qq_51088023的博客
09-06 403
1.返回顶部（空链接） 可以直接将超链接的href属性设置为“#”，这样点击超链接以后页面不会发生跳转，而是转到当前页面的顶部位置。在开发中如果没有确定具体的跳转地址时，可以将“#”作为超链接的路径的占位符使用。 <a href="#">回到顶部</a> 2.直达底部（锚点链接） id属性（唯一不重复）： 每个标签都可以添加一个id属性 id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性 id属性区分大小写，且一般为字母 通过使用id属性跳转到目标位
一款好看的HTML介绍页、引导页源码
END
05-11 6686
一款好看的个人极简介绍页、引导页源码，图标引用的是阿里巴巴矢量图标库，可引入自己的图标项目更换。 图标项目更换在index.html第9行里面 logo图片在index.html第29行里面 名字在index.html第32行里面 介绍在index.html第65行里面 地图引入了高德的map lab 数据可视化，可用来做足迹，记录去过的地方。 下载地址：好看的扁平化风格的HTML单页面、引导页、介绍页源码-Webpack文档类资源-CSDN下载 ...
如何用html做自我介绍,1.1、HTML-编写简单的自我介绍网站
weixin_36285931的博客
07-09 5590
div{width:100px;height:100px;background:red;position:relative;animation:myfirst 5s infinite;animation-direction:alternate;/* Safari and Chrome */-webkit-animation:myfirst 5s infinite;-webkit-animation...
HTML+CSS实现一个简单的作品介绍网页
weixin_52357829的博客
04-18 3292
昨天帮同学做了一个简单的作品介绍网页，用来应付期中作业，在这里把源码分享给大家。 适合刚接触HTML和CSS的同学练练手。这个网页是一个校园奶爸主题的静态网站，包括两个页面：scene.html和people.html。其中，scene.html主要介绍了校园奶爸的简介，people.html则是人物简介，两个页面共用同一个导航条和底部。在布局上，两个页面都有相似的结构，有导航栏、banner和底部区域，其中people.html还新增了两行横向排列的图片及文字介绍。两个页面的样式都定义在对应的.css文件
html.dotx html介绍
09-14
html网页制作
Html介绍文档
11-23
Html介绍，web开发入门必备资料，赶紧下载吧
html 介绍(网页制作)
06-21
HTML，全称HyperText Markup Language，即超文本标记语言，是网页制作的基础。它是一种用于创建和展示网页的标准标记语言，让信息以结构化的方式呈现，并可以与样式表（CSS）和脚本语言（如JavaScript）结合使用，...
ZhuoZhuoCrayon#my-Nodes#1-HTML介绍1
07-25
HTML介绍css的代码可以插入html,插入语法为<style type="text/css">css-code</style>HTML标签段落标签 <p>
加速网页加载，提升用户体验：HTML、JS 和 Vue 项目优化全攻略
服务员的博客
08-16 801
除了以上列出的方法，还有很多其他的优化技巧，例如使用 CDN 加速、HTTP/2 协议、Service Worker 缓存等等。在信息爆炸的时代，网页加载速度成为了用户体验的重中之重。为了留住用户，提升转化率，网页优化势在必行！网页优化是一个持续的过程，需要不断学习和实践。通过以上方法，你可以有效提升网页加载速度，为用户提供更流畅的体验，最终实现更高的转化率和用户满意度。本文将从 HTML、JavaScript 和 Vue 项目三个方面，为你提供一份全面的网页优化指南，助你打造闪电般的加载速度！
“从零开始的HTML 表格”——WEB开发系列09
一条晒干的咸鱼的博客
08-14 1039
HTML 表格是一种用于在网页上组织和显示信息的结构性元素，它能够将数据以行和列的形式呈现，帮助用户更清晰地理解数据关系。表格在展示统计数据、产品列表、日程安排等方面非常实用。
后端学习笔记（八）--HTML
最新发布
qwsadsdga的博客
08-18 522
​ *编写网页的一门语言​ *超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容​ *标记语言：由标签构成的语言​ *W3C（万维网联盟）标准：网页主要有三部分组成​ *结构：HTML​ *表现：CSS​ *行为：JavaScript。
响应式Web设计：纯HTML和CSS的实现技巧
vvvae1234的博客
08-18 452
互联网已经成为人们日常生活中不可或缺的一部分，随着移动设备的普及，用户访问网站的方式也发生了巨大变化。因此，响应式Web设计（Responsive Web Design, RWD）应运而生。它的目标是使Web页面能够根据不同设备屏幕的大小和分辨率自动调整布局，以提供最佳的用户体验。本文将深入探讨响应式Web设计的基本概念、实现技巧，并通过实际操作案例来展示如何使用纯HTML和CSS构建一个响应式网页。
HTML补充——表格&表单
Fan_web的博客
08-14 1490
本文补充了HTML中的一些表格和表单的标签，下文继续分享CSS中的动画知识内容。
Dreamweaver开发HTML介绍
03-29
Dreamweaver是一种流行的网页开发工具，它可以帮助开发人员创建和编辑HTML文件。Dreamweaver具有可视化设计界面和代码编辑器，可以轻松地创建和编辑HTML文件，同时还提供了丰富的模板和样式库，使开发人员可以快速地...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值