H5全栈开发-web前端-HTML详解
2021-11-15 18:10:48 0 举报AI智能生成
H5全栈前端开发系列，HTML详解，持续更新中...
作者其他创作
大纲/内容
01-HTML-概念
什么是HTML
Hyper Text Markup Language
超文本标记语言
概念理解
超文本
1. 网页内容, 不仅仅有传统的文本文字
图片
音频
视频
...
2. 超链接
使用超链接技术, 可以跳转到其它资源位置
标记语言
使用一些固定的特殊字符, 来标记一块内容含义
例如
zgy
这是一个简单的文本字符串, 没有人了解它代表什么含义
如果加一个标签来标记它
<name>zgy</name>
就能很明白,它是一个姓名
180
这是一个简单的文本字符串, 没有人了解它代表什么含义
如果加一个标签来标记它
<height>180</height>
就能很明白,它是一个身高
在以上案例中
<name></name>
<age></age>
用来标记内容
称作"标签"
帮助我们来理解内容的含义
语义
zgy
180
被标记的内容
在HTML中, 就是由很多很多代表不同含义的标签组成
html
head
body
h1
p
a
img
audio
video
...
标签的作用
用来标识内容语义
程序员阅读理解
开发时, 根据标签来控制指定元素
浏览器解析渲染
学习HTML, 其实就是在学习这些固定的标签, 分别代表什么含义
学习网站
http://www.w3school.com.cn/
https://www.runoob.com/
演示
随意打开一个网站, 右键, 查看源码
都是由很多标签组成
标签内部包裹着真正的内容
02-HTML-发展史
时间表
1993年, HTML 1.0版本
1995年, HTML 2.0版本
1996年, HTML 3.2版本
1997年, HTML 4.0版本
1999年, HTML 4.01版本
2004年, HTML5草案
2008年, HTML5正式版
2000年, XHTML 1.0版本
2001年, XHTML 1.1版本
XHTML 2.0版本
机构组织
IETF
W3C
WHATWG
HTML 和 XHTML 的区别
相同
都是用来编写网页
区别
严格
所有标签都必须小写
在XHTML中，所有的标签都必须小写，不能大小写穿插其中，也不能全部都是大写。
标签必须成双成对
像是<p>...</p>、<a>...</a>、<div>...</div>标签等，当出现一个标签时，必须要有对应的结束标签，缺一不可，就像在任何程序语言中的括号一样。
标签顺序必须正确
标签由外到内，一层层包覆着，所以假设你先写div后写h1，结尾就要先写h1后写div。
所有属性都必须使用双引号
在XHTML 1.0中规定连单引号也不能使用，所以全程都得用双引号。
不会报错, 但是建议遵循
功能
H5更强大一些
HTML5多了很多标签
CSS3多了很多样式
ES6多了很多API和语法糖
代码演示
使用webstorm, 创建一个html文件, 版本选择
示意图
分支主题
03-HTML-文档和标签
概念
HTML文档
使用HTML标签编写的文件, 称作"HTML文档"
特性
纯文本格式
使用记事本打开, 能正常看的
注意
记事本的作用在于, 查看纯文本内容, 不会渲染标签
浏览器才会渲染标签
标记语言做的标记是给浏览器看的
后缀名
.html
.htm
曾经的操作系统要求后缀名不能大于3
历史遗留
演示
浏览器打开一个网页
ctrl + s 保存
HTML标签
概念
HTML文档中每一修饰内容语义的字符串, 称作"标签"
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
标签的作用
不同的标签, 代表不同的语义
标签的格式
单标签
<标签名称 属性名1="值1" 属性名2="值2">
双标签
<开始标签 属性名1="值1" 属性名2="值2"> 内容 </结束标签>
注意
标签是固定的一些, 开发人员无法随意增加修改
单标签, 后面的/ 可以加, 可以不加, 按照编辑器提示来即可
不同的HTML版本, 对应的标签集会有变化
文档结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
</body>
</html>
开发环境搭建
浏览器
IDE
IDE概念
集成开发环境
特点
把开发相关的各种环境和工具都集成到一起
包括
项目的组织管理
编辑
提示
运行
调试
辅助工具
...
开发工具
WebStorm
WebStorm安装使用
1.下载安装
2.创建文件
3.修改主题
File
Import Settings
选择.jar主题文件
下载
http://color-themes.com/?view=index
4. 插件使用
File
Settings
搜素Plugins
下载
https://plugins.jetbrains.com/plugin/8330-activate-power-mode
小技巧
win10多屏
输入法
中文环境使用英文标点
emmet语法-快捷输入
https://docs.emmet.io/abbreviations/syntax/
0 条评论
下一页
