Web开发基础-HTML基础标签

7.KM

于 2022-06-23 23:29:42 发布

阅读量166

点赞数 1

文章标签： web html

本文链接：https://blog.csdn.net/weixin_65773135/article/details/125436425

版权

学习目标：

    •            HTML常见的网页元素
   •           结构标签的使用
   •           文档标签的使用

学习内容：

1、什么是web开发基础？
• 不管多么复杂，web网页=html（负责元素展示）+css（负责样式美化）+js(网页的事件响应和用户交互)
• 其它开发技术，比如vue、react（加速开发效果）、java、php等实现的代码经过编译过后，最终都会变成web网页（html +css+js）

2、为什么要学习web开发基础？
   •           看懂页面、熟悉网页结构才能更好的做web测试
   •           web开发基础是自动化测试，比如UI自动化测试的基础
   •           安全测试、性能测试等也会涉及相关知识点
3、学习目标?
   •           编写和读懂html元素
   •           css和html网页结构整合起来
   •           使用js处理网页事件

HTML官方定义：

超文本标签语言。
标签的格式：双标签 <开始标签属性> </结束标签> 单标签 <标签名字属性/>

说明：1.开始标签和结束标签表示一个范围
2.开始标签和结束标签名字肯定是一样的
3.属性是对标签的解释说明

第一类标签比如结构标签（html的固定模板），最基本的结构化标签是Html标签，这个标签为根标签，所有标签都要放在这个标签中。网页可以分成两个部分，一部分包含在Head标签中，另一部分包含在Body标签中。 Head标签： 1、处理网页中文编码。 2、处理网页标题，title标签。 3、存放网页的配置（css配置和js配置）。 Body标签：对应浏览器中所有可显示的区域。

4：HTML文档标签

文档标签
文档标签用来设置标题、段落、链接、图片等。
1、文档标题

1、文档标题
 <!--   注释给人看的 不会被执行  代表对代码解释说明
    title 网页标题
    h1~h6  文档标题  1级标题 到6级标题-->
  <h1>我的标题1</h1>
  <h2>我的标题1</h2>
  <h3>我的标题1</h3>
  <h4>我的标题1</h4>
  <h5>我的标题1</h5>
  <h6>我的标题1</h6>
2、段落自动换行p+字加粗b+字斜体i
<p>今天真高兴！买彩票
<font color="red"  size="5"> <strong> <i>中将啦！ </i>
</strong></font>
</p>

3、链接a标签 href属性指定跳转网页的地址

<a href="http://www.baidu.com">百度~</a>
  <a href="#">我的网页</a>

4、图片img

实现图片参考代码如下：

<body>
<!--
img属性如下
  src 指定图片的位置   ./ 代表当前目录
  alt 如果图片加载失败显示的内容
  title 设置图片显示标题
  align 设置图片的靠齐方式
  width  设置图片宽
  height  设置图片的高
  border  设置图片的边界
  hspace  图片和其它元素的水平距离
  vspace  图片和其它元素的上下垂直距离
 -->
<img src="./aaimg/xiaohuangren.jpg" alt="下载失败"
     title="我的图片" align="right" width="200" height="200"
     border="10" hspace="30" vspace="30"
     />

任务5：特殊符号+综合案例

【任务目标】
• 熟悉常用的特殊符号
• 通过综合案例复习前面的内容
【任务步骤】
5.1 常用特殊符号

视频-05：特殊符号

&nbsp 空格
<br/> 换行
< 左箭头
> 右箭头
& 显示&

5.2 综合体现

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>举例</title>
</head>
<body>

<!--
 思路：
      1、图片===》靠右的 （和别元素是有水平距离）
      2、标题 h2
      3、段落（包含字体）
      4、会发现段落之前有空格~！
-->
<img src="./img/xiaogou.jpg" alt="下载失败" align="right" title="乖乖" hspace="30"/>
<h2>拉布拉多</h2>
<!-- html 默认 写无数个空格都当做一个空格处理
只有 &nbsp; 才有效果-->
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;乖乖&lt;p&gt;女神 <font color="blue">擅长<br/>打滚</font></p>

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;乖乖&amp;是：<font color="blue">拉多拉多种类</font></p>

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;乖乖<font color="blue">不喜欢和陌生人玩</font></p>
</body>
</html>

三、总结
主要学习了web开发基础中HTML的一些基础标签，主要包含结构标签和文档标签。