第1章 HTML简介
1、前端技术简介
(1)从Web1.0到Web2.0,网页制作已经变成前端开发了。对于前端开发来说,你要学的并不是什么“网页三剑客”,而是新三剑客:HTML+CSS+JavaScript;
(2)前端最核心的技术是HTML、CSS和JavaScript,不过要想达到真正的前端开发工程师水平,我们还得学习jQuery、Vue.js、SEO、构建工具等知识;
(3)使用前端技术只能开发静态页面。这里要注意一点,即使你使用了JavaScript,做出来的也是静态页面,因为你没有跟服务器进行数据交互。动态页面与静态页面最大的区别在于:是否与服务器进行数据交互;
(4)如果想要开发一个用户体验更好、功能更强大的网站,我们就需要用到后端技术。常见的后端技术有PHP、JSP、ASP.NET;
(5)学习路线:HTML→CSS→JavaScript→jQuery→CSS3→HTML5→Vue.js
2、HTML简介
(1)学习HTML就是学习各种“标签”,然后针对你想显示什么内容来使用相应的标签;
(2)在HTML中,元素即标签,例如“p元素”指的就是“p标签”;
(3) HTML指的是超文本标记语言
作用:HTML 使用标记标签来描述网页内容
第2章 工具
推荐2个前端开发工具:Hbuilder和vscode。
第3章 基本标签
1、HTML结构
图3-6 HTML基本结构
(1)HTML标签
在HTML中,一个网页是从开始,然后到结束的。
(2)head标签
在HTML中,head标签表示页面的“头部”,这里用于定义网页的“特殊内容”。这些内容都是“不可见”的,一般用于告诉搜索引擎这个页面是干什么的。
表3-2 head标签的“内部标签”
标签 | 说明 |
title | 定义网页的标题 |
meta | 定义网页的信息(供搜索引擎查看) |
style | 定义CSS样式 |
script | 定义JavaScript代码 |
base | 直接忽略即可 |
head标签的“内部标签”也非常重要,不过在学习初期只需要感性认知即可,不需要深入。
(3)body标签
在HTML中,body标签表示页面的“身体”,这里用于网页的“展示内容”。这些内容都是“可见”的,一般用于给用户展示这个页面是干什么的。
一句话概括head标签和body标签的区别就是:head标签内定义的内容是给“搜索引擎”看的,body标签内定义的内容是给“用户”看的。
2、HTML注释
在HTML中,注释是为了代码更加容易阅读和理解。其中,注释的内容不会在浏览器中显示出来。
语法:
Vscode注释快捷键:
单行注释:ctrl+/
多行注释shift+Alt+A
3、动态网页与静态网页区别
静态网页:页面元素没有随着时间空间的变化而改变
动态网页:我们不修改代码的前提下,随着时间空间的变化,内容发生改变的页面
4、三个版本和一个标准
HTML4.01------经典版(pc--90%)
XHTML1.0-------语法严格出名(pc--3%)
HTML5----------最新版本(移动端----100%)
w3c-------万维网联盟---编写相关语言的标准
第4章 文本
1、标签总结
表4-7 文章标签
标签 | 语义 | 说明 |
h1~h6 | header | 标题 |
p | paragraph | 段落 |
br | break | 换行 |
hr | horizontal rule | 水平线 |
div | division | 区块(块元素) |
span | span | 区块(行内元素) |
表4-8 文本标签
标签 | 语义 | 说明 |
strong | strong | 粗体 |
em | emphasized | 斜体 |
sup | superscripted | 上标 |
sub | subscripted | 下标 |
2、自闭合标签
HTML标签分为2种:①一般标签;②自闭合标签,两者具有以下区别:
(1)一般标签有开始符号和结束符号,而自闭合标签只有开始符号;
(2)一般标签可以在内部插入文字或其他标签,而自闭合标签不可以;
3、块元素和行内元素
(1) HTML根据元素在浏览器的效果,分为2类:①块元素;②行内元素。
常见块元素有h1~h6、p、div等, 常见的行内元素有strong、em、span等。
(2)行内元素和块级元素的区别?(面试题)
1.行内元素没有宽高,内容撑开,
块级元素默认100%宽度
2.行内元素不能改变尺寸,
块级元素能改变尺寸
3.行内元素默认水平排列,
块级元素独占一行
4.行内元素只能设置左右外边距,
块级元素都可以设置
5.行内元素内部可以容纳其他行内元素,但不可容纳块元素,块元素内部可以容纳其他块元素或行内元素
4、特殊符号
我们只需要记住三个,空格符 “ ”和 “&emsp”,版权符“©”,日元符“¥”
第5章 列表
1、HTML列表
表5-3 3种列表
标签 | 语义 | 说明 |
ol | ordered list | 有序列表 |
ul | unordered list | 无序列表 |
dl | definition list | 定义列表 |
对于有序列表和无序列表,我们可以使用type属性来定义列表项符号。此外,定义列表用得较少,了解一下即可。
2、语法结构:
- style="list-style:none;margin:0;padding:0;">
...
【注意】:
1.同级的li中不能出现其他标签
2.一般我们会清除列表的初始样式(见ul中style属性)
3、语义标签的认识
学习HTML目的在于:在需要的地方,用正确的标签。(语义化)
标签名就代表了标签中内容的意思
定义了文档的头部区域
标签定义导航链接的部分。
定义页面主要内容,它不应包含在文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单。
定义文档中的节(section、片段、板块)。
定义页面独立的内容区域。
定义页面的侧边栏内容。
定义 section 或 document 的页脚。
第6章 表格
1、HTML表格
表6-1 表格标签
标签 | 说明 |
table | 表格 |
caption | 标题 |
thead | 表头(语义划分) |
tbody | 表身(语义划分) |
tfoot | 表脚(语义划分) |
tr | 行 |
th | 表头单元格 |
td | 表行单元格 |
2、语法:快捷键:table>tr*x>td*y
表头单元格1表头单元格2
表行单元格1 表行单元格2 表行单元格3 表行单元格4 表行单元格5 表行单元格63、合并行与合并列
在HTML中,我们可以使用rowspan属性来合并行,可以使用colspan属性来合并列。
第7章 图片
1、图片标签
在HTML中,我们使用img标签来显示一张图片。
语法:
图片描述(供搜索引擎看)" max-width: 100%;font-family: 宋体;box-sizing: border-box !important;overflow-wrap: break-word !important;">图片描述(供用户看)" />
说明:
对于img标签,src和alt这两个是必选属性,一定要添加;而title是可选属性,可加可不加。
src------引入资源的路径来做显示。
width----宽度的设置(水平方向)-------(推荐使用)
1.通过设置百分比调整图片的整体缩放大小(相对于浏览器)
2.通过像素值来调整图片的整体缩放大小
height---高度的设置(竖直方向)
1.百分比不能设置缩放
2.像素值可以起到整体缩放的操作
【注意】一般我们只会使用其中之一来改变图片大小,如果同时使用
必须按照比例来修改,否则图片会失真;
2、图片路径
图片路径分为2种,一种是“绝对路径”,另外一种是“相对路径”。其中我们需要注意一下2点:
(1)绝对路径是图片在你电脑中的位置,而相对路径是图片相对当前页面的位置;
(3)在实际开发中,用的是相对路径,不会用绝对路径(除非是站外路径);
原理:首先在你网页需要显示图片的地方用一个img标签占位,图片的显示必须依靠src引入路径来做显示。
绝对路径----http或者https以及盘符开头(C:D:F:)
相对路径----按照当前你写a标签的文件为起点来找到一条去目标文件的路径
特点:起点不是固定的
同级跳转-----./目标文件.html
向上找寻-----../目标文件.html
同级文件夹下的找寻------./目录名/目标文件.html
3、图片格式
在网页中,图片格式有2种:一种是“位图”,另外一种是“矢量图”。网页中的图片绝大多数是位图,而不是矢量图,因此我们只需要掌握位图即可。
在实际开发中,最常见的的位图格式有3种:jpg、png、gif,区别如下:
(1)jpg可以很好地处理大面积色调的图片,适合存储颜色丰富的复杂图片,如照片、高清图片等。此外,jpg体积较大,并且不支持透明。
(2)png是一种无损格式,可以无损压缩以保证页面打开速度。此外,png体积较小,并且支持透明,不过不适合存储颜色丰富的图片。
(3)gif图片效果最差,不过它适合制作动画。实际上,小伙伴们经常在QQ发的动图都是gif格式的。
第8章 超链接
1、a标签
在HTML中,我们可以使用a标签来实现超链接。
语法:
href=”#”表示在本页刷新,href=”javaScript:”表示不刷新
说明:
对于target属性,我们只需要掌握“_blank”这一个就可以了。
去除超链接的下划线:text-decoration:none
2、链接类型
超链接可以分为2种,一种是“外部链接”,另外一种是“内部链接”。其中锚点链接是一种特殊的内部链接。
第9章 表单
我们常说的表单,指的是文本框、按钮、单选框、复选框、下拉菜单等的统称。在HTML中,所有表单元素都必须放在form标签中。
表单标签共有4个:input、textarea、select和option。其中,select和option是配合一起使用的。
几乎所有的表单标签都有一个value属性,这个属性一般都是为了方便JavaScript或者服务器操作数据用的。
1、input标签
在HTML中,大部分表单都是使用input标签来实现的,其中input属性取值如下表所示:
表9-7 type属性取值
属性值 | 浏览器效果 | 说明 |
text | 单行文本框 | |
password | 密码文本框 | |
radio | 单选框 | |
checkbox | 多选框 | |
button或submit或reset | 按钮 | |
file | 文件上传 |
2、textarea标签
HTML有3种文本框:单行文本框、密码文本框、多行文本框。其中,单行文本框和密码文本框使用的都是input标签,多行文本框使用的是textarea标签。
语法:
row= ”行数” cols=”列数”
3、select标签和option标签
在HTML中,下拉列表由select和option这2个标签配合使用来表示的。
语法:
选项内容
……
选项内容
4、form表单
method属性:提交方式
action属性:提交地址
5、表单的几个常用属性
1.对于input必须加nane属性,服务器才知道你提交的是什么内容
2.对于单选框和复选框:checked:默认选中第一个
3.对于下拉列表select:multiple属性设置下拉可以选择多项;size:设置下拉列表显示几个列表项,取值为整数。option:selected属性默认选中哪一个。
【疑问】
1、表单元素那么多,而且每一种表单自己还有好几个属性,这该怎么记忆呢?
对于初学者来说,表单记忆是最关心但最为头疼的一件事。在HTML入门时,我们不需要花太多时间去记忆这些标签或属性,只需要感性认知即可。忘了的时候,就回来翻一下。此外,vscode也会有代码提示,写得多了自然就会记住了。
2、表单元素是否一定要放在form标签内呢?
表单元素不一定都要放在form标签内。对于要与服务器进行交互(也可以说是跟网站后台进行交互)的表单元素就必须放在form标签内才有效。如果表单元素不需要跟服务器进行交互,那就没必要放在form标签内。