HTML5-基本标签的使用

1uuue

已于 2022-08-20 14:44:23 修改

阅读量271

点赞数

分类专栏： HTML5 文章标签： html 前端

于 2022-08-20 11:18:42 首次发布

本文链接：https://blog.csdn.net/qq_61727355/article/details/126420117

版权

HTML5 专栏收录该内容

6 篇文章 4 订阅

订阅专栏

1.初始HTML

HTML

Hyter Text Markup Language（超文本标记语言）

超文本包括：文字、图片、音频、视频、动画等等

W3C 标准

W3C
World Wide Web Consortium（万维网联盟）

成立于1994 年，Web 技术领域最权威和具影响力的国际中立性技术标准机构

http://www.w3.org/

W3C中文官网

W3C 标准包括
结构化标准语言（HTML、XML）

表现标准语言（CSS）

行为标准语言（DOM、ECMAScript）

html的基本结构

<!--DOCTYPE：告诉浏览器使用何种规范-->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--head：网页头部-->
<head>
<!--    meta：描述性标签，描述网站的信息-->
    <meta charset="UTF-8">
    <meta name="keywords" content="biubiu">
    <meta name="description" content="this is my first html5 page">
<!--    title：网页标题-->
    <title>Title</title>
</head>
<!--body：网页主体-->
<body>
Hello,world
</body>
</html>

<body>、</body> 等成对的标签，分别叫开放标签和闭合标签，单独呈现的标签（空元素），如 <hr/> 意为用 / 来关闭空元素

2.网页基本标签

标题标签(<h1>......<h6>,数字越小字体越大)
段落标签（<p>）
水平线标签(<hr>)
换行标签(<br>)
粗体/斜体(<strong>/<em>)
特殊符号（空格、大于、小于、版权符号等等）

代码测试：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!--段落标签-->
<p>当我们在进行基于数据库的web程序开发时，我们可以先在主程序（如Servlet、Bean）中通过JDBC中的DriverManager建立数据库连接，</p>
<p>然后将要对数据库进行操作的sql语句封装到Statement中，最后在返回结果集后断开数据库连接。</p>
<p>以上是较为传统的开发模式，然而用这种模式开发会埋下严重的安全隐患。</p>

<!--水平线-->
<hr/>

<!--换行标签-->
当我们在进行基于数据库的web程序开发时，我们可以先在主程序（如Servlet、Bean）中通过JDBC中的DriverManager建立数据库连接，<br/>
然后将要对数据库进行操作的sql语句封装到Statement中，最后在返回结果集后断开数据库连接。<br/>
以上是较为传统的开发模式，然而用这种模式开发会埋下严重的安全隐患。<br/>

<!--粗体 斜体-->
<strong>粗体：i love you</strong><br>
<em>斜体：i love you</em><br>

<!--特殊符号-->
空&nbsp;&nbsp;&nbsp;&nbsp;格： <br>
大于:&gt;<br>
小于:&lt;<br>
版权符号:&copy;<br>

</body>
</html>

3.图像标签

1）常见的图像格式

JPG
GIF
PNG
BMP
……

2）图像标签格式

<img src="path" alt="text" title="text" width="x" height="y" />

属性说明：
src：图像地址，必选

alt：图像的替代文字，必选

title：鼠标悬停提示文字

width：图像宽度

height：图像高度

3）代码测试：

首先养成良好的习惯，创建一个 resources 文件夹用于存放资源，在 resources 下面创建一个 img 文件夹专门用于存放图片资源。在里面存放一个图片 1.png

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--
src:图片地址
    相对地址，绝对地址
    ../     上一级目录
-->
<img src="../resource/image/1.PNG" alt="测试头像" title="悬停文字" width="135" height="100"><br>

<a href="连接标签.html#down">跳转</a>
</body>
</html>

4.超链接标签及应用

1）连接标签

属性说明：

href：链接路径

target：指定链接在哪个标签打开，

常用值：_self（默认，在当前标签打开链接）

_blank（在新标签打开链接）

2）超链接

从页面间链接（从一个页面链接到另一个页面）
锚链接
功能性链接

3）锚链接

需要一个锚标记（id 属性，原来是 name 属性但已经被废弃了）
跳转到标记（跳转路径为 #id属性定义的值）

完整代码测试：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>连接标签</title>
</head>
<body>
<a name="top">顶部</a><br>
<!-- a标签
 href:表示要跳转至哪个页面
 target:表示在哪里打开
        _blank：表示在新页面打开
        _self:在现网页打开
 -->
<a href="我的第一个网页.html" target="_blank">点击跳转至页面一</a><br>
<a href="https://www.baidu.com" target="_self">点击跳转至页面二</a><br>
<a href="我的第一个网页.html">
    <img src="../resource/image/1.PNG" alt="测试图片">
</a>

<!-- 复制图片是为了测试锚链接-->
<p>
    <a href="我的第一个网页.html">
        <img src="../resource/image/1.PNG" alt="测试图片">
    </a>
</p>

<p>
    <a href="我的第一个网页.html">
        <img src="../resource/image/1.PNG" alt="测试图片">
    </a>
</p>

<p>
    <a href="我的第一个网页.html">
        <img src="../resource/image/1.PNG" alt="测试图片">
    </a>
</p>

<p>
    <a href="我的第一个网页.html">
        <img src="../resource/image/1.PNG" alt="测试图片">
    </a>
</p>

<p>
    <a href="我的第一个网页.html">
        <img src="../resource/image/1.PNG" alt="测试图片">
    </a>
</p>

<!--锚链接  实现页面间的跳转
1.需要一个标记（锚）
2.跳转至标记
-->
<a href="#top">回到顶部</a><br>

<a name="down">down</a><br>

<!--功能性链接
mailto:邮件连接
-->
<a href="mailto:348082979@qq.com">点击联系我</a>
</body>
</html>

5.块元素和行内元素

1uuue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5-基本标签的使用

HyterTextMarkupLanguage（超文本标记语言）超文本包括：文字、图片、音频、视频、动画等等 W3C 标准 W3C World Wide Web Consortium（万维网联盟）成立于1994 年，Web 技术领域最权威和具影响力的国际中立性技术标准机构 html的基本结构、等成对的标签，分别叫开放标签和闭合标签，单独呈现的标签（空元素），如意为用 / 来关闭空元素
复制链接

扫一扫