中航建设集团网站,wordpress实现分页,南宁本地网站有哪些?,如何为网站做推广前言#xff1a;在学习前端基础时#xff0c;必不可少的就是三大件#xff08;html、css、javascript #xff09;#xff0c;而HTML#xff08;超文本标记语言——HyperText Markup Language#xff09;是构成 Web 世界的一砖一瓦#xff0c;它定义了网页内容的含义和… 前言在学习前端基础时必不可少的就是三大件html、css、javascript 而HTML超文本标记语言——HyperText Markup Language是构成 Web 世界的一砖一瓦它定义了网页内容的含义和结构那么html有哪些基础知识呢 ✨✨✨这里是秋刀鱼不做梦的BLOG ✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客 那么我们废话不多说直接看一下html中的基础知识有哪些 所以我们的讲解路线为初步了解什么是html -- 了解标签 -- html中的各种标签学习现在开始我们的讲解。 目录
1.html基础认知
2.标签的认知 1标签的组成 2标签的作用 3标签的分类
3.html中标签的学习 1html基本结构标签 2注释标签 3标题标签 段落标签
【1】标题标签
【2】段落标签 4换行标签 水平线标签 5格式化标签文本标签 6三种常见格式标签
【1】图片标签
【2】音频标签
【3】视频标签 1.html基础认知 在学习html知识之前我们要了解一下什么是html HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言: HyperText Markup LanguageHTML 不是一种编程语言而是一种标记语言标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页HTML 文档包含了HTML 标签及文本内容HTML文档也叫做 web 页面 总结用一句话来说HTML就是一种用来告知浏览器如何组织页面的标记语言。 2.标签的认知 从上面对html的基础介绍中我们知道了html一种用来告知浏览器如何组织页面的标记语言那么在html中标签又是什么呢 1标签的组成 HTML 标签是由尖括号包围的关键词比如 htmlHTML 标签通常是成对出现的比如 b 和 /b当然也有由一个组成的单标签如input标签对中的第一个标签是开始标签第二个标签是结束标签开始和结束标签也被称为开放标签和闭合标签在每一个标签的后边可以跟上需要的属性 看了上面的话你可能还是对标签有些模糊那么我们直接使用一个例子来进行讲解 解释 1. 开始标签Opening tag包含元素的名称本例为 p被左、右角括号所包围。开头标签标志着元素开始或开始生效的地方。在这个示例中它在段落文本的开始之前。 2. 内容Content元素的内容本例中就是段落的文本。 3. 结束标签Closing tag与开始标签相似只是其在元素名之前包含了一个斜杠。这标志着该元素的结束。没有包含关闭标签是一个常见的初学者错误它可能会产生奇特的结果。 2标签的作用 标签的作用描绘各种语义也可以将标签进行嵌套来表达复杂的语义。 注在后续的讲解中我们会知道每一个标签都有其独特的默认特点比如放大加粗等等但是对于一个标签我们要知道其语义才是我们了解标签的重点即标签所代表的含义才是标签的重点而其默认特点并不是我们所要学习的重点因为之后我们可以使用css将其特点进行各种改变 3标签的分类 根据标签的表现形式我们将标签分为了两种块及标签和行内标签。 我们直接使用例子来看一下两种标签 !-- 块级标签 --h1这是块即标签/h1!-- 行内标签 --input typetext input typepassword 第一行是h1标签所生成的结果我们可以开到即使其后面有许多空格但是也不会存放其他的内容这就是块级标签。
第二行是input typetext input typepassword两个标签生成的结果我们会发现它们两个在一行上堆放这就是行内标签。
总结块级标签都是独占一行行内标签都是在一行中依次堆放。 块及标签和行内标签的特性 1.块级标签在块级标签中我们可以嵌套块级标签和行内标签 2.行内标签行内标签中我们只能嵌套行内标签 现在我们已经知道了html一种用来告知浏览器如何组织页面的标记语言并且也已经了解了标签的基本内容那么现在就让我们开始学习html中的各种标签。 3.html中标签的学习 那么接下来我们开始讲解html中的各种标签
本片文章先讲解以下标签 1html基本结构标签
先让我们看一下html的基本结构标签有哪些 html /htmlhtml标签页面中最大的标签用来标记html文档的开始和结束其中包含其他标签称为根标签 head /head用来标记html文档头部的开始和结束 title t/itle网页标题用于给网页命名使用 body /body用来标记html文档主体的开始和结束页面内容基本都存放在body之中 我们直接在代码中看一下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body/body
/html
注我们在使用visual studio code编写上面代码的时候我们只需要输入一个 然后回车就会自动生成上面的代码如下图其他多余的部分不用管在之后学习了更多的知识之后就会认识。 以上就是html基本结构标签的基本认识了。 2注释标签
在学习编程语言的时候我们都会学习如何去进行注释其作用是为了让人们更好的理解代码对必要的代码进行注释解释在html中注释的写法为
!-- --
注注释标签的快捷键为ctrl /
这样我们就掌握了如何使用注释标签。 3标题标签 段落标签
对于文章根据其所在位置可以分为标题和段落那么我们如何在给我们想要写在网站上的文字进行标题化和段落化呢这里就需要使用标题标签和段落标签。
【1】标题标签 标题是通过 h1 - h6 标签进行定义的。其中h1 定义最大的标题。 h6 定义最小的标题。
直接使用代码来看一下效果 h1这是h1/h1h2这是h2/h2h3这是h3/h3h4这是h4/h4h5这是h5/h5h6这是h6/h6 从上面的效果我们就可以看出标题标签对文字进行了加粗和不同程度的放大并且每一个标题标签都会使文字独自占有一行所以其为块级标签。
注虽然h1 - h6为块级标签但是其比较特殊h1~h6 不能互相嵌套。 【2】段落标签 段落是通过 p 标签定义的我们只需要将想要成为一段段落的文件使用p和/p包裹起来就可以。
直接使用代码来看一下效果
pHTML的全称为超文本标记语言是一种标记语言。它包括一系列标签通过这些标签可以将网络上的文档格式统一使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本HTML命令可以说明文字图形、动画、声音、表格、链接等。/ppHTML的英文全称是 Hyper Text Markup Language即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言它是标准通用化标记语言SGML的应用。/p 从上面的结果我们可以看出使用p和/p包裹的文字会在段落的结尾自成一行不会和另一个段落粘结在一起所以p标签是块级标签。
注意虽然p标签是块级标签但是p标签不能嵌套块级元素。
以上就是标题标签和段落标签的基本使用方法。 4换行标签 水平线标签
【1】换行标签 html br 元素在文本中生成一个换行回车符号。
例子
这是一段话
这还是一段话 如果我们想强制将两条语句在中间换行就可以使用br 标签
这是一段话
br
这还是一段话 【2】水平线标签 html中hr 元素可以生成一条水平线。
例子
这是一段话
这还是一段话 如果我们想添加一条水平线就可以使用hr标签
这是一段话
hr
这还是一段话 以上就是换行标签和水平线标签。 5格式化标签文本标签
常用的文本标签有三个
标签名标签语义单 / 双 标签em要着重阅读的内容双strong十分重要的内容语气比em要强双 span 没有语义用于包裹短语的通用容器双
我们分别来看一下上边的三个标签的效果 从上图我们可以看出em的默认效果为使文字倾斜strong的默认效果为加粗span没有任何的效果并且我们可以看出三个标签都是行内标签。
注还有一个没有语义但是也常用于包裹短语的标签div。
div和span的区别 divdiv 标签在语义上不表示任何特定类型的内容但是其可以将内容分组常用于分大组。 span可以使用它来编组元素以达到某种样式意图常用于分小组。 6三种常见格式标签
【1】图片标签img img标签的作用为将一张图像嵌入文档。
其常见属性有 src 该属性为你想嵌入的图片的路径alt 该属性包含一条对图像的文本描述并且该文本描述只会在图片生成失败的时候显示title 该属性为将鼠标放在图片上时会显示相应的文本描述width 该属性为设置图片宽度height 该属性为设置图片高度 我们使用代码来更直观的看一下各个属性的效果
img src./fish.jpg alt这是一条鱼 titlethis is a fish width300 height300 现让图片显示失败 补充 当我们同时设置图片宽高时可能会使图片发生形变但是如果我们只设置图片的宽或高图片则会等比缩放。 只有src属性是必须包含的其他属性可以不包含。
这样我们就了解完了img标签的使用。 【2】音频标签video
audio标签用于在文档中嵌入音频内容。
其常见属性有 src 该属性为你想嵌入的图片的路径controls 该属性为添加播放器autoplay 该属性为自动部分loop 该属性为自动播放 我们使用代码来更直观的看一下各个属性的效果
audio src./music.mp3 controls loop autoplay/audio 注一般的浏览器是禁止自动播放的所以写了autoplay也不会自动播放。 【3】视频标签video
video标签用于在 HTML 或者 XHTML 文档中嵌入媒体播放器用于支持文档内的视频播放。
其常见属性有 src 该属性为你想嵌入的图片的路径controls 该属性为添加播放器autoplay 该属性为自动部分loop 该属性为自动播放 我们使用代码来更直观的看一下各个属性的效果
video src./11.25最终.mp4 controls loop autoplay/video 补充相对路径和绝对路径 相对路径以当前位置作为参考点去建立路径。./ 表示文件的同级/ 表示文件的下一级../ 表示文件的上一级。 绝对路径以根位置作为参考点去建立路径。例如D:\前端学习code\2024.4.4 以上就是三种常见格式标签全部内容了。 以上就是HTML基础知识详解上的全部内容了~~~
