HTML介绍

最新推荐文章于 2025-05-27 21:54:09 发布

Oʀɪɢɪɴᴀʟ .822

最新推荐文章于 2025-05-27 21:54:09 发布

阅读量81

点赞数

文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/weixin_70374250/article/details/133688485

版权

本文介绍了HTML相关知识，包括其全称是超文本标记语言，用于创建网页。说明了创建HTML文件的方法，详细讲解了各类HTML标签，如格式标签、文本标签、超链接标签、图片标签等，还提及字符实体、URL地址及表格标签的使用和缺点等信息技术内容。

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

1.什么是HTML

全称是 HyperText Markup Language 即超⽂本标记语⾔，⼀种⽤于创建⽹⻚的标准标记语⾔。

2. 如何创建⼀个HTML文件

想要使⽤HTML需要创建HTML文件，每个网页都是⼀个HTML文件，html文件就是以 .html 结尾的⽂件。在文件夹中右键新建文本文档，将文本文档修改后缀为 .html 即可。

<!DOCTYPE HTML>
<html>
</html>

3. HTML标签

标签语法

html是由标记（标签）组成的，标签由标签名和属性组成

3.1 标签写法

标签的写法<标签名></标签名> 或者<标签名/>

<!-- 标题 -->
<h1></h1>
<!-- 图片 -->
<img />

3.2 标签属性

在每个HTML标签上都由属性 <标签名属性名="属性值" 属性名="属性值"></标签名>

<h1 class="title"></h1>
<a href="https://www.baidu.com">百度</a>

3.3 标签分类

双标签和单标签
- 双标签：如： <h2></h2> 、<p></p>
- 单标签：如：<img/>、<input />
块级元素、⾏内元素和⾏内块级元素
- 块级元素：单独占⼀⾏，允许设置宽⾼值
- ⾏内元素：不会单独占⼀⾏，从左往右排列，设置宽⾼值不起效
- ⾏内块级元素：不会单独占⼀⾏，从左往右排列，能设置宽⾼值

4. 格式标签

4.1 标题标签

< h1~6 align= "left|right|center"> </h1~6>

4.2 段落标签 p 给⽂本添加⼀个段落的语义，告诉浏览器，哪些⽂字是⼀个段落

< p align="left|right|center" >< /p >

4.3 换行标签 (用来输入空行，而不是分割段落)

< br />

4.4 水平线标签

< hr width="" size="" align="" color="" noshade / >

4.5 无意义标签

< span>< /span > < div></ div >

用来组合文档中的行内元素，没有固定的格式表现，使用样式时，才有样式上的变化

5.文本标签

字体标签  <font color=""    face=""   size="1~7" ></ font>
粗体标签	<b></ b>< strong></ strong>
斜体标签	<i></ i>< em></ em>
下划线标签 <u></ u><ins></ins>
删除线标签 <del></ del>
上标标签	<sup></ sup>
下标标签	<sub></ sub>

6. 字符实体

在 HTML 中，某些字符是预留的，比如HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体，比如<用 < 或< 表示
字符实体由三部分组成：
- 以&开始
- 中间为实体名或实体编号
- 以 ; 结束
实体名称便于记忆而实体编号的浏览器兼容性更好
实体名称区分大小写

7. 超链接标签

普通链接

基础语法：<a href="链接地址" target="blank | self" title="描述">文本或图片</ a>* *href：连接路径 target：标的意思，跳转后的网站是否在新标签页打开； blank新窗口跳转， self当前窗口跳转 title：鼠标悬浮显示文字

空链接 <a href="##"></a >

返回页面顶部 <a href="#"></a>

保持原位置 <a href=“javascript:; ></a >

脚本链接 <a href="javscript:alert('hello world')"></a>

电子邮件链接 <a href="mailto:邮箱地址"></a>

拨打电话 <a href="tel:电话号码"></a>

注意： a标签不仅可以给⽂字添加超链接，也可以给图⽚，视频，⾳频，表格等添加超链接。如果通过a标签的href属性指定⼀个URL，那么必须在地址前加上http://或者https://。

7.1 URL相对地址与绝对地址

