目录
前言
精读一本书,胜过看N个视频。
这次看的书是:
吴振杰的《Web前端开发精品课 HTML CSS JavaScript基础教程》
17年出版的。
正文
HTML主要学的就是标签了,所以本文着重描述标签。
标签的语义化也是一个很重要的点,它对于提升SEO有着比较小的影响,但是星星之火可以燎原。学好语义化也能让自己的代码写起来更加流畅,知道该用什么标签。
下面,正式开始。
head
head标签的内部标签:
title、meta、link、style、script、base(基本不用)
其中最常用的是title、link、style。
title标签用于创建网页标签的标题,link用于加载外部CSS样式文件,script用于加载外部的JS文件/直接书写JS代码。
meta标签可以进行自动跳转,可以参考这篇文章:meta标签的妙用。
网页乱码解决:<meta charset="utf-8">
对了,还有一个重要的标签就是有关于语言的:
<html lang="en">
en是英文的意思,cn是中文。
此外,中文还分为简中、繁中,感兴趣的可以去了解。
SEO
这节是课本没有多说的,但是是不是提起的,所以单独拿出来写了。
网页的SEO,主要的目的就是提高网站的曝光度。
SEO跟网页的语义化有关系。
比如说,一个网页只能有一个h1标签,meta标签的内容要完善,能用语义化的标签是最好的。
body
网页的主要组成元素:
文字、图片、超链接、音频和视频
判断页面上是否是动态页面的标准——有无后端的交互过程。
body标签中常见的标签:
标题标签:h1-h6,没有h7以上的。
段落标签:p。
文本标签:strong、em、sup、sub、i(字体图标)。
自闭合标签:
水平线:hr。
换行:br。
此外,还有meta、input、img、link。
无语义标签:
div、span
可以把这两个看成两个容器,前者大,后者小。
但是不能用这两个标签去替代有语义的标签,防止SEO排名的降低。
特殊符号:
空格: 
版权符号:©
注册商标:®
商标:™
度数:°
列表
列表分为有序列表和无序列表:
有序列表ol:ordered list。
无序列表ul:unordered list。
子项:
列表项li:list。
ol/ul标签只能配合li标签使用,li标签也是同样如此。
ol/ul标签内部不允许出现非li标签,独立文本也不允许。
样式修改:
标签属性type。
现在一般使用CSS样式修改:line-style。
定义列表:
definition list,简称dl,就是定义列表
definition term,简称dt,就是定义名词
definition description:简称dd,就是定义描述,解析定义名词
语义化:
为什么不能用div标签替代?
为了提高SEO,所以要尽量使用有语义的标签!
表格
表格布局:在web2.0标准被抛弃了。
基本结构:
表格:table标签。
行:tr标签,table row的简写。
单元格:td标签,table data cell的简写。
完整结构:
表格标题:caption,一个表格只能有一个。
表头单元格:th标签,table head cell的简写,内容默认加粗,注意与td标签区分。
一个完整的表格结构应该包括table、caption、tr、th、td标签。
但是这会混乱:th该用在哪里,td又该用在哪里?
其他table标签:
thead:表头区域,一般只包含tr、th标签(行头)。
tbody:表身区域,一般包含tr、th(列头)、td标签。
tfoot:表尾区域,一般只包含tr、td标签。
意义:标签语义化,更易读。
特殊标签:
合并行:rowspan,跨行合并单元格。
合并列:colspan,跨列合并单元格。
img标签
图片标签,常用的三个属性:
src、alt、title。
常见三属性:
src:图片所在路径,路径可以是本地(最好是相对路径),可以是云端,必不可少的属性。
alt、title:制定图片的提示内容。alt是在图片无法正确显示的时候才会出现,是写给浏览器看的,也就是提升SEO;title是鼠标悬停的效果,给用户看的。
图片格式:
图片可以分为位图、矢量图。
位图:
也称为像素图,放大缩小都会失真,色彩丰富。
常见格式:jpg(包括jpeg)、png(支持透明)、git(可以做动画,支持透明)。
矢量图:
也称向量图,一般指的是几何图像,放大缩小不会失真,但是色彩不够丰富。
常见格式:ai、cdf、fh、swf(最常见,也就是flash动画)。
特别注意:字体图片用的也是矢量图。
总结:
位图适合展示色彩丰富的图片,矢量图不适合。
位图的单位是px,而矢量图是数学向量。
位图受分辨率影响,矢量图不会。
网页中的图片绝大多数都是位图,除了字体图标。
超链接:
特别标签:a标签可以包裹除了本身以外的所有标签。
常见属性:
href:路径,可以是相对路径,也可以是绝对路径;可以是本地,也可以是云端。
target:打开方式,默认是_self,原窗口打开;常用的是_blank,新窗口打开。
分类:
文本超链接、图片超链接。
区别:一个是应用在文本,一个是应用在图片。
锚点链接:
含义:内部链接的一种
作用:用于跳转到本页面的指定地方
使用:href标签里面采用#+id的名字进行,跳转的地方采用div+id的方式进行区别。
表单
表单元素:输入框、按钮、下拉菜单。
表单标签:
form、input、textarea、select、option。
form标签:
创建一个表单,就像是创建一个表格,必须要把所有有关标签填入到form标签内部。
常用属性:
name:表单名称,利于后面JS获取元素getElementsByName
method:提交方式
action:提交地址
target:打开方式,跟a标签是一致的
特别注意:
name属性是最重要的,用于区别其他form元素。
method的属性值只有get和post,最常用的是post(安全性更高)。
input:
含义:根据type属性值的不同,有不同的功能,可以是输入框,可以是密码框,可以是单选框......
type属性值:
text单行文本框
password单行密码框
radio单选框
checkbox多选框
button或submit或reset:普通按钮、提交按钮、重置按钮
file文件上传
单行文本框和密码文本框:
type="text"和type="password"
重要属性:
value:默认值,输入框的默认显示内容。
size:文本框的长度,一般不用,也可以使用width来修改。
maxlength:内容的最大长度,一般用于限制输入。
区别:
单行文本框可见内容。
密码文本框不可见内容,但不代表密码框比单行文本框安全,只是能保证本地输入的安全而已。
单选框:
type="radio"
重要属性:
name:组名,跟哪个radio是同一组的,比如说性别。
value:取值,一般用于传递数据,JS常用设置。
checked:是否选中,可以设置默认选择。
特别注意:
如果没有name组名,那就失去了单选的意义。
语义化:
用label标签包裹input框。
label里面的for属性值要跟单选框的id一致,才能进行绑定。
复选框:
type="checkbox"
重要属性(跟radio一致):
name和value必须设置,也可以使用checked进行默认选中。
但是无语义化。
按钮:
type="button"
分为三种常用的按钮:
普通按钮:type="button",一般都是配合JS使用的,功能为自定义。
提交按钮:type="submit",用于表单提交。
重置按钮:type="reset",用于清空表单输入。
特别注意:
三者在外观上没什么区别,只是功能上的区别。
普通按钮,和button标签哪个更常用?
开发的时候,都是使用input来替代button标签的。
下拉列表:
select标签配合option标签,跟无序列表差不多。
select标签:
multiple:可以选择多项,默认是单选选择。
size:显示的列表项个数。
注意:size="1/2/3"在Chrome浏览器中无效,因为Chrome最低是4个。
option标签:
selected:默认选中。
value:选项值。
value是配合JS和服务器数据进行的,一般是用来传递所选择的值。
写在最后
在本文中,并没有给出所有标签,只是写了常用的标签。
由于能力有限,部分描述也许不恰当,还望海涵并多多指教。
精读一本书,胜过看N个视频。
为什么推荐读书?
因为视频的知识很散,你没有一个清晰的脉络。
当然啦,也不是说视频不好,只是在看视频之后,为了巩固知识,还是要看看书本的。
只是书本的编写凝聚了作者的心血,在编排上会更加易懂、符合初学者学习。
总之,多看书是好事。
那么,我们下期再见。