21/5/20 HTML5学习总结01

最新推荐文章于 2024-09-11 17:25:08 发布

zxw_2093597331

最新推荐文章于 2024-09-11 17:25:08 发布

阅读量84

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/zxw_2093597991/article/details/117093943

版权

本文详细介绍了HTML的基本结构和常用标签，包括网页内容结构、标题、段落、图像、超链接、列表、表格、多媒体元素等。同时，还提到了页面结构标签如<header>、<footer>等，是理解网页构建和前端开发的基础知识。

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

1、网页基本内容
<!DOCTYPE html> 
<html lang="en">
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
</head>
<body>

</body>
</html>

2、基本标签
标题标签： <h1...h6>一到六级标签</h1...h6>
段落标签： <P>文字段</p>
换行标签：文字段<br/>
水平线标签：<hr/>
粗体标签： <strong>文字段</strong>
斜体标签： <em>文字段</em>
空格标签： &nsp;
大于号“>” > 小于号 “<”<
版权符号：©

3、图像标签使用
<img src="图片地址" alt="图片的替代文字" title="悬停文字" width="宽度值" height="高度值"/>
注：src="" alt="" 地址文字为必填项

4、超链接标签
<a href="链接路径" target=“目标窗口位置”>链接图像或文本</a>
注：href="" “链接路径”和“链接图像或文本”为必填项
target表示窗口在哪里打开 _blank 在新窗口中打开 _self 在自己当前网页中打开

锚链接标签（实现页面定位跳转）：需要一个跳转标记，跳转到标记#
<a name="标记名">标记</a>
<a href="#标记名">跳转到标记</a>

功能性链接标签：
邮件链接：mailto
<a href="mailto:邮箱号">链接图像或文本</a>
如：<a href="mailto:20993597331@qq.com">点击联系我</a>

qq链接搜索QQ推广，进入推广工具，复制推广代码粘贴到我的网页

5、行内元素和块元素
行内元素：内容撑开宽度，左右都是行内元素的可以排一行如：<a>超链接标签、<strong>粗体标签、<em>斜体标签、<img>图片标签
块元素：无论内容多少，独占一行如：<h1..h6>标题标签、<p>段落标签、<li>列表项目标签、<div>

6、列表标签
有序列表标签：<ol>
<li>测试</li>
<li>前端</li>
<li>运维</li>
</ol>
自带序号，用于试卷、问答

无序列表标签：<ul>
<li>测试</li>
<li>前端</li>
<li>运维</li>
</ul>
自带黑点，应用于导航栏、侧边栏

自定义列表标签：<dl>
<dt>工作</dt>
<dd>测试</dd>
<dd>运维</dd>
<dd>前端</dd>
</dl>
<dl>标签、<dt>列表名称、<dd>列表内容

7、表格标签：<table>
行标签：<tr>
列标签：<td>
如：
<table border="1px"> 
<tr>
<td colspan="2">01</td> 
<td>02</td>

</tr>
<tr>
<td rowspan="2">11</td> 
<td>12</td>
<td>13</td>
</tr>
<tr>

<td>22</td>
<td>23</td>
</tr>
</table>
8、视频和音频
视频标签：<video src="视频地址" controls autoplay></video>
音频标签：<audio src="音频地址" controls autoplay></audio>
注：src:资源路径、controls: 播放控制条、autoplay：自动播放

9、页面结构标签
<header></header> 标题头部区域内容
<footer></footer> 标记脚部区域内容>
<section></section> web页面中的一块独立区域
<article></article> 独立文章内容
<aside></aside>相关内容或应用（常用于侧边栏）
<nav></nav>导航类辅助内容