协议://主机:端口号/文件/附加资源
http://www.yunhedata.com.cn/info.html?uname=tina&age=20&sex=female
相对URL: Images/logo.gif ../css/demo.css ../../js/demo.js ./admin/index.php
绝对URL: C:/appserv/www/image/logo.gif /usr/local/apache/htdocs/www/index.php http://www.yunhedata.com.cn/

7.2 锚点链接

使用 name 属性创建 HTML 页面中的锚点
当使用锚时，我们可以创建直接跳至该命名锚的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了
步骤
1. 创建锚点 < a name="锚点名称"></ a>
2. 链接到锚点同一页面 : < a href="#锚点名称"></ a> 不同页面 : < a href="目标文档URL# 锚点名称">< /a>

8. 图片标签

基础语法： src source的缩写，来源，表示图⽚的来源、路径。必须的属性

alt 图像无法显示时的替代文本，搜索引擎可以通过它指定的文字搜索该图片

width 图片宽度

height 图片高度

border 图片边框

设计网页时经常使用的图片有三种格式：

GIF -- 最多支持256色,支持透明,支持多帧动画显示效果.
JPEG | JPG-- 支持多种颜色,可以有很高的压缩比,使用了有损压缩,不支持透明,不支持动画效果.256_256_256
PNG -- 是一种新的图片技术,可以表现品质比较高的图片,使用了无损压缩,支持透明,不支持动画

8.1 热点地图

```html
<img  src="" alt="" usemap="#test">
<map name="test"  id="test">
    <area shape="rect" coords="x1,y1,x2,y2" alt="" href=""/>
    <area shape="circle" coords="x,y,r" alt="" href=""/>
    <area shape="poly" coords="x1,y1,x2,y2,……,xn,yn" alt="" href=""/>
</map>
```

area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域中的 usemap 属性可引用中的 id 或 name 属性（取决于浏览器），所以我们应同时向添加 id 和 name 属性

9. 视频标签【html5新增的标签】

```html
<!-- 音频或者视频 -->
<object data="../video/Tomorrow.mp4" height="200" width="200"></object>
<!-- 音频或者视频 -->
<embed src="../video/Tomorrow.mp4" height="200" width="200">
<!-- 音频 -->
<audio src="../那一年.mp3"></audio>
    audio 音频元素；用于嵌入一个 音频文件
    src 音频文件的URL
    controls 显示播放控件
    autopaly 表示立刻播放
    preload 预先载入音频文件数据
<!-- 视频 -->
<video src="movie.mp4" controls="" width="400" muted="" poster="cover.jpg" loop="">
    video 视频播放元素
    src 视频资源的URL
    controls 表示显示播放控件
    autoplay 自动播放,目前不能使用
    muted 表示静音
    poster 指定视频载入时显示的图片封面
    loop 反复播放
    preload 预先加载
```

注意：如果你无法看到该视频,那么可能你的电脑不支持该文件格式标签用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。标签是html5中新标签，几乎所有浏览器都支持。拥有width、height、src、type(src引用文件的MIME 类型)四个属性

embed是针对非IE的浏览器（如火狐、chrome）的媒体播放器;

object是针对IE浏览器标签

10. 列表标签

分类：有序列表，无序列表，自定义列表如果想要在页面上显示新闻业的内容，或者显示一列文字，可以使用列表

<ul type="disc|square|circle">
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>6</li>
</ul>
<ol type="a|A|i|I" start="num">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>6</li>
</ol>
<!-- 
ul 元素表示这是一个无序列表 
li 元素表示表内部的列表项，每一条
-->
disc默认值实心圆，square正方形，circle空心圆

ul：unordered list 无序列表

ol：ordered list 有序列表

10.1图文并茂

<figure>
    <figcaption>这是一张图</figcaption>
    <img src="1.png" width="200">
</figure>
<!-- 
figure 插图元素
figcaption 表示插图的标题内容 说明
-->

11. 表格标签

11.1 表格基础标签

在过去表格标签⽤的⾮常多，很多⽹站都是⽤表格标签进⾏布局，展示数据的。

table：表格
tr：table rows ⾏
td：table dock 单元格

表格标签之间是相互嵌套的。table>tr>td 如果我们需要添加表头的语义，可以使⽤⼀个新的标签，th标签，th：table head 表示表头单元格，替换的是td的位置，table>tr>th

<table>
    <tr>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

表格宽高

