HTML学习笔记_html 学习-CSDN博客

小拓展 :
HTML 可以不公开注释标签。
当前是直接运行的HTML，所以是能够看到的。
实际开发中，往往一个完整的前端项目，要通过一些打包构建工具来进行构建。
这个构建的过程中就会把 HTML中的注释给去掉。
包括对 JS 代码也会进行一些处理（混淆和压缩之类的工作）

另外，这不是一个技术问题。
我们虽然可以通过技术来保证注释不被外面的人看见。
但是！保不齐，你写了一句不该写的注释，被同事看见了。
直接给你截屏发网上了。
【不要怀疑！真的是有这种人。觉得好玩就发出去了】
最好就别写一些多余的注释。

标题标签

标题标签一共有6个
h1 至 h6.
数字越小，里面的内容就越粗越大。
数字越大，里面的内容就越细越小。
写过博客的朋友都知道几级标题吧？
这个 h1 - h6，就相当于 # - ######【一级标题至六级标题】

段落标签

段落标签，叫做 p 标签。
这个就表示一个段落。
毕竟报纸除了标题之外，还有正文。
正文就得分段，所以我们就得通过 p 标签来去表示段落。

换行标签

换行标签：br

格式化标签

格式化标签，其实是针对文本进行一些样式上的调整。

1、加粗: strong 标签和 b 标签
2、倾斜: em 标签和 i 标签
3、删除线: del 标签和 s 标签
4、下划线: ins 标签和 u 标签

以上这四组标签，每组标签中的两个标签都是等价的，效果是相同的。

图片标签

图片，可以使用img标签来表示图片。
img 也是一个单标签。（不需要结束标签）
img 里面可以写很多的属性，其中最终的属性就是 src 属性。
通过 src 描述图片具体所在的位置。

img标签的其他属性

在这里插入图片描述

超链接标签

超链接标签，也就是 a 标签。
它的效果：就是在点击之后能够跳转到其它的页面。
这其实也是我们用户进行交互的一个重要途径。

另外，在本页面内跳转，这个机制。
可以通过锚点链接来实现，也可以通过 JS 来实现。
其中使用 JS 实现，就可以加入一些动画效果（类似PPT的动画效果），用户体验会更好。
注意！上面形容锚点链接的效果，JS也能做到。
瞬间跳转到指定位置，不带任何动画效果。
此时，可能是锚点链接实现的，也可能是 JS 实现的（不做动画效果就行了）。
总得来说：JavaScript，能做到的事情更多。

锚点链接本省属于 HTML 的内容，功能是有限的。
JS 的功能是更强的。

扩展

a 叫做超链接标签。
其中涉及到链接。
说到链接，就不得不说到：连接和链接之间的区别。

连接 - Connection：表示与客户端和服务器通信就绪的一种状态。
1、数据库的JDBC，需要数据库服务器建立连接。
2、TCP 三次握手建立连接。

链接 - Link：表示快捷方式
通过点击某个数据/图片，可以直接打开软件 / 访问网站。

表格标签

表格标签，它是一组标签。【不止一个】

1、table 标签: 表示整个表格
2、tr: 表示表格的一行
3、td: 表示一列
4、th: 表示表头中的一列. 会居中加粗
5、thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
6、tbody: 表格得到主体区域

其实
1、border加上边框
2、使用 th 标签给表格加上表头
3、使用cellspacing 属性去掉单元格之间的间隙
这三个操作也是可以通过 CSS来实现的。
实际开发中，很少会直接使用 table 属性来做

列表标签

列表标签，主要用来罗列一组并列的数据。
列表标签里面一共有三种：
1、无序列表
2、有序列表
3、自定义列表

表单标签

select 标签

textarea标签

在这里插入图片描述

这个东西，就和我们所谓的传统媒体已经有很大的区别了！
这些页面已经变得非常丰富多彩了！
里面有很多丰富的动态交互效果。
现在我们所看到的页面，已经不能单单的认为是一张报纸了。
而得认为是一个“应用程序”。
页面上显示的东西更加复杂，交互的效果更加丰富。
正式因为网页变成了一个“应用程序”，那还需要说什么标题，段落，超链接吗？
这个时候，其实这些概念就越来越弱化了，
相比于有语义标签，无语义标签更适合于“应用程序”的场景。
一个应用程序是多变的。
比如：我们现在要显示一个什么什么东西，这个东西已经没有办法把它套入什么标题，段落，这样的框架里。
因此，这个时候我们也就不用去管标题，段落什么的！
我们就直接使用这种无语义标签来去表示就可以了！

其实我们这里的 div 和 span，它们的功能就可以代替上面绝大部分的有语义标签！
图片，超链接，各种标题什么的，这种都是可以代替的。
只要通过 CSS 设计成一些不同的样式，就可以做到让 div 和 span “长得”和我们原有的那些标签一摸一样。
唯一无法代替的是 form 这一系列的标签。

极端来讲：
我们的一个网页，可以 90%的标签都是 div / span，这是完全可行的！
但是这种做法并不常见。

具体无语义标签是什么？
它就没有任何语义！可以用来表示任何标签！