2021-07-13知识总结-优快云博客

本文介绍了HTML5的基本概念及其在人机交互界面中的应用。详细阐述了一个项目从产品经理制定需求，UI设计，前端实现，后端开发到测试的完整流程。同时，讲解了HTML5页面的构成，包括HTML作为骨架，CSS负责样式，JS处理行为。还讨论了前端开发工具如VSCode的使用，并提供了HTML5的基础结构示例。此外，文章涵盖了常用标签如标题、段落、超链接、图片、列表和特殊符号的语法及属性。

1.什么是H5：H5是html的第五代：是一类技术的总称。

2.H5能干什么？所有人机交互的界面

3.一个项目的组成

a.产品经理【根据用户需求，制作需求文案】

b.ui设计【页面的切图】

c.前端【实现ui设计图的界面，与后端的交互】

d.后端【实现相对应的功能：登录】

e.测试【测试程序是否出现BUG】

4.一个界面的构成

html【骨架】+cs是【样式】+js【行为】

w3c ECMA

5.关于前端的发展

6.关于开发工具的使用

vscode的安装；vscode使用【安装插件：chinese(转为中文)；open in brow（在浏览器中运行）；live serve(实时刷新)；如何打开文件夹【文件—— 打开文件夹】如何新建一个网页打开文件夹【文件的后缀为.HTML】;

7.html 的基本结构

<!-- 
    <!DOCTYPE html>
    文档类型 html
    <html>
        <head>
            <meta charset="utf-8">
            设置编码方式为utf-8【国际统一标准】
            <title>标题</title>
            网页的标题
        </head>
        <body>
            网页中显示的内容
        </body>
    </html>
 -->

8.语法：

双标签 <标签名>描述性的内容</标签名>

单标签<标签名>

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

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

9.常用的标签

换行 <br> break的缩写

空格  [一个space键的大小] 补充两个空格:&emsp;[一个汉字大小的空格] &ensp;[半个汉字大小的空格]

标题标签 h1~h6 特点:从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.绝对路径】

width 设置宽度

height 设置高度

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

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

border 设置边框

12.图片超链接

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

13.列表

有序列表

语法:

<ol>
   <li>1</li>
   <li>1</li>
   <li>1</li>
</ol>
应用场景：新闻列表
无序列表
语法:
<ul>
    <li>2</li>
    <li>2</li>
    <li>2</li>
    <li>2</li>    
</ul>

应用场景：新闻列表

自定义列表

语法：

<dl>
    <dt>被描述的文字或图片</dt>
    <dd>起到描述性的内容</dd>
</dl>