0


前端HTML总结

前言

精读一本书,胜过看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个视频。

为什么推荐读书?

因为视频的知识很散,你没有一个清晰的脉络。

当然啦,也不是说视频不好,只是在看视频之后,为了巩固知识,还是要看看书本的。

只是书本的编写凝聚了作者的心血,在编排上会更加易懂、符合初学者学习。

总之,多看书是好事。

那么,我们下期再见。

标签: 前端 html

本文转载自: https://blog.csdn.net/m0_54066656/article/details/140936925
版权归原作者 雷特IT 所有, 如有侵权,请联系我们删除。

“前端HTML总结”的评论:

还没有评论