对HTML的一些总结

文章目录

前言
一、HTML是什么？
二、 HTML的标签
1. 块级标签： div hn（h1,h2,h3,h4.......） p hr
2.表单标签
3. a标签
4. 多媒体标签
5. 列表标签
三、常见的属性
四、表格布局
总结

前言

我是一个刚接触HTML的小白，对于这方面的知识还不够深入，但经过一段时间的学习，我希望通过总结来巩固知识。如果你也是这方面的newbie,如果有什么困难或者困惑，我们可以一起讨论。或许屏幕前的你是这方面的hotshot,希望你能“高抬贵手”多多传授经验！本文章如有不足之处，还请各位斧正。

一、HTML是什么？

HTML 全称为 HyperText Mark-up Language，翻译为超文本标签语言，标签也称作标记或者元素。HTML 是目前网络上应用最为广泛的技术之一，也是构成网页文档的主要基石之一。

二、 HTML的标签

在html中有许多的标签，这对初学者来说无疑是个很大的烦恼。这里我只写部分标签的细节。想了解更多可以去https://www.w3school.com.cn/哦。

1. 块级标签： div hn（h1,h2,h3,h4…） p hr

它们都是自动换行，独占一行。
div是网页布局的重要标签，适用于盒子布局，类似于这种
在这里插入图片描述
hn----标题标签
他有自动加粗的效果，并且会随着h1,h2,h3…数字的变大，字体会变得越来越小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>你好</h1>
    <h2>你好</h2>
    <h3>你好</h3>
    <h4>你好</h4>
    <h5>你好</h5>
    <h6>你好</h6>
</body>
</html>

在这里插入图片描述
p标签用来表示一个段落，在这要区分它和pre标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <p>
你是否想过雪花可以飘进被褥的

你是否想过榨菜可以放进微波炉热

你是否见过男人因为一部电影哭了

当一切一个人在承受他还怎么输呢？
   </p>
   <pre>
你是否想过雪花可以飘进被褥的

你是否想过榨菜可以放进微波炉热

你是否见过男人因为一部电影哭了

当一切一个人在承受他还怎么输呢？
   </pre>
</body>
</html>

在这里插入图片描述
可以看出，pre标签是原样输出的，而p标签显然不会。
hr标签是水平分割线，你可以设置width，color，粗细。

2.表单标签

主要是form标签和input标签。它们连用来制成一个我们常见的一些登录框，选填框等
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <form action="">
    <input type="text">
   </form>
   <form action="">
    <input type="text">
   </form>
</body>
</html>

代码中的action属性 ------ 跳转的路径，可以跳转到其他网页
type 的取值：text ----- 文本框
password ---- 密码框
submit ----- 提交按钮
radio ------ 单选按钮
checkbox ----- 多选按钮
reset ----- 重置按钮
button ----- 普通按钮
image ----- 图像按钮
file ------ 文件
hidden ---- 隐藏域
email ---- 邮箱域
color ----- 颜色域
date ----- 日期
time ----- 时间
datetime-local ----- 日期+时间
range ------ 进度条
input标签的常见属性：readonly ------ 只读字段只可以读不能修改
checked ---- 默认选择
disabled ----- 表示禁用不可以点击
autofocus ----- 默认光标的位置
required ----- 不能空白提交

3. a标签

a标签表示的超文本链接标签 ------ 用来进行页面的跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <a href="">点我跳转</a>
</body>
</html>

href 属性放的是要跳转的路径，路径很重要。这里介绍一下有关路径的知识
绝对路径：从盘符开始到文件为止的一个路径
相对路径：源文件相对于目标文件的相对路径
一旦路径错误，网站就无法跳转
我们也可以通过加id属性，跳到我们想去的本网页的其他地方。就像小说章节栏。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id="top">小说</h1>
    <a href="#1"><h3>第一章</h3></a>
    <a href="#2"><h3>第二章</h3></a>
    <a href="#3"><h3>第三章</h3></a>
    <a href="#4"><h3>第四章</h3></a>
    <a href="#5"><h3>第五章</h3></a>
    <a href="#6"><h3>第六章</h3></a>
    <p>
        <a href="" id="1"></a>
        你好
    </p>
    <p style="color: #FB9661;">
        <a href="" id="2"></a>
        你好
    </p>
    <p>
        <a href="" id="3"></a>
        你好
    </p>
    <p>
        <a href="" id="4"></a>
        你好
    </p>
    <p>
        <a href="" id="5"></a>
        你好
    </p>
    <p>
        <a href="" id="6"></a>
        你好
    </p>
    <a href="" id="#top">回去</a>