表格的宽和⾼默认是按照内容的尺⼨⾃适应调整的。我们可以通过给table标签和td标签设置width/heigh属性的⽅式来指定表格/单元格的宽/⾼。

11.2 属性

border：表格边框

cellpadding：单元格内的空间

cellspacing：单元格之间的空间

align：内容⽔平对⻬⽅式

valign：内容垂直对⻬⽅式

<table border="1" width="600px" height="200px" cellpadding="0" cellspacing="0" align="center">
    <tr align="center" valign="middle">

11.3 合并单元格

rowspan：合并列方向单元格 colspan：合并行方向单元格属性值是⼀些数字，表示合并单元格的数量上边线在同⼀⾏的，就算在同⼀⾏


    <table width="800px" height="270px" border="1" cellspacing="0">
        <caption><h1>工商银行电子汇款表</h1></caption>
        <tr height="30px">
            <td colspan="2"><b>回单类型</b></td>
            <td>网上转账汇款</td>
            <td colspan="2"><b>指令序号</b></td>
            <td>HQH0000000000000013878172</td>
        </tr>
        <tr>
            <td rowspan="4"><b>收款人</b></td>
            <td>户名</td>
            <td>老孟</td>
            <td rowspan="4">付款人</td>
            <td>户名</td>
            <td>老刘</td>
        </tr>
        <tr>
            <td><b>卡号</b></td>
            <td>0000000000001</td>
            <td>卡号</td>
            <td>0000000000002</td>
        </tr>
        <tr>
            <td>地区</td>
            <td>南京</td>
            <td>地区</td>
            <td>杭州</td>
        </tr>
        <tr><td>网点</td>
            <td>工商江苏南京业务处理中心</td>
            <td>网点</td>
            <td>江苏徐州业务中心</td>
        </tr>
        <tr>
            <td colspan="2"><b>币种</b></td>
            <td>人民币</td>
            <td colspan="2"><b>汇款标志</b></td>
            <td>钞票</td>
        </tr>
        <tr>
            <td colspan="2"><b>金额</b></td>
            <td>1.00元</td>
            <td colspan="2"><b>手续费</b></td>
            <td>0.57元</td>
        </tr>
        <tr>
            <td colspan="2"><b>合计</b></td>
            <td colspan="4">人民币(大写):壹元整</td>
        </tr>
        <tr>
            <td colspan="2"><b>交易时间</b></td>
            <td>2017年6月1日</td>
            <td colspan="2"><b>时间戳</b></td>
            <td>2017-06-01-13.00.0.  00000</td>
        </tr>
    </table>

11.4 表格分区

标题：caption

表头：thead

页脚：tfoot

主体：tbody

语义化标签。

tfoot的位置在thead与tbody之间这四个表格分区标签本身没有任何样式，仅仅是⼀个区块划分标记罢了

<table width="600" border="1" align="center" cellpadding="0" cellspacing="0">
  <caption>学生信息表</caption>
  <thead>
  <tr align="" valign="" bgcolor="">
    <th>姓名</th>
    <th>性别</th>
    <th>年龄</th>
    <th>班级</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
    <td>章三</td>
    <td rowspan="2">男</td>
    <td>19</td>
    <td>java</td>
  </tr>
  <tr>
    <td>大张伟</td>
    <td>18</td>
    <td rowspan="2">python</td>
  </tr>
  <tr>
    <td>章子怡</td>
    <td>女</td>
    <td>19</td>
  </tr>
  </tfoot>
</table>

table 元素表示一个表格的声明

tr 元素表示表格的一行

td 元素表示一个单元格

默认的 table 表格是没有边框的 border属性表示增加一个边框

th 为表格添加标题单元格实际作用就是内部文字居中加

td th均属于单元格，包含2个属性 colspan rowspan

colspan 表示合并一行所在列合并

rolspan 表示合并一列所在行合并

table的缺点

a. 太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量。

b. 灵活性差，比如要将tr设置border等属性，是不行的，得通过td

c. 代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱

d. 混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱。

e. 不够语义

12.详情标签

detail 字面意思是 "详情"，在markdown里也经常用，用该标签包裹了的内容默认会被隐藏，只留下一个简述的文字，我们点击以后才会展示详细的内容

<details>
  <summary>点击查看更多</summary>
  <p>我是一段被隐藏的内容</p>
</details>