h5基础简介

最新推荐文章于 2025-06-11 18:58:14 发布

原创最新推荐文章于 2025-06-11 18:58:14 发布 · 1.8k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html

本文介绍了HTML5的基本概念，包括它的作用和网页构成部分。讲解了前端开发中的HTML作为骨架，CSS负责样式，JS处理行为。详细阐述了HTML5的基本格式，列举了常用的HTML标签，如换行、标题、段落、文本格式化、超链接、图片、列表及特殊符号等，帮助初学者理解HTML5的基础知识。

1.什么是h5：html的第五代；是一类技术的总称；
2.h5可以干什么？所有人机交互的界面
3.一个项目的组成
a.产品经理【根据用户需求，制作需求文档】
b.ui设计【页面的切图】
c.前端【实现ui设计图的界面，与后端的交互】
d.后端【实现相对应的功能:登录】
e.测试【测试程序是否存在bug】
4.一个界面的构成：html【骨架】+css【样式】+js【行为】
遵循的标准：w3c ECMA
5.关于前端的发展（了解即可）
6.关于开发工具的使用
vscode的安装；vscode使用【安装插件：chinese(转为中文)open in brow(在浏览器中打开) live serve(实时刷新)】；如何打开文件【文件=>打开文件夹】
新建文件夹/文件；如何新建一个让网页打开的文件【文件的后缀名为html】；
7、HTML基本格式：
输入！或者html5自动生成格式（如下）：

<!DOCTYPE html>（文档类型为：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>（title为网页上方名字）
</head>
<body>
</body>
</html>

8、常用标签
（1）换行 【单标签，break的缩写】
（2）空格：
将来的你一定会感激现在奋斗的自己 

将 来的你一定会感激现在奋斗的自己 

将&emsp;来的你一定会感激现在奋斗的自己 

将&ensp;&ensp;来的你一定会感激现在奋斗的自己 

（3）标题标签<h1~h6></h1~h6>【双标签，有行高，自动换行，从1到6字号逐级变小】
（4）段落【双标签，有行高，自动换行】
（5）文本格式化【双标签，不能自动换行】
a.加粗
b.倾斜
（6）超链接
<a href="http://www.baidu.com">百度两下你就知道</a>
 默认为在自身网页打开链接。
<a href="http://www.baidu.com" target="_blank">百度两下你就知道</a>
target=“_blank”在新的页面中打开
<a href="http://www.baidu.com" target="_self">百度两下你就知道</a>
 target=“_self”在自身网页打开（默认）
<a href="http://www.baidu.com" title="我是超链接">百度两下你就知道</a>
 title=“XXXX”鼠标悬停时的提示性内容
<head>
<base target="_blank/_self">可以统一更改默认的打开方式，
如果想链接有独自的打开方式在自己的标签中写明就可以实现了
</head>
（7）图片
相对路径：相对比而言【参照物的是HTML文件】
a.图片跟html在同一文件夹下时，直接用图片的名称
b.图片位于html下一级以及多级文件时，html文件全部路径和图片的全部路径相对比，去除相同的部分，留下图片相对于html文件不同的部分，最后加上图片的路径
c.图片位于html的上一级或者上多级文件，用../找到html上级文件，直到html上级文件和图片的上级文件在同一个文件夹下时，去除点路径相同的部分【参照物时html的上层文件】，留下不同的部分，最后加上图片的名称
绝对路径：
a.相对于电脑而言【直接复制路径+图片名称即可】
b.相对于网址而言【右击图片即可复制图片的路径，复制图片的路径】

书写格式：<img src="../皮卡丘.jpg" width="500px" border="10px" alt="图片走丢啦" title="皮卡皮卡~丘~">
属性：
src 代表图片路径
width为宽度
height为高度（宽高尽量不要同时设置，容易失帧）
border为图片边框
alt为图片加载不出来时显示的提示文字
title为鼠标悬停时显示信息
（8）有序、无序和自定义列表
A．有序列表

B．无序列表

C．自定义列表：京东示例【标签嵌套，嵌套注意标签不要混着写】

a href="http://www.baidu.com" target="_blank"
<dl>
<dt></dt>（被描述的内容如图片等）
<dd>这是一只皮卡丘</dd>（描述的文字）
</dl>
</a>