HTML总结

最新推荐文章于 2024-04-16 19:19:57 发布

tik_tr

最新推荐文章于 2024-04-16 19:19:57 发布

阅读量188

点赞数

文章标签： html 前端 vscode

本文链接：https://blog.csdn.net/tik_tr/article/details/129864891

版权

本文介绍了HTML的基本框架，包括文档声明、元信息、标题设置。接着详细讲解了文本效果标签如strong、em、del、u等，以及文本格式设置标签如br、hr、p、font等的用法。此外，还讨论了form表单的创建，包括input的各种类型，如text、password、radio、checkbox等。最后，文章阐述了table表格的结构和属性，如th、td、colspan和rowspan等。

摘要由CSDN通过智能技术生成

HTML基本框架：

<!DOCTYPE html>

<head>

meta用于提供关于网页的内容

<title>Document</title>

标题

</head>

头部

<body>

具体内容

</body>

</html>

一、HTML标签介绍

1、文本效果设置标签：

strong、b都是用于文本加粗。两个标签的效果相同，主要区别于使用场景，strong主要是用于强调文本，而b是专门用于文本加粗的标签。
em、i标签都是加斜文本的标签，em主要用于文本的强调。

del标签删除线，u标签用于给对应文本加下划线。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>常见标签</title>
</head>
<body>
    <p><strong>嗨咯！</strong></p>
    <p><b>嗨咯！</b></p>
    <p><em>嗨咯！</em></p>
    <p><i>嗨咯！</i></p>
    <p><del>嗨咯！</del></p>
    <p><u>嗨咯！</u></p>
</body>
</html>

2、文本格式设置标签：

br标签用于换行(遇到br时换行)，格式：文本 <br>
hr标签用来产生水平的分割线。可在hr标签中加入size=""设置分割线的宽度，添加width=""设置分割线的长度，长度缺省参数时默认为100%(即占满屏幕的长度).
p标签表示一个段落，每p标签后会空一行(相当于p标签有自动换行的功能)，格式：文本 <p>文本内容</p> 。
p标签的属性：

align是段落的对齐属性，它有三个值，分别为："left"(左对齐),"center"(居中对齐),"right"(右对齐)。

font标签用于设置文本字体 ,格式：font=""，其中""用于输入自己需要的字体类型。

color 属性用于设置字体的颜色，eg:color="#73FBFD",其中"#73FBFD"是颜色值(用于设置字体的颜色，可在调色板里调色后将参数复制后赋值给color，颜色参数格式为：#+十六进制数(6位))。

文本标签：sub是下标标签，sup是上标标签。
pre用来原样输出内容(即将用户输入的内容按用户输入的格式输出)。
span标签是行内标签，格式：< span style="属性1: 属性值;属性2: 属性值;……">文本内容</span>按照设置的文本格式输出文本内容(不换行)
hn标签，其中n是数字，1是第一标题，2是第二标题，以此类推，数字越大等级越低(即字体越小)
div标签，属于块标签，内容不足一行时，也会占满一行(p、hr、hn同)。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>常见标签</title>
</head>
<body>
    <br>嗨咯！</br>
    <hr width="100%" size="1"> 
    <p align="left" font="黑体" color="#73FBFD">嗨咯！</p>
    <p>嗨咯！<sub>9</sub></p>
    <p>嗨咯！<sup>10</sup></p>
    <pre>
        水调歌头·明月几时有
            苏轼〔宋代〕
   丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。
   明月几时有？把酒问青天。不知天上宫阙，今夕是何年。
   我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。
   转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？
   人有悲欢离合，月有阴晴圆缺，此事古难全。
   但愿人长久，千里共婵娟。
    </pre>
    <span style="color:aqua;font-size: 20px">嗨咯！</span>
    <h1>111</h1>
    <h2>222</h2>
    <h3>333</h3>
    <div>标签1</div>
    <div>标签2</div>
</body>
</html>

二、form表单

格式:<form>表单内容</form>

form表单主要使用input来书写表单主体内容。

input的主要属性：

name(属性值为文件路径)。
method(属性值为请求方式，用于明确表单的提交方式)。
action(属性值为字符串，用于指定表单的名称)。
type

type的属性值：

type="text" ，为单行文本框类型的input ；
type="password" ，为密码框类型的input ；
type="radio" ，为单选按钮类型的input；
type="checkbox"，为多选按钮类型的input ；
type="submit" ，为提交按钮类型的input ；
type="reset"，为复位按钮类型的input ；
type="button"，为按钮类型的input ；
type="image"，为图像按钮类型的input ；
type="hidden"，为隐藏域类型的input 。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
</head>
<body>
<h2 align="center">用户登录</h2>
<form align="center">
<p>用户名：<input type="text" name="username"></p>
<p>密码：<input type="password" name="pwd"></p>
<p>
请选择性别：
<input type="radio" value="男" checked="checked">男
<input type="radio" value="女" name="gender"> 女
</p>
<p>
用户类型：
<input type="checkbox" value="新用户" name="book">新用户
<input type="checkbox" value="老用户" name="book">老用户
</p>
<p>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按钮">
</p>
</form>
</body>
</html>

三、table表格标签

表格标签主要用于展示数据，格式:<table>表格内容</table>

table的子标签:

th：在同行不同列输入表格内容
caption：用于定义表格的标题
thead：用于定义表头部分
tbody：用于定义表体部分
tfoot：用于定义表尾部分
tr：用于定义表格的一行
th：用于定义一个单元格(列)，并且将内容加粗且居中显示
td：用于定义一个单元格(列)

td 标签的属性说明：

colspan：用于合并多个列
rowspan：用于合并多个行。

table标签的属性：

width：用于指定表格的宽度，单位是像素
border：用于定义表格的边框，值的类型是数字，而是一个正数，值越大边框越粗
cellpadding：用于定义单元格的内边距，即单元格中的内容也单元格的边之间的距离 cellspecing：用于定义单元格的外边距，即单元格与单元格之间的距离
align：用于定义表格的对齐方式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签的使用</title>
</head>
<body>
<table width="350" border="2" cellpadding="0" cellspacing="0" align="left">
<caption></caption>
<thead>
<tr>
   <th>编号</th>
   <th>姓名</th>
   <th>年龄</th>
</tr>
</thead>
<tbody>
<tr align="center">
   <td align="center" rowspan="2">1</td>
   <td width="100">张三</td>
   <td>10</td>
</tr>
<tr align="center">
   <td>李四</td>
   <td>20</td>
</tr>
<tr align="center">
   <td>3</td>
   <td>王五</td>
   <td>30</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</body>
</html>