HTML标签的认识和练习

小查的成长历程

已于 2022-06-07 22:42:04 修改

阅读量5k

点赞数 2

分类专栏：测试理论基础-Linux数据库文章标签：测试工具

于 2022-03-30 22:12:27 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_68393415/article/details/123836844

版权

测试理论基础-Linux数据库专栏收录该内容

8 篇文章

订阅专栏

学习目标：

能够知道常见HTML标签的作用，对web项目基本标签做到认识

学习内容：

一、HTML介绍

1、介绍

2、html骨架标签

重点：页面的内容必须在body编写；html为根标签，所有的标签必须在根标签中；head为头部标签，一般放在title和搜索相关知识。

3、编写HTML的工具

hbuilder工具初始化

3.1 新建web项目

3.2 新建目录

3.3 新建文件

4、常见标签

-注释- 【快捷键ctrl+/，前端页面注释，上线之前注释必须删除】

4.1 标题标签

作用：文章标题

说明：HTML标题是通过<h1>X</h1>等标签进行定义

提示：默认是以下6个标题标签，也可以通过css调整任何标签的字体大小

<body>
        <h1>第一</h1>
        <h2>第二</h2>
        <h3>第三</h3>
        <h4>第四</h4>
        <h5>第五</h5>
        <h6>第六</h6>
<body>

4.2段落标签:

说明：HTML段落是通过<p>X</p>标签来进行定义的

作用：识别一个段落

特点：1.独占一行 2.做换行使用 3.语义化（浏览器）

<body>

            <p>第一段</p>
            <p>第二段</p>
            <p>第三段</p>
<body>

4.3超链接标签

说明：超链接是通过<a>标签来进行定义的

属性：href:跳转地址

target：新窗口打开

<body>

       <a hrey="http://www.baidu.com"target="_blank">百度</a>

<body>

4.4图片标签

说明：在页面中插入图片

重点：相对路径：相对当前文件所在位置来说

4.5换行与空格

换行：<br />
空格：&nbsp;

你好<br />小查
你好&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;小王

4.6 布局标签

说明：页面布局使用，常用div和span

	<!-- 
	 div:大盒子，一行可以放一个
	 span:小盒子，一行可以放多个
	 -->
		<div>我是div1</div>
		<br />
		<div>我是div2</div>
		
		<hr />
		
		<p>原价99 现价<span>9.9</span></p>

4.7 列表标签

说明：列表标签常用li元素（分为ol有序和ul无序）


 <!-- 
		  列表标签：li
		          有序：ol>li
				  无序：ul>li
		-->

		<ol>
			<li>小查</li>			
			<li>小王</li>
		</ol>
		<ul>
			<li>陕西</li>			
			<li>山西</li>
		</ul>

4.8 表单标签

form标签的作用：提交页面输入数据

<form action="提交页面.html” method="get">

<body>
		<!-- 
		 input:变形金刚type属性值不同
		 text：文本框
		 password：密码框
		 radio：单选【相同一组才能进行单选，相同的name属性值为一组】
		 checkbox:多选框
		 -->
		用户名：
		 <input type="" name="" id="" value="" />
		<br />
		密码：
		 <input type="password" name="" />
		<br />
		性别:
		 <input type=radio name="1" /> 男
		<input type=radio name="1" /> 女
		<br />
		您的爱好：
		<br />
		 <input type=checkbox /> 测试
		 <input type=checkbox /> 吃饭
		 <input type=checkbox /> 睡觉
		 <input type=checkbox /> 小说
		 
		 <br />
		 <input type="button" value="点我有惊喜 " />
		 

</html>

<form>

属性： action：将数据提交到特定页面

mehtod：1.get：参数在url中显示；速度相对Post快；提交内容长度有限制【查询使用】

2.Post：参数不在url中显示；速度相对get慢；提交内容长度无限制【提交数据是使用，如登录、注册等】