（6）-HTML之元素、属性、标题、段落

1 元素
- 1.1 语法
- 1.2 元素嵌套
- 1.3 空元素
- 1.4 书写注意事项
- 1.5 HTML标签
2 属性
- 2.1 属性说明
- 2.2 示例
- 2.3 属性举例
- 2.4 注意事项
3 标题
- 3.1 标题说明
- 3.2 使用方法
- 3.3 举例
4 水平线
- 4.1 HTML水平线
- 4.2 使用方法
- 4.3 举例
5 注释
- 5.1 HTML注释
- 5.2 使用方法
- 5.3 举例
6 段落
- 6.1 HTML段落
- 6.2 使用方法
- 6.3 举例

1 元素

1.1 语法

示例：

开始标签	元素内容	结束标签
`<p>`	段落	`</p>`
`<a>`	链接	`</a>`
`<br>`	换行

语法：

# 以开始标签起始，以结束标签终止；
# 元素内容是开始标签与结束标签之间的内容；
# 空元素在开始标签中进行关闭（以开始标签的结束而结束）；
# 多数元素可拥有属性。

1.2 元素嵌套

比如之前写的：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>开始学习html，这是我的第一个页面，哈哈哈！</title>
</head><body><h1>标题1：虽然我不会，但是我有学习的动力！</h1><h2>标题2：今天我认真的学习了！</h2><p>这是一个段落！</p>
</body></html>>

以上内容包含的元素有<html>、<head>、<body>、<h1>、<h2>、<p>六个html元素；

1.3 空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的；
比如前边说的<br> 就是没有关闭标签的空元素；
空元素的关闭方法为，例如<br />；

1.4 书写注意事项

元素建议使用小写，比如<a>dsd</a>，而不要写<A>sdsd</A>。

1.5 HTML标签

内容比较多，可以参考学习https://www.runoob.com/tags/html-reference.html

2 属性

2.1 属性说明

对TML 元素可以设置属性；
属性可以在元素中添加附加信息；
属性一般描述于开始标签；
属性总是以名称/值对的形式出现,比如python中的字典，有键和值，比如name="zhangsan";

2.2 示例

比如元素<a>的href 属性，表示链接的地址；

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>开始学习html，这是我的第一个页面，哈哈哈！</title>
</head><body><h1>标题1：虽然我不会，但是我有学习的动力！</h1><h2>标题2：今天我认真的学习了！</h2><p>这是一个段落！</p><a href="https://blog.csdn.net/NoamaNelson">点击进入我的博客链接</a>
</body></html>>

浏览器中打开如下：

2.3 属性举例

属性	说明
class	规定元素的类名（classname）
id	规定元素的唯一 id
style	规定元素的行内样式
title	规定元素的额外信息

2.4 注意事项

属性建议使用小写；
使用双引号或单引号括起来；
如果遇到有双引号和单引号一起用的，注意要成对用，比如name='gebi "laowang"';

3 标题

3.1 标题说明

这个和markdown查不对，都使用h来表示；
使用<h1>到<h6>标签进行定义；
<h1>是最大标题，依次减小，<h6>最小；

3.2 使用方法

<h1>标题1（类似一级标题，个人叫法）</h1>
<h2>标题2（类似二级标题，个人叫法）</h2>
<h1>标题1（类似一级标题，个人叫法）</h1>
<h1>标题1（类似一级标题，个人叫法）</h1>

3.3 举例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>标题学习</title>
</head><body><h1>1、xx工具的使用</h1><h2>1.1、xx工具的下载</h2><h3>1.1.1、xx工具下载网址</h3><a href="https://blog.csdn.net/NoamaNelson">点击进入我的博客链接</a>
</body></html>>

4 水平线

4.1 HTML水平线

使用标签<hr>来定义页面中的水平线；
其作用可用来分割内容。

4.2 使用方法

<p>段落1</p>
<hr>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
<hr>

4.3 举例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>水平线学习</title>
</head><body><p align="center">静夜思</p><hr><p align="center">床前明月光，</p><p align="center">疑是地上霜。</p><p align="center">举头望明月，</p><p align="center">低头思故乡。</p><hr>
</body></html>

5 注释

5.1 HTML注释

使用进行注释；
和编程语言一样，提升代码的可阅读性，不会被浏览器显示出来。

5.2 使用方法

5.3 举例

vs code直接在需要加注释的代码行使用ctrl + /即可快速进行代码注释；

6 段落

6.1 HTML段落

其实就是将文档可以分为若干个段落；
使用<p>段落内容</p>来表示；
浏览器会自动在段落前后加空行。

6.2 使用方法

<p>段落内容</p>；
段落内换行使用<br>；

6.3 举例

第一种：直接使用<p>段落内容</p>，诗句的标题是一段，内容是一段；

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>段落学习</title>
</head><body><!-- 使用一首诗来表示段落！ --><p align="center">静夜思</p><hr><p align="center">床前明月光，疑是地上霜。举头望明月，低头思故乡。</p><!-- <p align="center">疑是地上霜。</p><p align="center">举头望明月，</p><p align="center">低头思故乡。</p> --><hr>
</body></html>

