H5学习手记一、基础篇 HTML-标签

最新推荐文章于 2024-02-04 17:19:04 发布

原创最新推荐文章于 2024-02-04 17:19:04 发布 · 261 阅读

0 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了HTML的基本结构与常用标签，包括页面布局、字体样式、图片插入等，适合初学者快速入门。

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

1、页面文件的扩展名: .html .htm

2、html的基本结构
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

3、常用标签
1)换行<br />

2) 可以改变字体大小
<h1> ~<h6> 6个标题标签大-》小
特点：加粗独立成行

<font size="7" color="red" face="黑体"></font>
设置font标签中文本的大小和颜色

3) 图片标签
<img src="图片路径" />
width 图片的宽度
height 图片的高度
title 鼠标停留时的提示信息
alt 图片不显示时的提示信息

4）段落标签
<p></p>

5）水平线标签
<hr />
color = "red" 水平线颜色
width = "500" 水平线的长度
size = "5" 水平线粗细
align = "left" 水平线对齐方式

6）特殊字符
© 圈c
  空格

7）链接
<a href="路径"></a>
target = "_blank" 链接在新窗口中打开

8）序列标签
有序<ol type="序号风格">
<li></li>
</ol>
无序<ul type="序列风格">
<li></li>
</ul>

9) 预格式标签
<pre></pre> 以标签内的格式显示页面

10）滚动标签

11）水平线 <hr />
特点：块标签（独立成行），居中，长度窗口100%，粗细1px
常用属性：位置 align
宽度 width = "XX% / XXX" 百分比/像素
粗细 size = "X" 像素
颜色 color = "颜色单词 / #FFFFFF / #FFF "

12)字体样式相关
加粗 <strong>(推荐) <b>
斜体 <em>(推荐) <i>
上标 <sup>
下标 <sub>
删除 <del>

14）图像标签<img />
必须属性 src ="图片路径"
a) 和当前文件在同一路径下 "直接写图片名"
b) 在当前文件的下一层路径下 "文件夹/图片名"
c) 在当前文件的上一层路径下 "../图片名"
常用属性 width height title alt

15）链接标签 <a></a>
必须属性 href = "链接路径"
常用属性 target = "_self(本页) / _blank（新页）"

a)文件链接 href="另一个文件的相对路径"
b)锚记链接 href = "#锚名"
命名锚名 <a name="锚名"></a>
c)邮箱链接 href = "mailto:邮箱地址"
如果操作系统安装了outlook软件，则点击链接后打开该软件进行邮件编写及发送操作

16）列表标签
无需列表 <ul> <li>
有序列表 <ol> <li>
定义列表 <dl> <dt> <dd>

17) 表格标签 <table> 行标签<tr> 单元格标签<td>
<table border="外边框粗细"
bordercolor="边框颜色"
width="表格宽度"
height="表格高度"
align="表格水平对齐方式"
cellspacing="单元格之间的间距"
cellpadding="单元格内容和边框的间距"
bgcolor="表格的背景颜色" >
<tr bgcolor="行的背景颜色"
height="行高">
<td bgcolor="单元格背景颜色"
width="列宽"
colspan="跨列"
rowspan="跨行">
内容
</td>
</tr>
</table>