HTML基础（一）

来源：互联网发布：电脑连上网却没有网络编辑：程序博客网时间：2024/05/29 05:15

一直想写一套web前端入门的基础知识汇总，从HTML、CSS、JS到JQuery，后面有可能会加上我现在正在自学的Vue和Angular，但是因为各种各样的原因一直没有开始做这件事（好吧，我承认，最大的原因就是我懒）。今天既然我决定开始干这件事，那么我一定会把这件事做完，但是时间就不太好说了，有可能今年就能写完，如果接下来的日子加班多的话也有可能会拖到明年也说不定。

先说一下我对web前端这些东西的理解吧。

HTML没什么讲的，超文本标记语言，可以理解为网页的骨架。就是给网页做一些标记，然后浏览器能认识这些标记。比如<h1>标签就是告诉浏览器这个标签里的东西是一级标题。我记得我自学那会从网上看视频，李南江老师一直强调HTML标签只是标记作用，它的作用并不是改变样式。虽然你看起来<h>系列标签确实字体会更大，而且会加粗。所以，记住，HTML的主要作用就是标记，就是告诉浏览器标签里的是什么东西。

CSS，层叠样式表，负责网页的样式。有人说CSS是网页的衣服，其实我更愿意理解为CSS时网页的皮囊。说白了，CSS就是改变网页的外观，一个网页好不好看就看CSS了。

JS，JavaScript，一种脚本。我的理解是JS是网页的血液，一个网站前端的运转就看JS了。虽然有很多人鄙视JS，说JS只是一种很简单的脚本语言，并没有什么技术含量，但其实我认为如果真正想要了解JS的人还是有很多东西可以深究的。比如JS的闭包，JS定义一个类、实现继承等等。而且现在前端发展日新月异，各种优秀的框架层出不穷，Node.js的出现又让JS在后台能有所作为。我认为JS还是一种很优秀的语言的。

Jquery是一个JS类库，封装了很多常用的JS方法，而且解决了一些兼容性问题，让我们能够更方便地使用JS。AngularJS和Vue.js是优秀的MVVM前端框架。

好了，扯得有点远了。下面我们进入正题，先开始HTML基础的部门。HTML我觉得主要学习的就是各种标签分别代表什么，他们标记的是什么内容，以及他们的有什么属性，属性的取值是什么，代表什么意思。下面我列举了常用的HTML标签：

一、img标签

1.说明

img标签中的img其实是英文image的缩写所以img标签的作用,就是告诉浏览器我们需要显示一张图片。

2.img标签格式:

<img src="">；

其实img标签中的src是英文source的缩写，所以img标签中的src就是用来告诉img标签,需要显示的图片名称。

3.注意点

- 和H系列标签/p标签还有Hr标签不一样,img标签不会独占一行

- 如果我们手动指定了img标签显示的图片的宽度和高度,有可能会导致图片变形,那么如果又想指定宽度和高度,又不想让图片变形. 我们可以只指定宽度和高度其中的一个值即可

- 只要指定了高度,系统会自动根据高度计算出宽度,只要指定了宽度,系统会自动根据宽度计算出高度,并且都是等比拉伸的,也就是说不会变形

4.img中的其它属性

width: 宽度

height: 高度

title: 用于告诉浏览器,当鼠标悬停在图片上时,需要弹出的描述框中显示什么内容

alt：其实是英文alternate的缩写,它的作用就是用于告诉浏览器,当需要显示的图片找不到时显示什么内容

二、路径问题

给src属性赋值有两种方式

1.通过相对路径赋值(掌握)

相对路径就是每次都从.html文件所在的文件夹开始查找,我们称之为相对路径

1.1同级

同级就是"图片"和".html文件"存储在同一个文件夹中

格式: src="QRCode.jpg"

含义: 在.html文件所在的文件夹中查找名称叫做QRCode.jpg的图片

1.2下级

下级就是"存储图片的文件夹"和".html文件"在同一个文件夹中

格式: src="images/QRCode.jpg"

含义: 在.html文件所在的文件夹中找到名称叫做images的文件夹

然后再在images文件夹中找到名称叫做QRCode.jpg的图片

1.3上级

上级就是"存储图片的位置"和存"储代码的文件夹"在同一个文件夹中

格式: src="../QRCode.jpg"

含义：在.html文件所在的文件夹中找到这个文件夹的上一级文件夹,然后再在上一级文件夹中找到名称叫做QRCode.jpg

其中../代表找到当前文件夹的上一级文件夹

2.通过绝对路径赋值(了解)

绝对路径就是每次都从指定的盘符开始查找

格式: src="C:\Users\Jonathan_Lee\Desktop\HTML基础\QRCode.jpg"

含义: 在C盘下找到Users文件夹,然后在Users文件夹中找到Jonathan_Lee文件夹,然后在Jonathan_Lee文件夹中找到Desktop文件夹,然后在Desktop文件夹中找到HTML基础文件夹,然后在HTML基础文件夹中找到名称叫做QRCode.jpg的图片

注意:

1.路径中不要出现中文,否则可能出现未知问题

2.如果是通过"相对路径"来指定图片,不能跨盘符

2.1例如.html文件在C盘,那么不能去查找D盘图片

三、a标签

1. a标签的作用:

就是用于控制页面与页面之间跳转的。

2. a标签的格式:

