01-HTML基础知识

孙小明的测试修炼手册

已于 2023-06-24 14:32:02 修改

阅读量29

点赞数

分类专栏：前端实战-HTML&CSS 文章标签： html css 前端

于 2023-06-21 11:26:11 首次发布

本文链接：https://blog.csdn.net/weixin_44431329/article/details/131324369

版权

前端实战-HTML&CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、基础认知

1、为什么要要测试浏览器的兼容性

因为常用的浏览器的渲染引擎不同，不同浏览器的渲染引擎是不同，对相同代码解析的效果会存在差异，

ie浏览器	trident
火狐浏览器	gecko
谷歌浏览器	blink
safari	webkit

2、Web标准

让不同的浏览器按照相同的标准显示结果，让展示的效果统一主要是W3C

Web标准中分成三个构成：

构成	语言	说明
结构	HTML	页面元素和内容
表现	CSS	网页元素的外观和位置等页面样式
行为	JS	网页模型和页面的交互

3、HTML概念

HTML (Hyper Text Markup Language) 中文译为：超文本标记语言

2、HTML标签

1、HTML骨架由那些组成

html标签：网页的整体
dead标签：网页的头部
body标签：网页的身体
title标签:网页的标题

2、常用标签

常用标签	用法	备注
标题标签	h1-h6 数字值越小则标题越大
段落标签	p 文本的段落
水平标签	hr 在网页中显示一条线
换行标签	br 强制换行	主要对行内元素和行内块元素使用
文本格式标签	strong 加粗 ins 下划线 em 倾斜 del删除	ins为下划线
图片标签	img标签主要有以下几个属性 src 图片路径 alt 替换文本 title图片标题 width宽度 height高度	注意点，图片宽和高只能设置一个，设置两个会造成图片的拉伸
音频标签	audio标签在网页中插入音频主要属性有 src:音频的路径 controls：播放控件 autoplay：自动播放 loop：循环播放
视频标签	video标签 src 图片路径 controls 播放控件 autoplay 自动播放 loop循环播放
链接标签	a标签 href 设置跳转到网页的路径 target 设置跳转方式 _self 当前窗口 _blank 新打开一个窗口

3、标签使用

1、标题标签

h1-h6

<!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>
    <h1>一级标题</h1>
    <h2>二级标题</h1>
    <h3>三级标题</h1>
    <h4>四级标题</h1>
    <h5>五级标题</h1>
    <h6>六级标题</h1>

</body>
</html>

展示：

2、段落标签

p标签

<!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>
    <p>这是一个段落</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>
    这是一个文字
    <hr>
</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>
    文字1111111111111111111 <br>
</body>
</html>

展示：

5、文本格式化标签

加粗 strong
下划线 ins
倾斜 em
删除线 del

<!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>
    <strong>这是一个加粗的</strong>
    <ins>这是下划线</ins>
    <em>倾斜</em>
    <del>删除线</del>
</body>
</html>

展示：

6、图片标签

img

<!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、设置图片加载失败后文本
    3、图片的标题
    4、图片的长宽高设置为100px  -->
    <img src="./images/dog.gif" alt="图片加载失败" title="这是一个狗的图片" width="100px" height="100px">
</body>
</html>

展示：

7、音频标签

audio 标签

controls 音频标签控制器
src 路径
loop 循环播放
autoplay 自动播放

<!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. src:路径
        2. controls 音频播放器控制器
        3. autoplay 自动播放
        4. loop 循环播放
     -->
    <audio src="../day07练习/images/music.mp3" controls  autoplay  loop></audio>
</body>
</html>

展示：

8、视频播放

video标签

controls 音频标签控制器
src 路径
loop 循环播放
autoplay 自动播放

<!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. src:路径
        2. controls 音频播放器控制器
        3. autoplay 自动播放
        4. loop 循环播放
     -->
    <video src="./images/video.mp4" controls autoplay loop></video>
</body>
</html>

展示：

孙小明的测试修炼手册

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
01-HTML基础知识

因为常用的浏览器的渲染引擎不同，不同浏览器的渲染引擎是不同，对相同代码解析的效果会存在差异，HTML (Hyper Text Markup Language) 中文译为：超文本标记语言。让不同的浏览器按照相同的标准显示结果，让展示的效果统一主要是W3C。audio标签在网页中插入音频主要属性有。h1-h6 数字值越小则标题越大。网页元素的外观和位置等页面样式。主要对行内元素和行内块元素使用。img标签主要有以下几个属性。hr 在网页中显示一条线。网页模型和页面的交互。
复制链接

扫一扫