001day（介绍html和基础的标签）-CSDN博客

本文链接：https://blog.csdn.net/w296932099/article/details/118709315

本文详细介绍了HTML5的基本概念、用途、项目开发流程，以及网页的组成部分。HTML5不仅用于网页开发，还可应用于小程序、混合应用、原生应用、桌面应用和游戏开发等。此外，文章还涵盖了HTML5的语法、常用标签、开发工具、特殊字符、列表和图片标签等基础知识，并提及了前端开发的角色和职责。

摘要由CSDN通过智能技术生成

一、今日学习内容

1、首先我们应该了解什么是html5？

答：我们今天所谈论的HTML5这个词已经产生了一些变化，它代表的已经不再是简单的HTML网页设计标准，而是围绕着HTML这个东西以及他周边的一系列网页相关技术的总称，这其中既包含了HTML+css的网页制作，也包含了JavaScript这门编程语言的相关开发，这就是HTML5。

2、html5能做什么？

答：a.网页开发（用的最多的，只要是浏览器能看到的，都需要用到前端）

b.小程序，公众号（微信，支付宝，头条等好多都用前端语言进行开发）

c.Hybrid App(混合应用开发，手机应用例如，支付宝，淘宝等)

d.Native App(原生应用开发，例如React Native 等框架的开发）

e.桌面应用开发（电脑软件）

f.游戏开发（例如，微信小游戏，其实好多游戏都可以用前端语言进行编写）

g.后端开发（前端学到的nodejs可以实现后端的开发）

3、项目开发流程

产品经理 UI设计

咱们的前端

后台开发测试

4、网页的组成部分

html结构（可以理解为框架就像我们的骨架一样）由w3c制定

css表现（就像我们穿的好看的衣服和化妆的修饰可以让我们把更好看的一部分展现给别人看）由w3c制定

js行为（像我们人的种种动作，来人与人之间相互沟通作用）由ecma制定

5、组织机构解析

（1）W3C( World Wide Web Consortium )万维网联盟，创建于1994年是Web技术领域最具权威和影响力的国际中立性技术标准机构。 W3C (制定了结构(xhtml、xml)和表现(css)的标准，非赢利性的。)

（2）ECMA(European Computer Manufactures Association) 欧洲电脑场商联合会。 ECMA制定了行为(DOM(文档对象模型)，ECMAScript)标准

（3）WHATWG网页超文本应用技术工作小组是：一个以推动网络HTML 5 标准为目的而成立的组织。在2004年，由Opera、Mozilla基金会和苹果这些浏览器厂商组成。

6、开发工具（编辑器）

可以用visual studio code或者hbuilderx，还有一些别的编辑器都可以的，在网上下载就行了。

7、打开编辑器建好文件夹就会出现对应如下代码

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

8、html的语法

a、常规标记、双标记

<标记属性=“属性值” 属性=“属性值”>文字内容</标记>

b、空标记、单标记

<标记属性=“属性值” 属性=“属性值” />

「接下来介绍一些常用的标签」

9、空格

&nbsp“非断行空格”，是常规空格的宽度，可运行于所有主流浏览器

&ensp“半角空格”，全称是En-Space，en是字体排印学的计量单位，为em宽度的一半

&emsp“全角空格”，全称是Em-Space，em是字体排印学的计量单位，相当于当前指定的点数。

10、标题标签h1～h6，逐渐减小，有换行作用，单标签

11、倾斜标签

12、超链接标签 <a href=“路径” 注：title=“鼠标悬停上去之后的提示信息” target=“规定在何处打开文档">内容</a>

Target属性：规定在何处打开文档。

A.target=“_self“ 当前页面打开

B.target=“_blank“ 新窗口打开

注：可以在head上统一应用省的在body里面每一个都要加跳转方式，在head中写（base target="blank/self"）

13、插入图片

相对路径：是把图片放在vsc里或者桌面（../是返回上一级别）

绝对路径：是图片的网络地址

14、alt是图片打不开之后显示的内容

15、hr分割线,单标签，可以实现换行，属性width宽度，color颜色（切记不能设置高度）

16、注释标签

17、有序列表

<ol>

</ol>

18、无序列表

<ul>

</ul>

19、自定义列表

<dl>

<dt>被描述的内容或者图片</dt>

<dd>描述性的内容</dd> （上面图片下面是对图片的描述字体）

</dl>

20、快捷调整代码格式快捷键alt+f+shift （苹果的是option+shift+f）

21、div标签（做布局用的）双标签

22、特殊符号  空格 © 版权© &reg；商标®

23、上标

下标

24、加粗 1⃣、加粗的内容2⃣、 加粗的内容

25、段落标签 段落文本内容

26、强制换行 注意：这个是单标签，前面不用写

二、知识点回顾

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基本结构

<！--

<！doctype html>

文档类型 html

<html>

<head>

</head>

<body>

</body>

8、语法：双标签<标签名>描述性内容</标签名>

单标签<标签名>

属性：在标签名后面第一个尖括号里面

属性值：与属性用等号相连接

9、常用标签

换行 break的缩写

空格&nbsp；（一个space键的大小）补充两个空格&emsp；（一个汉子大小的空格）&ensp；（半个汉子大小的空格）

标题标签特点：h1-h6 逐渐减小，自动换行，有行高，为双标签

段落标签p 特点：自动换行，双标签，有行高

文本格式化标签加粗/倾斜 b，strong/i，em 特点：双标签不能实现换行

10、超链接 <a >

属性：href跟链接跳转的网址

title设置鼠标停止时的提示信息

target设置网页的打开方式_slef（在当前页面）_blank（在新的界面中打开）

延伸知识点：base标签

语法：<base target=“设置的打开方式”>注意这个是在head中设置的

11、图片

语法：<img src=“图片的路径”>

属性：src图片的路径（A、相对路径:

a：图片和html文件在统一文件夹中时直接用图片的名称即可。

b：图片在html文件的下一级或者多级文件时，去掉路径的相同部分，然后保留图片不同的部分，最后加上图片的名字。

c、图片位于html文件的上一级或者多级文件时，../找到上一节，直到用../找到与图片的上级文件位于同一文件夹时，去掉路径的相同部分，然后保留图片不同的部分，最后直接加上名字。

B：绝对路径：直接复制图片的地址就ok了）

width设置宽度

height设置高度

title设置鼠标悬停时提示的信息

alt设置图片走丢之后的提示信息

border设置边框

12、图片超链接

嵌套标签的使用注意标签的位置

13、列表

有序列表

语法：

<ol>

</ol>

应用场景：新闻

无序列表

语法：

<ul>

</ul>

应用场景：新闻

自定义列表

语法：

<dl>

<dt>被描述的内容或者图片</dt>

<dd>描述性的内容</dd> （上面图片下面是对图片的描述字体）

</dl>

14、特殊符号 &copy；商标 &reg；