HTML笔记

一、HTML结构

1.

描述了文件内容是啥类型/格式

.html后缀不是就能描述了嘛??确实可以描述,但是不够完全!!!

2.

lang => language

en => english英语

3.meta

meta表示元

就是指"属性数据"，是页面的属性,和展示内容无关

meta标签是"单标签"

没有结束标签!!!

大部分html标签是成对出现的.开始标签＋结束标签有些是单身狗"单标签"

在html的开始标签中可以写一些属性信息.

写属性信息用键值对.键值对之间使用空格分割.键和值之间使用=分割

二、HTML标签

1.注释标签

ctrl+/ 快捷键可以快速进行注释/取消注释.(Java在IDEA中的注释本身也是ctrl +/ )

这个代码的注释,不能随便乱写!!!

        1.要和代码的逻辑保持一致.

        2.不要传递负能量(尤其是这个注释是能被用户直接看到的)

        3.注释尽量使用中文

2.标题标签

标题标签有6个 ， h1、h2、h3、h4、h5、h6

数字越小，就越大越粗；数字越大,就越小越细

格式：

我们在vscode写标题的时候

直接输入h1

然后点击Tab键直接补全标签格式

编写html 代码,没必要手动输入<>这个东西不太好敲

直接写标签名,就能够提示补全出完整的标签内容.

代码：

html在浏览器显示：

某个标题,具体是多大,多粗呢?

取决于浏览器的实现，不同的浏览器同样是一级标题,可能不一样大,不一样粗

属于浏览器自带的默认样式.

实际开发中,一般会手动指定样式(手动指定每—级标题大小和粗细)(CSS就是干这个事情的)

3.段落标签

p标签表示一个"段落"

当前使用p标签,看起来不是很明显，让p 里的内容多一点,就能看的更清楚一些!!!

使用lorem + tab键

就可以自动生成一串随机的长文本,对于排版测试非常有帮助的!!

同时测试很多个段落咋办？如何给很多个段落同时构造一串随机的文本？

采取的是vscode 中的"列编辑"模式

同时针对多个列来进行编辑的

按住 alt键(空格左侧的那个按钮),鼠标左键在要添加光标的位置点一下

每次点击都会多出一个光标接下来的输入,就会在所有光标位置,同时产生输出!!!

此时保存代码，刷新浏览器页面

两个p标签的内容,不会出现在同一行.

两个p标签之间,会有一定的间距(段间距)

此处的段落间距都是可以通过CSS来控制的

4.换行标签

如果想在一个段落内部换行,直接使用\n或者另起一行,都是不行的!!!

在html里面,换行操作,并不是通过\n或者另起一行来控制的.

要想真正让内容换行,需要使用
标签(单标签)

回车换行会直接被浏览器忽略.

空格的话,多个空格,也会被当成一个空格.

如果要输入多个空格，可以用  

这6个字符,共同构建成了一个空格，这是HTML 的转义字符的写法.

html 中的转义字符还不少.不一一介绍

5.格式化标签

加粗: strong标签 和 b标签

倾斜: em标签 和 i标签

删除线: del标签 和 s标签

下划线: ins标签 和 u标签

不是特别常用，但是用到咱们得知道

用来改变显示的样式的.(样式不是通过CSS来控制的嘛)

因此仍然有少数 html标签可以影响到样式

这些标签都是格式化标签.

这些格式化标签,都能对样式产生影响

当然，不使用这些标签，使用CSS也能做到类似的效果!!

我们发现两种写法没区别

现在虽然strong\em\ins\del这些标签存在,但是已经不再是按照原有的语义来使用了

有几个问题

1.HTML好像非常像XML ??

确实如此.都是成对的标签构成的.

但是XML中的标签是用户自定义的!!(你乐意写啥就写啥)

而HTML 中的标签,则是标准规定的.(你只能按照人家的要求写)

2.这几个标签是默认在一行显示的吗？

是的!!