<a href="指定需要跳转的目标界面">需要展现给用户查看的内容</a>

3. a标签的属性

3.1 target属性：

target属性的作用就是专门用于控制如何跳转。

_self: 用于在当前选项卡中跳转,也就是不新建界面跳转.默认就是_self

_blank: 用于在新的选项卡中跳转,也就是新建界面跳转

3.2 title属性

a标签中的title和img标签中的title一样,都是用来控制鼠标悬停时显示的提示文本的

4. 注意点:

4.1 a标签不仅可以让文字可以点击,还可以让图片也能够被点击

4.2 一个a标签必须有一个href属性,否则a标签不知道要跳转到什么地方

4.3 如果通过a标签的href属性指定一个URL地址,那么必须在地址前面加上http://或https://

4.4 a标签的href属性除了可以指定一个网络地址以外,还可以指定一个本地地址

5.base标签

base标签就是专门用来统一的指定当前网页中所有的超链接(a标签)需要如何打开

注意点:

1.base标签必须写在head标签的开始标签和结束标签之间

2.如果既在base中指定了target又在a标签中指定了target,那么浏览器会按照a标签中指定的来执行

示例：<head>

<title>11-base标签</title>

</head>

6 假链接

6.1 什么是假链接?

就是点击之后不会跳转的链接我们称之为假链接

6.2 假链接存在的意义:

在企业开发前期, 其它界面都没有写出来,那么我们就不知道应该跳转到什么地方,所以就只能使用假链接来代替.当项目后期其它界面都已经完成时再将假链接体会为真链接

6.3 假链接的格式:

1.#

2.javascript:

3.两者之间的区别:

#的假链接会自动回到网页的顶部,而javascript:的假链接不会自动回到网页顶部

7.锚点定位

7.1 锚点定位实现步骤

7.1.1 给目标位置的标签添加一个id属性,然后指定一个独一无二的值

7.2.2告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少

7.2格式:

<a href="#center">跳转到中部</a>

7.3注意点:

1.通过我们的a标签跳转到指定的位置,是没有过度动画的,是直接一下子就跳转到了指定位置

2.a标签除了可以跳转到当前界面的指定位置以外,还可以在跳转到其它界面的时候直接跳转到其它界面的指定位置

7.4 跳转到其他页面的锚点格式:

<a href="13-锚点测试界面.html#bottom" target="_blank">跳转到锚点测试界面</a>

<h2 id="bottom">我是锚点测试界面33333</h2>

四、列表标签

1.列表标签概述

1.1什么是列表标签?

列表标签的作用: 给一堆数据添加列表语义,也就是告诉搜索引擎告诉浏览器这一堆数据是一个整体

1.2 HTML中列表标签的分类

2.1无序列表(最多)(unordered list)

2.2有序列表(最少)(ordered list)

2.3定义列表(其次)(definition list)

2. 无序列表

2.1无序列表的作用

给一堆数据添加列表语义, 并且这一堆数据中所有的数据都没有先后之分

什么叫有先后之分?

例如: 排行榜

什么叫没有先后之分?

例如: 中国有哪些城市

2.2无序列表格式:

<ul>

<li>需要显示的条目内容</li>

</ul>

li其实是英文list item的缩写

list是列表的意思

item是条目的意思

所以结合起来就是列表条目的意思

2.3注意点:

1.一定要记住ul标签是用来给一堆数据添加列表语义的,而不是用来给他们添加小圆点的

2. ul标签和li标签是一个整体,是一个组合.所以一般情况下ul标签和li标签都是一起出现,不会单个出现.也就是说不会单独使用一个ul标签或者单独使用一个li标签, 都是结合在一起使用

3.由于ul标签和li标签是一个组合,所以ul标签中不推荐包含其它标签,也就是说以后你在ul标签中只会看到li标签

4. 一定更要记住ul标签中最好只放li标签，但是li标签中还可以继续放其它的标签

2.4无序列表应用场景:

1.新闻列表

2.商品列表

3.导航条

3. 有序列表

3.1有序列表的作用:

给一堆数据添加列表语义, 并且这一堆数据中所有的数据都有先后之分

3.2有序列表格式:

<ol>

</ol>

其它用法和ul都差不多,也就是应用场景/注意点都和ul差不多

4.定义列表

4.1定义列表的作用:

4.1.1给一堆数据添加列表语义

4.1.2先通过dt标签定义列表中的所有标题,然后再通过dd标签给每个标题添加描述信息

4.2 定义列表的格式:

<dl>

</dl>

其实dt和dd都是英文的缩写

dt是英文definition title的缩写,所以dt的含义就是用来定义列表中的标题

dd是英文definition description的缩写,所以dd的含义就是用来定义标题对应的描述的

4.3 定义列表的应用场景

1.做网站尾部的相关信息

2.做图文混排

4.4 定义列表的注意点

4.4.1和ul/ol一样, dl和dt/dd是一个整体,所以他们一般情况下不会单独出现,都是一起出现

4.4.2和ul/ol一样,由于dl和dt/dd是一个组合标签,所以dl中建议只放dt和dd标签

4.4.3一个dt可以没有对应的dd,也可以有多个对应的dd,但是无论有或者没有dd都不推荐使用.

推荐使用一个dt对应一个dd

4.4.4和li标签一样,当需要丰富界面时,我们可以在dt和dd标签中继续添加其它标签

阅读全文

0 0