HTML——初识HTML（HTML基础知识）

原创已于 2022-09-20 08:53:47 修改 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #css3 #css

于 2022-07-11 18:45:16 首次发布

css/css3 同时被 2 个专栏收录

32 篇文章

订阅专栏

HTML

12 篇文章

订阅专栏

本文详细介绍了HTML的基本概念，包括常用的HTML标签、块元素与行内元素的区别、超链接的使用方法以及图片和音频标签的运用。通过实例展示了如何创建网页结构，强调了标题、元数据、注释和实体的重要性，并探讨了网页的历史和发展。此外，还提及了结构化标签如<header>、<main>等在网页布局中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

前言
一、HTML常用标签
二、块元素于行内元素的区别
三、超链接的用法
四、图片与音频标签

软件=客户端（用户）+服务器（开发人员）分为 C/S B(browser)/S

服务器开发语言：Java Node.JS(对前端较为重要)

客户端：网页（B/S结构）

网页使用的语言：HTML、CSS、JavaScript

网页简史

万维网发明人：蒂姆·伯纳斯李0

1991.8.6 世界上第一个服务器和第一个网站在欧洲核子研究中心上线

1994 蒂姆·伯纳斯李建立万维网联名W3C

网页的结构 :

结构：HTML描述页面的结构

表现：CSS 用于控制页面中元素的样式

行为：JavaScript响应用户操作

一、HTML常用标签

HTML 超文本（超链接）标记语言使用标签（元素）的形式标识网页中的不同组成部分。

标签：（有开始，有结束）

标签一般成对出现，但也会有一些自结束标签<img> 或<img/> <input >或<input/> 后者会生成类似文本框的东西基本结构如下：

<!doctype html> ——以防止网页进入怪异模式



<html>



    <head>

    

    <meta charset="UTF-8">



<meta name="keywords" content="HTML5,前端，CSS3">

<meta name="description" content="这是一个不错的网站！">

<！--keywords表示网站的关键字，例如搜索引擎中的关键字，content中的内容为关键字的内容，用逗号隔开，description用于网站的描述，会显示在搜索引擎的搜索的结果中 -->

  

<meta http-equiv="refresh" content="3,url=“https://www.baidu.com”>



            <title>网页的标题</title>——帮助浏览器快速定位

    </head>

    

    <body>

        

       <h1>一级标题</h1>

    <h2>二级标题</h2>

    <h3>三级标题</h3>

    <h4>四级标题</h4>

    <h5>五级标题</h5>

    <h6>六级标题</h6>



<p>今天天气<em>真</em>不错</p>



鲁迅说:

<blockquote>

    这句话我从来没有说过！

</blockquote>



子曰

<q>学而时习之 </q> ——会加上双引号，

双引号的实现方法： q::before{ content: open-quote;}

q::after{ content: close-quote;}

<!---换行标签->

<br>*2 会出现两个换行标签为: <br><br>

今天天气真不错！

<del>中划线</del> 或者用 <s></s> 文字会有删除线，实现方式：text-derotation: line-through;

<center></center>

<!---标签的分组，可以将一组相关的标题放在hgroup中->

    <hgroup>

        <h1>回乡偶书</h1>

        <h2>其一</h2>

    </hgroup>

    </body>

</html>

注释： 注释要求简单明了注释嵌套不能嵌套

实体：在html中表示特殊字符

实体的语法 &实体名;

  空格 > 大于号 <小于号 © 版权符号

meta标签：属于自结束标签

标题标签一共有六级标签，从H1~H6重要性递减一般情况下一个页面中只会有一个H1—— 标题标签的作用仅次于title

在运行页面中独占一行的元素称为块元素，（bloce element）例如标题标签和段落标签

不会独占一行的元素为行内元素(inline element)（独占一行说的是在网页中的位置）

行内元素用来包裹文字，不可以放块标签，块元素基本什么都可以放

但是p元素不可以放任何的块元素，例如h1，就不可以

浏览器在解析网页时，会自动修正不符合规范的内容

例如将标签写在htlml外部，比如p元素中嵌套了块元素，例如根元素中出现了除html以外的子元素

结构化标签 （重点掌握每个标签的含义）

<header></header> 为整个网页或者某个部分的头部

