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键的大小] 补充两个空格: [一个汉字大小的空格]  [半个汉字大小的空格]
标题标签 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>
14.特殊符号 © 商标 ®