H5全栈开发-web前端-HTML详解
2021-11-15 18:10:48 0 举报AI智能生成
登录查看完整内容
为你推荐
查看更多
H5全栈前端开发系列，HTML详解，持续更新中...
作者其他创作
大纲/内容
Hyper Text Markup Language
超文本标记语言
什么是HTML
图片
音频
视频
...
2. 超链接
超文本
<name>zgy</name>
如果加一个标签来标记它
zgy
<height>180</height>
180
例如
称作"标签"
用来标记内容
语义
帮助我们来理解内容的含义
<name></name><age></age>
被标记的内容
zgy180
在以上案例中
html
head
body
h1
p
a
img
audio
video
标记语言
概念理解
用来标识内容语义
程序员阅读理解
浏览器解析渲染
标签的作用
学习网站
http://www.w3school.com.cn/
https://www.runoob.com/
都是由很多标签组成
标签内部包裹着真正的内容
演示
01-HTML-概念
XHTML 2.0版本
时间表
WHATWG
W3C
IETF
机构组织
都是用来编写网页
相同
在XHTML中，所有的标签都必须小写，不能大小写穿插其中，也不能全部都是大写。
所有标签都必须小写
像是<p>...</p>、<a>...</a>、<div>...</div>标签等，当出现一个标签时，必须要有对应的结束标签，缺一不可，就像在任何程序语言中的括号一样。
标签必须成双成对
标签由外到内，一层层包覆着，所以假设你先写div后写h1，结尾就要先写h1后写div。
标签顺序必须正确
在XHTML 1.0中规定连单引号也不能使用，所以全程都得用双引号。
所有属性都必须使用双引号
严格
HTML5多了很多标签
CSS3多了很多样式
ES6多了很多API和语法糖
H5更强大一些
功能
区别
分支主题
示意图
代码演示
HTML 和 XHTML 的区别
02-HTML-发展史
标记语言做的标记是给浏览器看的
浏览器才会渲染标签
注意
纯文本格式
.html
曾经的操作系统要求后缀名不能大于3
历史遗留
.htm
ctrl + s 保存
浏览器打开一个网页
后缀名
特性
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>
文档结构
所以为了防止解析错误
使用DTD来声明版本
http://www.w3school.com.cn/tags/tag_doctype.asp
链接
严格的
一些标签禁用
Strict
Transitional
Frameset
HTML
XHTML
分类
只用它就可以
不同的版本有不同的版本声明规范
1. 必须写在第一行
2. 大小写不敏感
http://www.w3school.com.cn/html/html_doctype.asp
3. 不是HTML标签
浏览器有自己的识别机制
4. 不写也可以
DTD文档声明
此元素可告知浏览器其自身是一个 HTML 文档所有的标签都写到它的内部
主体语言是英文
en
主体语言是中文
zh-CN
lang
自带翻译的浏览器会根据lang判定是否需要弹出自动翻译
<html>
图标
标题
关键字
描述信息
<meta charset="UTF-8">
<meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。">
网站的SEO相关信息
js
css
加载外部的
网站配置信息
一般不会展示给用户看
展示在浏览器标签当中的标题
<title>
这个标签用来描述HTML网页文档的属性
字符集概念
解决方案
GBK包含全部中文字符；
gbk(gb2312)
UTF-8则包含全世界所有国家需要用到的字符
utf-8
常用中文编码
乱码问题
<meta>
内部子标签
<head>
文本
<body>
意义
03-HTML-文档和标签
浏览器
把开发相关的各种环境和工具都集成到一起
特点
项目的组织管理
编辑
提示
运行
调试
辅助工具
包括
集成开发环境
IDE概念
WebStorm
开发工具
1.下载安装
2.创建文件
选择.jar主题文件
Import Settings
File
http://color-themes.com/?view=index
下载
3.修改主题
搜素Plugins
Settings
https://plugins.jetbrains.com/plugin/8330-activate-power-mode
4. 插件使用
WebStorm安装使用
IDE
win10多屏
中文环境使用英文标点
输入法
https://docs.emmet.io/abbreviations/syntax/
emmet语法-快捷输入
小技巧
开发环境搭建
HTML-详解
0 条评论
回复 删除
下一页
