H5前端学习日志day1
- HTML5的概念
- H5能做什么
- 项目开发流程
- 网页的组成部分
- 文件命名规范
- HTML的语法
- HTML文件和基本结构说明
- HTML基本标签
- HTML文本标签
- HTML列表标签
- 图片
- 超链接
- 布局标签
- 表格
- 特殊符号
HTML5的概念
我们今天所谈论的HTML5这个词已经产生了一些变化，它代表的已经不再是简单的HTML网页设计标准，而是围绕着HTML这个东西以及他周边的一系列网页相关技术的总称，这其中既包含了HTML+css的网页制作，也包含了JavaScript这门编程语言的相关开发，这就是HTML5。
–H5是HTML的第5个版本–
–H5是一门技术总称–
–HTML:超文本标记语言–
–w3c:万维网联盟–
–xhtml:可扩展的超文本标记语言。–
H5能做什么
1.网页开发（用的最多的，只要是浏览器能看到的，都需要用到前端）
2.小程序，公众号（微信，支付宝，头条等好多都用前端语言进行开发）
3.Hybrid App(混合应用开发，手机应用 例如，支付宝，淘宝等)
4.Native App(原生应用开发，例如React Native 等框架的开发）
5.桌面应用开发（电脑软件）
6.游戏开发（例如，微信小游戏，其实好多游戏都可以用前端语言进行编写）
7.后端开发（前端学到的nodejs可以实现后端的开发）
项目开发流程
产品经理->UI->前端->后端->测试->运维
网页的组成部分
HTML结构+CSS表现+JS行为
文件命名规范
1、文件命名规则：用英文，不建议使用中文
2、名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；必须以英文字母开头。
3、命名的时候最好使用语义化比较强的英文
HTML的语法
1、常规标记、双标记
<标记 属性=“属性值” 属性=“属性值”>文字内容</标记>
2、空标记、单标记
<标记 属性=“属性值” 属性=“属性值” />
属性：对标签进行细节描述
通用属性：几乎所有标签都有的属性（style、class、title、id）
HTML文件和基本结构说明
1、VS Code快捷键
ctrl + / 添加或者取消注释
ctrl + S 保存
!+回车 生成基本结构
2、HTML文件基本结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15// HTML文件基本结构 <!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><!-- 标题 --> <style><style/><!-- 属性 --> </head> <body> <!-- 代码正文 --> </body> </html>
HTML基本标签
1、标题
hn 【n代表1-6】
h1-h6文字逐渐变小，强调逐渐降低
1
2<h1>Hello World!</h1>
2、段落
p
1
2<p>这是一个段落</p>
3、强制换行
br
1
2
3
4<h1>Hello World!</h1> <br> <p>这是一个段落</p>
4、水平分割线
hr
1
2<hr/>
HTML文本标签
1、变大
big
1
2<big>hello<big/>
2、变小
small
1
2<small>hello<small/>
3、倾斜
i 和 em
1
2
3<i>内容</i> <em>内容</em> //推荐使用em
4、加粗
b 和 strong
1
2
3<b>内容</b> <strong>内容</strong> <!--推荐使用strong-->
5、上标
sup
1
2<sup>内容</sup>
6、下标
sub
1
2<sub>内容</sub>
7、删除线
del
1
2<del>内容</del>
HTML列表标签
1、有序列表
1
2
3
4
5<ol type="A" start="4"> <li>有序列表</li> <li>有序列表</li> </ol>
1
2type：序号类型 start ：开始的序号
2、无序列表
1
2
3
4
5<ul> <li>无序列表</li> <li>无序列表</li> </ul>
1
2注意：ol或者ul里面只能有li,li外面必须被ol或者ul包裹,li里面可以有任意的标签
3.定义列表
1
2
3
4
5<dl> <dt></dt> <dd></dd> </dl>
图片
1
2<img src='图片路径' alt='替换文本' width='宽度' height='高度' title='提示文本'>
说明：图片的多种格式都认识，修改宽度，高度会等比例变化，反之亦然。
1、绝对路径
绝对路径是指文件在硬盘上真正存在的路径。
2、相对路径
就是相对于自己的目标文件位置。
同级：直呼其名
上级: …/
下级: /
当前文件： ./
超链接
1
2<a href="路径" title="鼠标悬停上去之后的提示信息" target="规定在何处打开文档">内容</a>
target:
_self代表在当前标签页打开新页面
_blank代表在新的标签页打开新页面
布局标签
排版中用于实现样式的结构性标签
div:盒子标签、块标签
span:无意义标签
大多数时候选择div,当一行文字中有谁有特殊效果，选择用span
表格
1
2
3
4
5
6<table border='设置边框的粗度' cellspacing='双线边框之间的间隔 0' cellpadding='内容和边框之间的间隔'> <tr> <td></td> </tr> </table>
table代表表格
tr代表行
td代表单元格
6行5列快捷生成 table>tr[通配符]6>td[通配符]5
合并的步骤：
1.实现基本表格
2.判定要合并的单元格是跨行还是跨列，给左上的单元格设置对应的属性 【跨行rowspan 跨列colspan】
3.保存，看错误效果，删掉对应行多的单元格
特殊符号
&符号名;
小空格
大空格
版权 ©
商标 ®
大于 >
小于 <
最后
以上就是危机睫毛膏最近收集整理的关于HTML基础HTML5的概念H5能做什么项目开发流程网页的组成部分文件命名规范HTML的语法HTML文件和基本结构说明HTML基本标签HTML文本标签HTML列表标签图片超链接布局标签表格特殊符号的全部内容，更多相关HTML基础HTML5内容请搜索靠谱客的其他文章。
发表评论 取消回复