02. HMTL

于 2022-05-08 10:49:31 发布
阅读量138 收藏
点赞数
分类专栏： 软件测试 文章标签： html javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45752465/article/details/124644989
版权
这篇博客详细介绍了HTML的基础标签，包括标题标签（h1-h6）、段落标签、超链接标签、图片标签、换行和空格、布局标签、列表标签以及表单相关标签。内容涵盖各个标签的使用方法、属性及注意事项，旨在帮助初学者理解并掌握HTML的基本语法。
摘要由CSDN通过智能技术生成

HTML

1. 标题标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 标题标签 -->
    <!-- 注意： HTML 的标签都是特定写法， 不支持自定义！ -->
    <!-- 标题标签： h1 -> h6 一共 6 级，数字越大， 标题越小！-->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    <!-- 自定义h7无任何效果 -->
    <h7>七级标题</h7>
    普通文本
</body>
</html>

2. 段落标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 段落标签： 特点是独占一行， 可以用于换行-->
    <!-- 提示： 正常的换行编写， 页面上是不会出现效果的 -->
    我是段落1
    我是段落2
    <p>我是段落1</p>
    <p>我是段落2</p>
</body>
</html>

3. 超链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 超链接标签：点击文字信息可以跳转页面 -->
    <!-- 提示： href 属性用于指定要跳转的链接地址信息，文字信息要写在标签中间 -->
    <!-- 注意： 链接需要带协议头（http:// 或 https://） -->
    <!-- 错误示例 -->
    <a href="www.baidu.com">百度(错误)</a>
    <!-- 正确示例 -->
    <a href="http://www.baidu.com/">百度(正确)</a>
    <!-- target="_blank" : 以新页面打开链接 -->
    <a href="http://www.baidu.com/" target="_blank" >百度(新页面)</a>

    <!-- 测试关注点 -->
 	 	<!-- 测试关注点 -->
 		<!-- 测试关注点 -->
    <!--
    1. 测试是否是个超链接（注意：检查标签名和属性名）
    2. 测试超链接是否能够正常打开
    3. 测试超链接入口和目的地址是否一致，即测试超链接的跳转是否正确
    4. 测试超链接的入口——如果入口是文本，文本的文字要正确简练，不能有歧义 -->
</body>
</html>

4. 图片标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 图片标签：加载图片 -->
    <!-- 基本使用: src 属性用于指定图片文件路径信息-->
    <img src="aa.png" alt="">
    <!-- 常用属性： -->
    <!-- title 属性用于显示图片标题  -->
    <img src="aa.png" title="黑马程序员">
    <!-- alt 属性在图片无法正常显示时给出提示信息（使用错误文件名模拟无法加载） -->
    <img src="ab.png" alt="哎呀，图片丢了！">
    <!-- width（宽） 和 height（高） 属性分别负责图片的宽和高， 给出的数据为像素！ -->
    <img src="aa.png" width="100px" height="100px">
    <!-- 注意： 只设置宽或者高， 能够自动按比例缩放！ -->
    <img src="aa.png" width="200px">

    <!-- 测试关注点 -->
    <!--
        1. 图片类型
        2. 图片大小
        3. 图片数量
        思考题：生活中常见图片格式有哪些？
    -->
</body>
</html>

5. 换行和空格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 换行： 使内容换行 -->
    <!-- 提示： HTML 的语法要求相对松散，以下换行语法均为正确写法， 但推荐使用 <br> -->
    示例文本1 <br>
    示例文本2 </br>
    示例文本3 <br/>

    <!-- 空格: &nbsp; -->
    <!-- 说明： 默认情况下只识别大概一个空隙 -->
    小明  小红  小刚 <br>
    小明 &nbsp; 小红 &nbsp; 小刚 <br>
    <!-- 测试时注意： 如果需要大量空格， 则应该考虑使用 CSS 实现效果！ -->
    <!-- 不推荐 -->
    小明 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 小红
</body>
</html>

6. 布局标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 布局标签：大盒子div和小盒子span -->
    <!-- 大盒子：独占一行 -->
    <div>大盒子1</div>
    <div>大盒子2</div>
    <!-- 小盒子：一行可以放置多个 -->
    <span>小盒子1</span>
    <span>小盒子2</span>
    <!-- 测试提示：大盒子装小盒子有效； 小盒子装大盒子无意义！ -->
    <!-- 大盒子装小盒子 -->
    <div>
        <span>大盒子里的小盒子</span>
    </div>
    <!-- 小盒子装大盒子 -->
    <span>
        <div>小盒子里的大盒子</div>
    </span>
</body>
</html>

7. 列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 列表标签：有序列表、无序列表 -->
    <!-- 注意： 有序和无序只是外层标签不同， 列表选项都是 li 标签 -->
    <!-- 有序列表：ol -->
    <ol>
        <li>宝马</li>
        <li>奔驰</li>
        <li>皇冠</li>
    </ol>
    <br>
    <!-- 无序列表：ul -->
    <ul>
        <li>小人</li>
        <li>老虎</li>
        <li>枪</li>
    </ul>
</body>
</html>

8. 表单标签

8.1 文本框和密码框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 说明: 表单内的元素多部分是input标签 通过type属性值区分不同元素 -->
    <!-- 文本框 -->
    文本: <input type="text">
    <br> 
    <!-- 密码框 -->
    密码: <input type="password">
</body>
</html>

8.2 单选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 单选按钮 -->
    <!-- 提示 想要实现单选 则可以将多个单选元素设置相同的name值即可 -->
    <input type="radio" name="sex" id="">男
    <input type="radio" name="sex" id="">女
</body>
</html>

8.3 复选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="checkbox" name="" id="">吃饭
    <input type="checkbox" name="" id="">睡觉
    <input type="checkbox" name="" id="">打豆豆
</body>
</html>

8.4 各种按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 各种按钮: 普通按钮 重置按钮 提交按钮 -->
    <!-- 提示,无论是哪一种按钮,最好通过value属性值指定按钮显示的内容 -->
    <!-- 普通按钮 -->
    <input type="button" value="普通按钮">
    <!-- 重置按钮 -->
    <!-- 注意: 如果按钮处于form标签内,会将输入的内容全部清空 -->
    <input type="reset" value="重置按钮">
    <!-- 提交按钮 -->
    <input type="submit" value="提交按钮">
</body>
</html>

8.5 表单域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 属性说明: -->
    <!-- action 负责设置将表单内数据发送到的目标页面地址信息 -->
    <!-- method 常用值有两个 一个叫GET 一个叫POST 
    GET : 
        从服务器获取数据居多
        请求参数放置地址栏中(相对不安全)
        请求参数长度有限制
    POST: 
        向服务器发送数据居多
        请求参数是放置于请求体中(相对安全)
        请求参数长度无限制
    -->
    <form action="" method="">
        <!-- 表单内容: 表单元素想要起到作用, 务必至于 form里面 -->
    </form>
</body>
</html>
Fshiqian
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值