1.前端开发是什么？
前端开发是创建Web页面或app等前端界面呈现给用户的过程
核心技术：HTML CSS JavaScript等
2.网页的组成
网页的组成：HTML（结构层）、css（样式层）、JavaScript（行为层）、其他多媒体内容（图片、视频、音频、超级链接等）
注：所有的网页文件都是真实的、物理存在的文件
3.HTML概念
纯文本格式：没有任何文本修饰的，没有粗体、下划线、斜体、图片等的文本，只保存文本，不保存其格式设置。最常见的就是.txt文件
特点:
- 在存储和传输过程中，只能保存文字，不能保存格式，而富文本格式（.rtf）可以保存文本的样式，图片等
- 纯文本格式文件小，更易于传输
- 可以通过直接更改扩展名的方式更改保存格式
- 可以使用任意的纯文本编辑器进行查看和编辑
HTML、css、js文件都是纯文本格式文件
HTML（超文本标记语言），用来搭建网页的结构，一般浏览器查看的网页都是.html或.html文件
超文本：超级文本，可以利用链接访问到另一个文本或多媒体内容的文本，比如图片、音频等
标记：是写给浏览器的一种语法格式，结合普通的文字信息，实现特殊的语义或显示内容，在编辑器中可以编辑或查看，但是在浏览器中不显示
添加标记后的网页
HTML的功能：利用标记给普通的文本添加语义、描述超文本内容，搭建网页的基本结构
4.HTML的语义化
在HTML中，如果没有使用特殊语义的标记，也可以实现网页显示效果，但是利用标记添加语义，可以让网站的结构划分更加清晰。
优势：
- 方便代码的阅读和后期维护
- 便于浏览器或是网络爬虫更好地解析网站内容
- 有利于SEO搜索引擎优化，提供网站的搜索排名
5.HTML基本语法
HTML规范版本：
W3C(world wide web consortium),万维网联盟。专门发布和维护互联网的规范和标准
| 版本 | 发布时间 | 备注 |
|---|---|---|
| HTML1.0 | 1993.06 | 互联网工程小组(IETF)发布的工作草案 |
| HTML3.2 | 1997.01.14 | W3C推荐标准 |
| HTML4.0 | 1997.12.18 | W3C推荐标准，引入了样式表css，实现了结构和样式分离 |
| HTML4.01 | 1999.12.24 | W3C推荐标准，修复了HTML4.0中的漏洞 |
| XHTML1.0 | 2000.01.20 | 在HTML4.01基础上进行的升级扩展和严格化 |
| HTML5 | 2008.1.22 | HTML5 在 2012 年已形成了稳定的版本 |
HTML标签：
-
标签名必须书写在一对尖括号<>内部
<html></html> -
标签分为单标签和双标签，双标签必须成对出现
<p></p> //双标签 <br> //单标签 -
在双标签中，包含开始标签和结束标签，结束标签必须书写关闭符号/,单标签耶也需要进行自封闭书写，但是在HTML中，可以不用。
<div><div> //错误写法 <div></div> //正确写法
HTML元素：
从开始标签到结束标签的所有内容（开始标签、元素内容、结束标签）
<p>这是一段文字内容</p> //整个都是HTML元素
元素内容：
可以是纯文本内容，也可以是其他HTML元素嵌套
<div>
<p>div元素内部嵌套p元素</p>
</div>
注：单标签不能添加元素内容，称为空元素
标签级别：
- 容器级：可以存放任意内容 div,h1
- 文本级：只能存放文字或类似文字的内容（如片、表单元素）p
HTML元素的特性：
-
对空格、换行、缩进等形成的空白不敏感（浏览器识别的是元素的开始和介绍以及互相之间的嵌套关系）
<p>这是一段文字</p><p>这是一段文字</p><p>这是一段文字</p><p>这是一段文字</p> //等价于 <p>这是一段文字</p> <p>这是一段文字</p> <p>这是一段文字</p> <p>这是一段文字</p> -
空白折叠现象：元素内容中有多个空白会被折叠成一个空白
<p> 这 是 一 段文字 </p>
HTML属性：
-
书写在开始标签或单标签之内，与标签名之间用空格进行分隔
-
属性包含：属性名（key）、属性值（value）
3.一个标签可以设置多个属性，属性之间用空格隔开
4.一个标签内的一个属性可以设置多个属性值，值之间用空格隔开
<p k="v"></p>
<p k1="v1" k2="v2"></p> //多个属性
<p k="v1 v2 v3"></p> //
5.HTML基本结构
基本骨架：
在HTML中，
<html> //根标签，所有的标签都要书写在html标签内部
<head> //用于存放title,meta,base,style,script,link标签
<title>网页标题</title> //在head中唯一必须存在且在浏览器中显示的标签
</head>
<body> //定义网页的主体部分，用于存放所有的HTML显示内容，会显示在浏览器窗口部分
网页主体内容
</body>
</html>
title标签作用：
1.给网页命名
2.作为搜索引擎抓取时的关键字，提高SEO搜索引擎优化
3.作为浏览器收藏时默认的网页标题
4.内部的内容会显示在搜索结果的标题部分
DTD：
文档定义类型（DocType Definition ），完整的HTML文件的第一行内容，
作用：告知浏览器该网页使用哪个版本的HTML规范，让浏览器按照对应的版本的HTML语法进行解析网页
<!DOCTYPE html>
命名空间：
在html开始标签设置
- XHTML1.0版本
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> </html>
xmlns=“http://www.w3.org/1999/xhtml”：
xml：可扩展标记语言，使用在传输过程中的规范
xmlns：XML NameSpace，用于该属性所在元素内的所有内容
html元素的命名空间规定了在不同用户的浏览器中标签语义遵循的统一标准，避免出现标签名冲突，这个标准使用的就是一个固定的网址http://www.w3.org/1999/xhtml中的规范
xml:lang="en"表示所有的标签元素内容的语言都是英语，对搜索引擎和浏览器是有帮助的。 lang="zh-cn"表示中文
-
HTML5版本
<html lang="en"></html>
字符集：
head标签内部的meta标签通过过http-equiv属性定义了当前的网页所使用的字符编码。
-
XHTML1.0版本
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> -
HTML5版本
<meta charset="UTF-8">char:character，字符
set：集合
UTF-8:字符集编码，以字节为单位对Unicode万国码进行编码，涵盖了所有人类的语言文字，一个汉字为3个字节大小。
扩展：UTF-8，国际通用字库
中文国标字库：
gb2312：共收入汉字6763个和包括拉丁字母、希腊字母、日文平假名及片假名字母、俄语西里尔字母在内的682个。
gbk：是gb2312的扩展，增加了繁体字，共收入 21886 个汉字和图形符号，其中汉字（包括部首和构件）21003 个，图形符号 883 个，一个汉字为2个字节大小。
在没有网页加载速度要求，或者制作外文网站的时候，使用UTF-8
若是含有大量中文汉字的网站，要求网页加载速度快，使用gbk
注：meta标签声明的字库，必须与编辑器阮籍默认编译字库相同，否则两个字库不匹配，加载时会出现乱码。
6.HTML常用标签
- 注释：
语法：
快捷键：ctrl+/
特点：只能在源代码中可见，在浏览器窗口不显示
用途：1.添加描述性的提示信息，便于阅读代码
2.方便搜索错误
3.可暂时注释一部分代码，便于后期恢复代码
-
标题标签：
h1-h6: h1为最大的标题，h6为最小的标题，都是双标签，容器级的注：1.给元素内容添加对应的标题语义，不负责样式（加粗）
2.不能互相嵌套，是兄弟关系
3.权重：重要程度，其中h1的权重最高，一般放置HTML中最重要的内容，类似logo，
4.h1对于搜索引擎排名也非常重要，所以一个页面只会出现一个h1
-
段落：
p，双标签，文本级标签，给标签内部的内容一个完整段落的语义，不负责内容换行的样式
对于多个段落。需要定义多个p标签，而不能使用br
-
换行：
br，单标签，只是简单的进行强制换行，没有段落语义
-
图像：
img，单标签，在指定的位置插入一张图片（jpg、png、gif）
属性：
属性名 描述 src 图片路径（必须设置） width 图片宽度（px） height 图片高度（px） border 边框，设置边框厚度 title 提示文本（鼠标悬停时） alt 若没有找到图片时，显示的文字 注：1.高度或宽度若只设置了其中一个，另一个会等比例变化，两个都设置，这按照设置值加载
2.border，属性值是数值，数值是几就表示边框的宽度为几像素
3.alt，在找到图片的时候，不会显示，但是有利于SEO搜索引擎优化
-
音频：
audio，双标签，格式（.mp3、.ogg、.wav）
音频加载后不会自动显示播放器的控制条，需要使用controls属性设置
<audio src="audio.mp3" controls="controls"> </audio> -
视频：
video，双标签，格式（.mp4、.ogg、.webm）
视频加载也需要controls属性设置控制条
<video src="video.mp4" controls="controls" ></video> -
超级链接：
a，双标签，在指定位置添加一个超级链接，提供用户进行点击和跳转
属性：
属性 描述 href 链接目标的路径地址 target 指定跳转的页面在哪 title 鼠标悬停显示的文字 注：target的属性值：_self:默认值，在当前窗口打开
_blank:跳转的页面在新窗口打开
<a href="http://www.baidu.com" target="_blank">百度</a>
扫一扫
925
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