<main></main> 网页的主体部分，一个页面中只有一个main

<footer></footer>为网页的底部或者某个部分的底部

<nav></nav>为网页的导航

<aside></aside>和主体相关的内容（侧边栏）

<article></article>表示一个独立的文章

<section></section>表示一个独立的区块，上边的标签都不能表示时用article

<div></div>用来表示一个区块，可以用来代替以上的标签，是目前常用的，多用于块元素

列表（list）在html中三种列表，列表之间可以相互嵌套，而且项目符号的图像会发生改变

无序列表ul （创建类似项目列表）li（item）标签表示列表项使用type属性可以改变项目符号的形式，disc 默认值，实心圆心 square 是新的方块 circle 空心的圆
有序列表ol （创建编号列表）li li有项目符号，有上下外边距，大概是16px
定义列表dl （创建定义列表）使用dt表示定义的内容使用dd来对内容进行解释说明

二、块元素与行内元素的区别

块元素：

1.独占一行，自上而下一行一行的排列

2.块元素的宽度默认是父元素宽度的100%

3.块元素的高度默认是被内容撑开的

常用块元素标签： div p h1-h6 ul li ol header footer main nav

<span></span> 行内元素，没有任何的语义，一般用于在网页中 选中文字，用于行内元素

行内元素：

1、不会独占一行，自左向右排列，一行满了，就挪到下一行，再自左向右

2、行内元素的宽高都是被内容撑开的，不可以自定高度

常用行内元素： span a i em strong del s

行内块元素：

兼具行内元素、块元素特点不会独占一行，又可以设置宽高，

常用行内块标签: img

三、超链接的用法

超链接使用 a 标签定义超链接，为行内元素，可以嵌套除它自身外的任何元素 ，超链接的属性（href）指定跳转的目标路径例,值为其他网页的地址，也可以访问自己的内部网站 紫色为访问过的，蓝色是没有访问过的 如

外部：

<a href=" https://www.baidu.com" >超链接</a> 跳转为百度的网址

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

./可以省略不写，如果不写./也不写../则相当于写了./

.表示当前页面

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

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

每个文件阶层用/表示，类似地址在同一大目录下，其他子目录属于同级关系

target 属性，用来指定超链接打开的位置，属于可选值

-self 默认值，在当前页面中打开超链接

blank 在一个新的页面中打开超链接

将超链接href的属性设置为 # 这样点击链接以后页面不会跳转，而会转到当前页面的顶部的位置

<a href="#bottom">去底部</a> 给要去的位置打一个标记，在href时，使用类似id标签的功能

<a id="bottom" href="#">去底部</a>

页面底部：最后页面中最后一个标签的位置

id 属性，是元素的唯一标识，同一个网页中不能出现重复的id 属性，想要跳转到页面的指定位置，只需将href属性设置 # 设置它的目标属性值

在开发中，#可以作为超链接路径的占位符使用例如

<a href="#">这是一个新的位置</a>

或者

<a href=javascript:;>新的超链接</a>

四、图片与音频标签

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

src 指定的图片引用的位置， alt是对图片的描述（例如名字） width 图片的宽度 height图片的高度，高度会随着宽度而改变，在PC端不建议宽、高全都修改默认情况不会显示，有些浏览器在图片中出不来，会显示，索引擎会根据alt中的内容识别图片，搜索引擎将会收录这个图片，搜索时可以出现

图片格式：

jpeg(jpg) 支持颜色丰富，不支持透明效果，不支持动图,一般用来显示照片

gif 支持颜色较少，支持简单透明，支持动图，颜色单一的图片

png 支持的颜色丰富，支持负责透明，不支持动图，专为网页而生

webp 是谷歌专门用来表示网页中的图片的一种格式，集合其他几种格式的优点，缺点是兼容性不好，比如老的浏览器不太可以用

base64 将图片使用base64编码，可以将图片转换为字符，通过字符形式引入图片，用在和网页一起加载

效果一样，用小的，效果不一样，用效果好的

内联框架：iframe 在当前网页以窗口似的引入其他的网页，搜索引擎不会检索到被

frameborder可设置边框，0代表没有，，1代表有

er="0"></iframe>

不会对本地服务器造成压力

音视频标签