HTML里面的标签分成两大类(其实不止这两类）

块级元素.：独占一行 h1-h6, p

行内元素：不独占一行 格式化标签

3.倾斜+加粗能做到吗？

使用CSS 可以!!

这些标签,不用背下来.大家大概有个印象就行了!!

后面随着进一步的学习,能够用熟哪个标签就用熟哪个.其他的标签用到再说

6.图片标签

img非常常用的标签,大家要重点掌握.

效果就是在页面上显示出图片!!

我们把图片文件放在html文件同级的目录下

然后img +Tab

img是个单标签.没有结束标签.

img里面有一个必填的属性, src.这个属性表示图片文件在哪里

这里是图片和html在同级目录下,代码是直接写文件名的

如果路径变了,代码写法,也就要发生改变!!!

1.jpg就是在image目录中的~此时代码就得变化写法了~~

这里要加上对应的目录名.此处就是"相对路径"写法~~

有盘符的是绝对路径,没盘符的是相对路径

(相对路径涉及到"工作目录")

这个工作目录就是基准路径，以html所在的文件目录为基准

当前的工作目录是啥,这个事情,变数很大!!!

通过不同的方式来运行这个html，当前的工作目录是可能有差异的!!!

刚才是浏览器直接打开html.这个时候,工作目录就是你打开的 html所在的路径.

后面学习tomcat, tomcat中访问html工作目录又不一样.

包括有的朋友直接点idea的 html文件的右上角浏览器图标，工作目录又不一样.…（不推荐这样使用）

//这个东西是idea自己启动了一个http服务器,然后通过浏览器基于网络通信的方式访问到这个页面.

//页面简单还好.如果页面涉及到前后端交互/比较复杂,这个用法会有很多问题!!!

.. 就表示工作目录的上一级

image 的 src也支持绝对路径.

虽然绝对路径也行,但是一般不建议.

html要能够在多个电脑上都能运行.

如果是绝对路径的图片，发布给别人,别人的电脑上不一定带这个图片~~

image更常见的写法,是使用网络路径.(URL)

在浏览器随便找到一个图片

右键，选择在新标签页中打开图片

网络地址意味着图片是存在于网络上的.

直接使用这个图片的网络地址,把这个地址天道src中

只要用户能够访问到网络,就会自动的从网络上加载到这个图片了~～

这样就不用把图片单独发给用户，用户才能打开图片了

这就涉及到一个问题，你的图片往哪里传??

以前,可以把图片放到gitee,然后就可以得到图片的网络地址，然后就可以在其他页面中使用了(csdn博客)

后来码云把这个功能给禁用了~~

其他的有 图床，有付费的 阿里的oss

还有免费的 七牛云

不嫌慢,也可以用github.......

当然你也可以自己买个阿里云服务器,然后自己搭建一个图床.(但是带宽和存储空间比较小)

那alt="" 是用来干嘛的？

如果图片正常加载,这个没啥效果

如果图片加载失败，alt的内容就会显示在图片位置上.

如果当前路径不正确, 此时这里就有一个图裂了的小图标.

然后就会在后面显示alt的内容了

属性： title

title 就表示鼠标放到图片上之后的一个解释说明

属性： width宽度 height高度

这两个属性的单位是像素（px）

如果只给两个属性中的一个，那图片就会等比例拉伸

px是图像编程中非常重要的单位~～

显示器是如何显示出五彩斑斓的图像的??~

大家如果贴近显示器仔细观察，其实显示器上是有很多的光点~~

每个光点都能表示一个颜色.这些光点联合在一起就构成一张图.每个光点就是一个像素.

如果显示器上光点越多，此时图像就越清晰.分辨率越高

光点越少,图像就越模糊,分辨率就越低～~

720p 1080p 2k 4k 这个就是在描述显示器的分辨率~～

1080p =>1920* 1080(横向上有1920个光点,纵向上1080个光点)（16：9的显示器）

2k => 2560*1440

7.超链接标签 </a>

超链接标签，也叫a标签

链接(Link)和连接(Connection)不是一回事!!毫不相关!!!

所谓链接类似于快捷方式~~

通过链接,就可以找到咱们对应想找的那个实体

. “超链接”跳转范围很大,既可以跳转到当前页面中的某个片段，还可以跳转到其他页面的某个地方...

点击这个标题,就会产生页面跳转

从当前页面跳转到另外一个页面

而这个标题其实就是一个"超链接"标签,也就是a标签~~

怎么验证这是个超链接？

打开开发者工具，左上角选中，鼠标左键点击超链接处，弹出代码

正是a标签

a标签怎么使用呢？

a标签中的href这个属性有很多种写法

可以写一个完整的网址，可以跳转到任意的网站.

点击“这是一个超链接”后，就会跳转到搜狗

还可以只写一个文件名/相对路径,则表示在当前网站内部跳转~~

还可以写成#，表示不进行任何跳转～~（暂不演示）

还可以写成其他类型的文件(不一定是 html),这个时候会触发浏览器的“下载"功能!!!

创建一个2.zip文件

怎么控制点击超链接后是打开一个新页面，而不是在当前页面跳转？

这就需要我们给a标签中加一个属性：target

这样写更符合当下的习惯~~~

8.表格标签

一组标签.通过这一组来构成一个表格.

table 表示整个表格.

tr 表示表格中的一行.

td 表示表格中的一个单元格.

th 也是单元格，用来表示表头的单元格.(字体会更粗文字会居中)

当前阶段,大家要记得手动保存，手动刷新页面.

能不能自动保存？

能，修改vscode 设置

点击左下角设置

找到自动保存，把他换成on就行了

能不能刷新页面？

能，这个事情也叫做"热加载" hot reload

可以搭配 VSCode 中的一些插件(plugin)来做到

像VSCode, IDEA这样的开发工具,自身虽然功能非常强大,非常丰富,但是也不是面面俱到!!

点击左侧的扩展

搜索live server，安装

这里其实有很多其他有意思的技巧!!!

标签名*数量，可以快速生成多个相同标签

再加上Tab键，可以快速生成4个tr标签

再加上Tab键，可以快速生成tr标签和p标签

这些小技巧可以提高开发效率，有兴趣都可以多了解一下

回到表格

这也叫表格?太土了吧!!!

表格起码得带边框吧?才算是一个一个的"格子"

这还是不好看，尺寸不太合适

虽然尺寸大方了,好看了

但边框仔细观察,是"双层"的

table本身有边框.

每个td / th 又有边框

怎么让他只有一条边框呢

能否让元素内容都居中/靠左??

使用纯 html做不到.

需要搭配css

style标签里边的就是css代码

这串代码的意思是所有td标签的文本都居中对齐

之前讲段落标签时,想要段落开头空两格，使用CSS来做，非常简单!!!

9.列表标签

有序列表 ol ordered list

无序列表 ul unordered list

同时，使用li标签表示一个"列表项" list item

其中，无序列表更为重要，实际中的应用更多

比如某著名弹幕网站

这种菜单栏经常就会使用无序列表实现

10.表单标签

在页面上填写信息并提交，这个操作就是通过表单标签来实现的!!!

比如调查问卷

这个搜索框也是一个表单

form标签 （form不是from!!!）

form的功能是进行前后端交互

描述了提交给谁,如何提交等交互细节.....

由于当前还没涉及到服务器，暂时先跳过~

所有其他的表单标签都可以搭配form使用

input标签

通过input标签达到在页面上进行输入的功能

input标签有很多种形态~~～

这些形态就对应了不同的输入方式

1.单行输入框

2.密码框

输入密码,希望输入的内容不要显示出来.而是使用*****这样的方式来隐藏起来

这就是密码框的效果

这个东西就是一些实心的圆点,避免说密码直接展示出来

同时这也有些小用处

手动的在开发者工具中,把type改成text就可以显示出密码框中的内容了

(前提是浏览器记住密码,你自己忘了)

这个技巧不是什么时候都有效的，如果密码框里的内容被加密变换过

这时候我们就只能看到密文，而不是明文

有的网站，有"显示密码"的功能

就是这个思路来实现的

3.单选框

显然,作为一个单选框,不应该同时选中两个选项!!如何让单选框"排他"？

只要把name设成相同的值,此时就是"排他”的

圈太小了，有没有办法，能够更好点一点??

可以通过特殊手段,让点击文字,也能达到选中的效果!!

使用label,把文字和单选框绑定在一起了

绑定的媒介就是id

id属性是html元素的身份标识.

一个页面中的id的值得是唯一的

但是当我们刷新出来的时候，两个单选框都是未选中的

怎么让它默认选中一个呢？

使用checked属性,就可以做到,当页面加载的时候,就自动的选中一个选项

4.复选框

使用checked属性，也可以达到默认选中

5.按钮

value的内容就是按钮上显示的字

点击按钮,就会触发一个"点击事件",在JS中就可以处理点击事件

6.提交按钮

也是按钮,能够触发表单提交.

要搭配form来使用.

(后面在介绍)

7.文件选择器

允许用户选择一个本地的文件，进一步的可以上传到服务器上

浏览器中运行的代码,通常是被严格限制的,通常是不能直接访问硬盘的.

但是也不是绝对不能访问.也有一些特殊操作被允许.

label 标签

搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验.

select 标签

下拉菜单

让它默认选中北京

textarea 标签

input是单行文本框

textarea是多行文本框

11.无语义标签：div 和 span

h1, h6, a, img, ul, ol, input.....都是有语义标签.

什么叫语义"特定的功能和场景"

没有特定的应用场景.，可以适用于大部分的场景～~

前面介绍的标签中,除了input 系列标签无法代替，剩下的标签基本上都可以使用div / span来代替

div和span都是无语义标签.

简单理解, div是一个"大的盒子"，块级元素,独占一行.

span是一个"小的盒子",行内元素,不独占一行.

但是,如果它们可以代替大部分，不就不知道具体的是哪个标签了吗？

上述有语义标签的语义,只是 html 作为报纸的时候,所对应的语义

但是现在页面开发丰富了,此时这些标签都已经不再表示原来的语义

有了div还需要区分什么情况用什么标签吗？

其实完全可以不用区分!!!

div一把梭到底是完全可以的!!!(专业的前端一般不建议这么做,代码可读性会差一些)

这个代码可读性差，不是div带来的,而是页面结构太复杂带来的.

正经前端开发,写页面的时候都是"组件化,模块化"的~~

全部div的话，怎么知道div代表的是什么标签?

这本来就不需要知道

页面中的有些东西,本来就无法用现有的语义标签来表示

比如有的网页游戏，页面上带"游戏摇杆"，这远远超出了原来用来表示“报纸杂志”的标签的认识

实现摇杆这个元素,用啥语义标签合适???

这时候就会需要div