第二种：使用<br>在一个段落内换行；

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>段落学习</title>
</head><body><!-- 使用一首诗来表示段落！ --><p align="center">静夜思</p><hr><!-- 第一种 --><!-- <p align="center">床前明月光，疑是地上霜。举头望明月，低头思故乡。</p> --><!-- <p align="center">疑是地上霜。</p><p align="center">举头望明月，</p><p align="center">低头思故乡。</p> --><!-- 第二种 --><p align="center">床前明月光，<br>疑是地上霜。<br>举头望明月，<br>低头思故乡。</p><hr>
</body></html>

第三种：诗句的每一句就是一个段落；

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>段落学习</title>
</head><body><!-- 使用一首诗来表示段落！ --><p align="center">静夜思</p><hr><!-- 第一种 --><!-- <p align="center">床前明月光，疑是地上霜。举头望明月，低头思故乡。</p> --><!-- 第二种 --><!-- <p align="center">床前明月光，<br>疑是地上霜。<br>举头望明月，<br>低头思故乡。</p> --><!-- 第三种 --><p align="center">床前明月光。</p><p align="center">疑是地上霜。</p><p align="center">举头望明月，</p><p align="center">低头思故乡。</p><hr>
</body></html>

、

『全栈测试技术，分享，共勉，共进，提升』

【特别说明】：知识来源于网络、各种资料、书本、网站等，本文仅用于学习使用，不做他用，如果涉及版权问题，请联系博主删除，谢谢

软件测试体系学习及构建（6）-HTML之元素、属性、标题、段落相关推荐

软件测试体系学习及构建（1）-软件测试环境介绍
(1)-软件测试环境介绍 1 软件的含义 2 软件的分类 3 软件测试几个概念 3.1 软件测试的含义 3.2 何为测试环境? 3.3 作为测试应具备的知识? 4 冯·诺依曼体系结构 5 数据形式与数 ...
软件测试体系学习及构建（8）-HTML之图像，表格，列表，区块
(8)-HTML之图像,表格,列表,区块 1 图像 1.1 图像标签 1.2 使用方法 1.3 Alt属性 1.4 高度和宽度 1.5 举例 1.6 总结 2 表格 2.1 表格标签 2.2 边框属性 ...
软件测试体系学习及构建（23）测试专项丨自动化测试理解
(23)测试专项丨自动化测试理解 1 定义 2 做自动化的目的是什么? 3 自动化测试的优缺点 4 自动化测试的前提条件(重要) 4.1 需求变动不频繁 4.2 项目周期比较长 4.3 脚本的重复使用 ...
软件测试体系学习及构建（21）测试专项丨兼容性测试
(21)测试专项丨兼容性测试 1 定义 2 分类 3 测试点 4 测试工具 5 用例设计模板 6 举例 6.1 举例对象 6.2 测试要点 6.3 要点细节 6.4 测试说明 6.5 注意事项 1 定 ...
软件测试体系学习及构建（13）-测试基础之测试工程师的基本要求
(13)-测试基础之测试工程师的基本要求 1 软性能力 1.1 沟通表达能力 1.2 逻辑思维能力 1.3 原则和立场 1.4 情绪管理 1.5 抗压性 1.6 学习成长 1.7 时间管理 1.8 问 ...
软件测试体系学习及构建（3）-Windows系统常用DOS命令和使用
(3)-Windows系统常用DOS命令使用 1 打开命令行 2 常用快捷操作 2.1 切换驱动器 2.2 命令帮助 2.3 命令补全 2.4 清屏操作 3 目录操作 4 文件操作 5 通配符 6 管 ...
H5学习从0到1-H5的元素属性（3）
1.标签可以拥有属性,为标签提供更多的信息 2.属性以键值对的形式呈现例如:href = "www.baidu.com" 3.常用标签属性 :align对其方式 ,对齐方式,包括上 ...
软件测试需要学习什么？好就业么
软件测试需要学习测试环境.网络环境.windows环境.数据库管理.编程技巧(java编程设计,脚本语言,设计工具,XML编程.软件测试技术,测试理论,方法,流程,文档写作,测试工具,自动测试.测试技 ...
大数据OLAP技术体系学习框架
文章目录大数据OLAP技术体系学习框架前言一.Apache Druid分布式数据存储二.ClickHouse列式数据库三.Presto分布式查询引擎四.Kudu分布式存储库五.Kylin ...

软件测试体系学习及构建（6）-HTML之元素、属性、标题、段落

（6）-HTML之元素、属性、标题、段落

1 元素

1.1 语法

1.2 元素嵌套

1.3 空元素

1.4 书写注意事项

1.5 HTML标签

2 属性

2.1 属性说明

2.2 示例

2.3 属性举例

2.4 注意事项

3 标题

3.1 标题说明

3.2 使用方法

3.3 举例

4 水平线

4.1 HTML水平线

4.2 使用方法

4.3 举例

5 注释

5.1 HTML注释

5.2 使用方法

5.3 举例

6 段落

6.1 HTML段落

6.2 使用方法

6.3 举例

软件测试体系学习及构建（6）-HTML之元素、属性、标题、段落相关推荐

最新文章

热门文章