</body>
</html>

在这里插入图片描述

当然你的内容得足够多

4. 多媒体标签

audio ------ 音频
video ---- – 视频
controls属性 ----- 表示的是播放器的组件
autoplay属性 ---- 表示的自动播放
loop属性 ------ 表示的是循环播放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <audio src="" controls></audio>
    <video src="" controls autoplay loops width="500px" height="500px"></video>
</body>
</html>

5. 列表标签

主要有三种——有序、无序、数据列表
有序列表----ol；它有3种属性：type（表示设置序号的种类，默认值是数值1）
start属性（序号开始的位置）
reversed属性（反序/降序）
无序列表----ul它的type属性 ----- 无序列表的样式 disc（默认值实心圆）circle(空心圆) square(实心方块)
数据列表–-dl，dt为标题，dd为内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 有序列表 -->
    <ol type="A">
        <li>前端</li>
        <li>前端</li>
        <li>前端</li>
        <li>前端</li>
        <li>前端</li>
        <li>前端</li>
    </ol>
    <ol type="1" start="2" reversed>
        <li>前端</li>
        <li>前端</li>
        <li>前端</li>
        <li>前端</li>
        <li>前端</li>
        <li>前端</li>
    </ol>
    <!-- 无序列表 -->
    <ul type="disc">
        <li>前端</li>
        <li>前端</li>
        <li>前端</li>
        <li>前端</li>
        <li>前端</li>
        <li>前端</li>
    </ul>
    <!-- 数据列表 -->
    <dl>
        <dt>这是标题1</dt>
        <dd>这是内容</dd>
        <dt>这是标题2</dt>
        <dd>这是内容</dd>
    </dl>
    <!-- 多窗口框架<frameset></frameset> -->
</body>
</html>

在这里插入图片描述

三、常见的属性

src ----- 图片的路径（绝对路径和相对路径）
alt ----- 代替图片文本的内容（图片的路径错误或者因为浏览器的原因打不开这个图，用一个词或者
一段话代替描述这个图片）
width ----- 宽度
height ---- 高度单位都是px %
border ------ 边框默认值是0
align ---- 位置（图片和文字的位置）
取值：top ----- 上对齐 middle ----- 居中对齐 bottom ------ 下对齐（默认对齐） right ----- 右对齐
left ------ 左对齐

四、表格布局

表格布局是一个又有趣又对新手不友好的东东，它涉及了表格的边框、高度宽度、背景位置、表格的间距和边距、表格的嵌套、表格的合并。假如让你仿写这个图
在这里插入图片描述
如果你是新手会不会有点蒙呢？当然马赛克是我后面打上去的。
table标签
包含了thead tbody tfoot tr td标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <thead>表头</thead>
        <tbody> ----- 表格的主干
        <tr> ---- 行
        <td>第一行第一列</td> ----列
        <td>第一行第二列</td>
        </tr>
        <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
        </tr>
        </tbody>
        <tfoot>表尾</tfoot>
        </table>
        
</body>
</html>

table里面有很多属性
border ----- 设置表格边框
width ----- 宽度
height ---- 高度
bgcolor ---- 背景颜色
background ---- 背景图片
align ---- 表示表格的位置 left center right
cellpadding ---- 表示的是表格边距（表示单元格内元素距离单元格边框的距离）
cellspacing------ 表示的是表格的间距（表示的是单元格和单元格之间的距离）
rowspan=“n” ------ n是一个整数，表示在单元格垂直方向去跨行（合并行）
colspan = “n” ------- n是一个整数，表示在单元格水平方向去跨列（合并列）

总结

本文中只提到了HTML中的九牛一毛，大家有什么想法可以跟我反馈，谢谢你的浏览！