HTML
基础班学习目标
基础班学习目标：能根据psd文件，用html+css布局出符合W3C规范的网页。（美工用ps做出psd图，然后你能做出框架和样式来）
HTML第一天目标
能够写出基本的html页面（里面包含文字、图片、链接等网页元素标签）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GveW7Ozk-1583573761433)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200304100839937.png)]
课程安排
认识WEB
-
认识网页
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WLZ1y4KK-1583573761435)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200304101007397.png)]
总结
网页有图片、链接、文字等元素组成，我们后面的任务就是把这部分网页元素用代码写出来。
-
浏览器（显示代码）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dnhETX61-1583573761436)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200304101301530.png)]
2.1 查看浏览器占有市场份额
查看网站：tongji.baidu.com/data/browse…
谷歌份额占一半。
2.2常见浏览器内核(了解)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zmof2tts-1583573761438)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200304101537637.png)]
-
WEB标准（重点）
3.1 为什么要遵循WEB标准呢？
3.2 WEB标准的好处
3.3 WEB标准构成（重点）
目标： 能说出网页中web标准三层组成。
1、结构(html) 2、表现(css，也就是外观样式) 3、行为(js网页交互及网页模型)
理想状态下，他们三层都是独立的，放到不同的文件里面。（后面会重点讲）
小结
02 HTML初识
html指的是超文本标记语言（Hyper Text Markup Language) 是用来描述网页的一种语言。
html不是一种编程语言，而是一种标记语言。
标记语言是一套标记标签（markup tag）
总结html的作用：网页是由网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析，就可以显示给用户了。
超文本的两层含义：
1、超文本限制：因为它可以加入图片、声音、动画、多媒体等内容。
2、超链接文本：它可以从一个文件跳转到另一个文件，与世界各地主机 的文件连接。
HTML语言语法骨架格式：（要能默写）
<html></head>
文件保存的格式： .html
HTML标签分类：
1，常规元素 （双标签）
比如 ;;
2、空元素 （单标签）
比如
;
; 等。HTML标签之间的关系
1、嵌套关系（父子关系）
比如
<title> </title>
2、并列关系
比如 和
代码开发工具：课程里用的工具是sublime
最新的HTML5的骨架格式：
(这句代码就代表现在是在用html5版本进行编程) （这句话是说明用中文编写的，还有一个常用的是lang="en"） （这句话是让html文件以UTF-8编码保存的，浏览器根据编码去解码对应的html内容。） ... 敲代码默认： 一般情况下统一使用"UTF-8"编码，不要用小写或者其他的形式。
HTML常用标签
1、排版标签
①标题标签：h1 h2 h3 h4 h5 h6
②段落标签：p
③水平线标签
④换行标签\
⑤div和span标签（重点） div span 是没有语义的，是我们网页布局主要的2个盒子。
2、文本格式化标签（熟记）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FWE7EwVj-1583573761439)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200305011251353.png)]
3，标签属性
<标签名 属性1=“属性值1” 属性2=“属性值2”>…</标签名>
4,图像标签img（重点）
语法：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uvBzhuig-1583573761439)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307140601698.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eGfHJkQ0-1583573761440)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307140639137.png)]
重点掌握点：
1，图像标签中哪个属性是必须要写的？ src属性
2，图像标签中alt和title属性有哪些区别？ alt属性是图像不能正常显示时，会在图像位置显示出来描述的文字。title是鼠标悬停在图像位置时显示出来的文本内容，和图像是否能正常显示也没关系。
.5，链接标签（重点）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5gSumK6c-1583573761441)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307141052082.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wtUwUCh9-1583573761442)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307141145685.png)]
.6，注释标签 注释在浏览器窗口是看不到的，只存在于html文档内容里。
.7，路径 （重点、难点）
路径分为相对路径和绝对路径。 常用的而且方便的是绝对路径。要求掌握。
.8，拓展阅读
.8.1，锚点定位（难点）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yFxuyZL8-1583573761442)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307141815847.png)]
.8.2，base标签
语法：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4aGRZFUA-1583573761443)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307160337458.png)]
.8.3，预格式化文本pre标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xn8uQmEW-1583573761444)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307160513418.png)]
.8.4，特殊字符（理解）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hir6sBr5-1583573761445)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307160739638.png)]
重点记住3个常用符号： 空格 大于 小于
HTML第二天目标
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3SEZJWRQ-1583573761445)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307161046447.png)]
1，创建表格
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eZ2Wn9zo-1583573761446)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307161223032.png)]
2，表格属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E6m1PxhK-1583573761447)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307161347972.png)]
3，表格标题
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JDFKCzlZ-1583573761448)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307161611476.png)]
4，合并单元格（难点）
4.1 合并单元格的2种方式
方式1：行与行合并 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TEhrF4uS-1583573761449)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307162557077.png)]
方式2：列与列合并[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cjka39Yo-1583573761449)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307162608004.png)]
4.2 合并单元格的顺序
顺序：先上 后下 先左 后右
4.3 合并单元格三步曲
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4yVrJPF5-1583573761450)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307162226103.png)]
5，表格总结
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bybyvauD-1583573761451)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307162750833.png)]
6，拓展阅读
表格结构划分（了解）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sSiU7YkE-1583573761452)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307163025498.png)]
语法示例：
| ... |
|---|
| ... |
| ... |
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UlFs6zaE-1583573761452)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307163813947.png)]
1，列表标签（重点）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y0wKxNfA-1583573761453)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307164004896.png)]
注意，重点是无序列表和自定义列表。
1.1 无序列表 ul (重点)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gr6VyUvr-1583573761454)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307164157064.png)]
1.2 有序列表 ol
1.3 自定义列表（理解）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tqqbZoXS-1583573761456)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307164417984.png)]
2，表单标签（掌握）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WR851fT0-1583573761457)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307164806379.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nXA3t89L-1583573761457)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307164928569.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3jefQOSs-1583573761458)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307165004970.png)]
2.1 input 控件 （重点）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0pjFyaN6-1583573761459)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307165159696.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Esz1wLxq-1583573761460)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307165245002.png)]
name属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-38yFZuOg-1583573761461)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307165723443.png)]
checked属性，语法形式：
这样就让该项处于默认被选中状态。
2.2 lable标签（理解）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6lgetctJ-1583573761461)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307170402981.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wQkadNSk-1583573761462)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307170453724.png)]
2.3 textarea控件文本域
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eiogxNxn-1583573761463)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307170618304.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ASaQMw3k-1583573761463)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307170712782.png)]
2.4 select下拉列表
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2SvsmiBY-1583573761464)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307170842073.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pbOULfrB-1583573761465)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307170940221.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VDRQVp2m-1583573761466)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307171356505.png)]
3，form表单域
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nI3PKYe3-1583573761467)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307171104336.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IeZG8TD1-1583573761468)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307171425945.png)]
4，团队约定
关于元素属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0j6fM4cj-1583573761468)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307171611539.png)]
5，查文档
经常查文档是一个非常好的学习习惯。
W3C: www.w3school.com.cn/