【前端笔记】HTML文件的基本结构及常用标签、标签属性

最新推荐文章于 2023-05-23 10:30:47 发布

QiBarbara

最新推荐文章于 2023-05-23 10:30:47 发布

阅读量468

点赞数

CC 4.0 BY-SA版权

文章标签：笔记前端 HTML

本文链接：https://blog.youkuaiyun.com/weixin_41606276/article/details/79446841

本文详细介绍了HTML的基本结构与常用标签，包括文字、段落、图片、列表及表格等元素的使用方法。

一、HTML文件的基本结构

<!DOCTYPEHTML>

<html>

<head>
<meta charset="utf-8">
<title>HTML文件</title>
</head>
<body>
<p>hello,world!</p>
</body>
</html>

二、文字标签

显示普通文字：<body>想要输入的内容</body>
显示特殊符号：举几个例子---- 特殊符号符号码
‘’ "
& &
< <
> >
标题字标签：<h1>标题内容</h1>
修饰文字标签：<strong>粗体文字</strong>
<em>斜体字</em>
<u>带下划线的文字</u>
<sup>……</sup> 
<sub>……</sub> 
修饰字体标签：<font size="字号"color="字体颜色"face="字体">文字内容</font>

三、段落标签

段落标签：<p>段落文字</p>
取消文字换行标签：<nobr>不换行显示的文字</nobr> （当浏览器宽度不够时，会有滚动条）
修饰段落的对齐属性：<p align=value></p> （value取center、left、right）
保留原始排版标签：<pre>……</pre> （在标签中的文字排版保留）

四、图片标签与列表标签

插入图片标签：<img 属性=value>
img的属性： src--图像源文件，图片地址（可以是绝对地址也可以是相对地址。最好是相对地址，以免因文件包的移动而找不到图片）
alt-- 提示文字
width,height--宽度、高度
border--边框
vspac--垂直间距
hspac--水平间距

建立有序列表：<ol start="起始数值" type="排序类型">
<li>第一项</li>
<li>第二项</li>
</ol>
起始数值取1、2、3……；排序类型可取1；a；A；Ⅰ
建立无序列表：<ul type="排序类型">
<li>第一项</li>
<li>第二项</li>
</ul>
建立定义列表：<dl>
<dt>名词1</dt><dd>解释1</dd>
<dt>名词2</dt><dd>解释2</dd>
</dl>
五、连接标签

建立文本链接：<A herf="链接地址">链接文字</A>
建立书签链接：①先建立书签 ②再为书签制作链接

六、绘制表格

表格标签：<table></table>
设置表格标题：<caption>表格标题内容</caption>
表格边框：<table border="10"></table>
表格宽度和高度：<table width="400" height="200">
表格边框色：<table bordercolor="red">
表格对齐方式：<table align=value> value取left、center、right
表格背景颜色：<table bgcolor=value>
表格背景图片：<table background=value>
七、行标签<tr>属性

行的高度：<tr height=value>
行的边框颜色：<tr bordercolor=value>
行的背景颜色：<tr bgcolor=value>
行的水平位置：<tr align=value> value取left、center、right
行的垂直位置：<tr valign=value> value取top、middle、bottom