html 知识总结（一）基本标签，列表，表格，超链接

最新推荐文章于 2023-03-11 21:54:31 发布

shawn697

最新推荐文章于 2023-03-11 21:54:31 发布

阅读量272

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_41459262/article/details/113183625

版权

html知识总结（一）

一、什么是HTML

HTML的全称为Hyper Text Markup Language(超文本标记语言)

所谓超文本就是超出文本范围的意思，也就是HTML不光可以处理文本，还可以处理包括图像，视频，音频等

最新的版本为html5版本
主流浏览器均支持html
遵循W3C标准（World Wide Web Consortium 万维网联盟）

下面是一个最基本的html网页的例子

<!--DOCTYPE:告诉浏览器我们要是用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
    <!--meta 描述性标签，用来描述网站的一些信息-->
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<!--body代表网页主体-->
<body>
hello,world！
</body>
</html>

二、网页的基本标签

1.标题标签

<!--标题标签-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

2.段落标签

<!--段落标签-->
<p>这是一个段落</p>

3. 换行标签

这是一个自闭合标签

<!--换行标签-->
<br/>
<br>

4.水平线标签

该标签直接在网页上输出一个水平线

<!--水平线便签-->
<hr/>
<hr>

5.字体样式标签

<!--粗体，斜体-->
<strong>粗体</strong>
<em>斜体</em>

6.注释和特殊符号

特殊符号，用时百度即可

<!--特殊符号-->
空格 &nbsp;
大于号 &gt;
小于号 &lt;

三、图像，超链接，网页布局

1.图像

<!--图像标签-->
<img src="图片地址",alt="图片不显示时显示的内容",title="图片悬停显示文字",width="宽度",height="高度">

2.超链接

一般超链接

<!--
a标签超链接:
href为超链接的地址
target为超链接打开的地方（当前页面，新页面等）
-->
<a href="https://www.baidu.com" target="_blank">百度一下，你就知道</a>
<a src="https://www.baidu.com"><img src="图片地址"></a>

锚链接

锚链接实现不同位置的跳转，包括同页面和不同页面

<!--
锚链接:
1.设置锚点
2.执行跳转
-->
<!--锚点-->
<a name="anchor1">锚点一</a>
<!--同文件-->
<a href="#anchor1">跳转到锚点一</a>
<!--跨文件-->
<a href="路径/文件#anchor1"></a>

功能性链接

<!--
邮件链接
-->
<a href="mailto:1111@163.com">点击联系我们</a>

四、列表，表格，媒体元素

1.列表

列表可以将信息结构化和条理化，并以列表的样式显示出来

有序列表

<!--有序列表 ordered list-->
<ol>
    <li>迪迦奥特曼</li>
    <li>泰罗奥特曼</li>
    <li>雷欧奥特曼</li>
    <li>捷德奥特曼</li>
    <li>欧布奥特曼</li>
</ol>

无序列表

<!--无序列表 unordered list-->
<ul>
    <li>迪迦奥特曼</li>
    <li>泰罗奥特曼</li>
    <li>雷欧奥特曼</li>
    <li>捷德奥特曼</li>
    <li>欧布奥特曼</li>
</ul>

自定义列表

<!--
自定义列表 DIY list
dt:列表名字
dd:列表内容
-->
<dl>
    <dt>奥特曼</dt>
    <dd>迪迦奥特曼</dd>
    <dd>泰罗奥特曼</dd>
    <dd>雷欧奥特曼</dd>
    <dd>捷德奥特曼</dd>
    <dd>欧布奥特曼</dd>
</dl>

2.表格

colspan:跨列

rowspan:跨行

<!--表格 table
行 tr
列 td
-->

<table border="1px">
    <tr>
        <td colspan="4">   </td>
    </tr>
    <tr>
        <td rowspan="2">   </td>
        <td>   </td>
        <td>   </td>
        <td>   </td>
    </tr>
    <tr>
        <td>   </td>
        <td>   </td>
        <td>   </td>
    </tr>
</table>

3.媒体元素

<!--视频元素
controls:控制控件
autoplay:自动播放
-->
<video src="视频地址" controls autoplay></video>

<!--音频元素-->
<audio src="音频地址" controls autoplay></audio>

文章内容根据遇见狂神说html部分自学整理，在此感谢该博主，b站链接点这。

shawn697

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html 知识总结（一）基本标签，列表，表格，超链接

html知识总结一、什么是HTMLHTML的全称为Hyper Text Markup Language(超文本标记语言)所谓超文本就是超出文本范围的意思，也就是HTML不光可以处理文本，还可以处理包括图像，视频，音频等最新的版本为html5版本主流浏览器均支持html 遵循W3C标准（World Wide Web Consortium 万维网联盟）下面是一个最基本的html网页的例子<!DOCTY.
复制链接

扫一扫