✏️作者：银河罐头
📋系列专栏：JavaEE

🌲“种一棵树最好的时间是十年前，其次是现在”

前言

HTML： 描述网页的骨架。标签化的语言。

        hello world

html 的执行是浏览器的工作，浏览器会解析 html 的内容，根据里面的内容往浏览器放东西。浏览器的工作归根结底还是以汇编的形式在 CPU 上执行。

浏览器就像 JVM 一样， Java 是执行在 JVM 上的，JVM 又是执行在 CPU上的

浏览器对于 html 的语法格式检查没有很严格，即使你写的代码有一些不合规范之处，浏览器也会尽可能的去执行。称为"鲁棒性"。

直接在记事本编写代码，直接在浏览器运行代码。

浏览器的功能就是解析运行网页(HTML, CSS, JS)

开发，是在程序员的电脑上完成的写代码的过程；运行，则是在用户电脑上完成的具体的程序跑起来的过程。

一次开发，N 次运行。

• 使用 VSCode 编写代码

打开目录，

创建代码文件

编辑代码

• 保存代码

写完代码要 ctrl + s 保存。如果没保存，右上角有个 实心小圆点

这里 off 可以改成自动保存。

运行代码(仍然是使用浏览器运行)

在弹出的文件资源管理器中 双击 html 或 拖拽到浏览器中运行

HTML 结构

HTML 代码是通过标签来组织的，形如 用尖括号组织的，成对出现的这个就是标签(tag)，也可以叫做元素(element).

一个标签通常是成对出现的，开始标签结束标签，这俩之间是标签的内容。(少数标签是可以只有一个开始标签的，单标签)

标签是可以嵌套的，一个标签的内容可以是其他一个或者多个标签，此时这些标签构成了一个"树形结构"。

可以在开始标签中给标签赋予属性(attribute)，属性相当于键值对，可以有一个或者多个。

XML 和 HTML 的区别：

XML 也是标签化的格式，有哪些标签，标签叫什么名字？有啥作用？有啥属性。都是程序员你根据你的需求场景自定义的。

HTML 也是标签化的格式，这里有哪些标签？标签叫啥名字？有啥作用？有啥属性？都是有一批大佬们规定好的，浏览器跟按照这份规定来解析实现的。HTML 不支持自定义标签

html：这是一个 html 文件最顶层标签(树根节点)。

head ：存放了这个页面的一些属性(元数据meta data)

body ：存放了这个页面，包含哪些内容。

• 怎么理解属性？

现在我有个文本文件，这个文件的内容是 hello world

这个文件的属性：文件的大小、文件的创建者、文件的修改时间、文件的默认打开程序

快速生成代码框架

!(英文) + tab, 此时能自动生成代码的主体框架.

只需要编辑 body 的内容即可。

这个功能叫做 emmet 快捷键。

主流开发工具都有。(WebStorm 和 idea 也有)

• 细节解释：

HTML 常见标签

注释标签

// # 这些都不是 html中合法的注释

注释的内容是不会在页面中显示的。(但是如果右键，查看网页源代码是可以看到注释的)

vscode 可以使用 ctrl + / 快速注释代码

webstorm 同理

标题标签: h1-h6

h1 最大最粗，h6 最小最细。

    
一级标题
    
二级标题
    
三级标题
    
四级标题
    
五级标题
    
六级标题

HTML 网页最初只是用来代替传统的媒体的报纸/杂志，把报纸杂志搬到电脑里

注意到，这里每个标题都是独占一行的，这和代码的编写没有关系，

    
一级标题
二级标题
    
三级标题
    
四级标题
    
五级标题
    
六级标题

这样写，运行效果不变。

在 html 里面，标签是否换行和代码编写无关，和 标签自身有关。(有的标签独占一行，有的标签不独占)

在 html 源代码中，写的 换行会被忽略。写的多个连续空格会被视为一个。

换行快捷键：

ctrl + enter

段落标签：p

lorem：自动生成一段随机的文本，帮我们调试效果。

每个段落之间，要换行，还有一个明显的段落间距。(这个 间距 通过 css 才能调)

换行标签：br

格式化标签

    变粗！    变粗！    倾斜    倾斜    删除线    删除线    下划线    下划线

这些标签都是不独占一行的。

图片标签：img

网页上是可以显示图片的。

img 有个核心属性，class="lazy" data-src(必填项)

class="lazy" data-src 描述了该图片的路径，路径可以是一个本地的绝对路径，也可以是一个相对路径，还可以是网络路径。

• 绝对路径

绝对路径写法：    

这里 class="lazy" data-src 填的是 绝对路径。

• 相对路径

如果填相对路径，一定要明确工作目录是哪个。

html 的工作目录就是 html 文件所在的目录。

相对路径写法：    

./可以省略    

• 网络地址

右键图片，复制图片地址，此时就得到了图片的网络路径，拿着这个网络路径填写到浏览器里，就能直接打开图片。

或者把这个路径写到 img 里也能显示这个图片。

img 别的属性

• alt 属性：在图片挂了的时候，就会显示 alt 对应的文本。

如果图片地址是错的，

• title 属性

鼠标悬停在 图片上会给出一个提示。

• width/height

描述图片的尺寸

宽度和高度可以同时设置，也可以只设置一个。如果只设置一个，另外一个会等比例缩放。

px 像素。(前端开发中常用单位)

关于图片的尺寸，也可以使用 css 来设置。

超链接 a

链接 link(快捷方式)

"超"链接跳转到的页面是当前网站之外的。

    搜狗    百度    这里的域名可以换成 ip 地址

还有个属性，target, 一般都是写作 target = “_blank”，就可以打开一个新的标签页，而不是替换原有标签页。

表格标签

table 标签表示整个表格

tr 表示一行

td 表示一个单元格

th 表示表头中的一个单元格

    
        
            
姓名
            
电话
        
        
            
张三
            
110
        
        
            
李四
            
120
        
        
            
王五
            
119
        
    

        
        
            
姓名
            
电话
        
        
            
张三
            
110
        
        
            
李四
            
120
        
        
            
王五
            
119
        
    

这个操作就是让页面中 所有的 td 标签中的文字都水平居中(CSS)

列表标签

有序列表 ol ：ordered list

无序列表 ul ：unordered list

列表项 li ：list item

        
四大名著
    
        
三国演义
        
水浒传
        
西游记
        
红楼梦
    
        
        
三国演义
        
水浒传
        
西游记
        
红楼梦
    

表单标签

表单是让用户输入信息的重要途径.

form 标签

使用 form 进行前后端交互，把页面上用户进行的操作/输入提交到服务器上(暂时不展开，后面学了HTTP协议再说)

input 标签

1)文本框

    //单行文本框

2)密码框

    //也是单行文本框，是用来输入密码的

3)单选框

    请选择性别：     男     女

对于单选框需要加个 name 属性，name 属性相同的单选框, 值之间是互斥的。

    请选择性别：     男     女

加入 checked 属性，默认选择

    请选择性别：     男     女

4)复选框

    大学生每天都干啥     吃饭     睡觉     学习

也可以加上默认选项

    大学生每天都干啥     吃饭     睡觉     学习

5)按钮

对于按钮点击之后要干啥， 需要通过 JS 来配合

alert 是 JS 里的一个函数，作用是弹出一个对话框，对话框的内容就是 hello

6)提交按钮

type="submit"

外表和 button 差不多，会触发 form 和服务器的交互。

7)上传文件

select 标签

下拉菜单

            北京        上海        广州        深圳        杭州    

textarea 标签

多行编辑框

上述这些标签也可以称为是"控件", 构成一个图形化界面的基本要素。

无语义标签: div & span

前面的标签都是有特定含义的，而无语义标签是没有特定含义的。无语义标签可以用在各种场景。

div 默认是独占一行的。(块级元素)

span 默认是不独占一行的。(行内元素)

综合案例：展示简历信息

    
    
xxx的简历
    
基本信息
        
        求职意向：软件开发工程师    
    
        联系方式:110    
    
        邮箱:123456@qq.com    
    
        我的博客    
    
        我的 github    
    
教育背景
    
        
            1990-1996 xxx小学        
        
            1997-2000 xxx初中        
        
            2001-2004 xxx高中        
        
            2005-2008 xxx大学        
    
    
专业技能
    
        
            熟练掌握 Java 的基本语法，熟悉面向对象程序设计思想        
        
            熟练常用的数据结构和算法，比如顺序表，链表，二叉树，堆，哈希表等        
        
            熟练操作系统中的典型概念，熟练掌握并发编程，对于多线程，线程安全，加锁等操作有深刻的认识        
        
            熟练掌握网络编程，熟悉网络通信原理，熟悉 TCP/IP 协议栈中的典型协议工作机制        
        
            熟练掌握 SQL,能够进行基础的增删改查, 熟悉 mysql 的索引和事务等机制        
    
    
我的项目
    
        
            
留言墙
            
开发时间: 2008-2011
            
功能介绍
            
                
支持留言发布
                
支持匿名留言
            
        
        
            
学习小助手
            
开发时间: 2011-2012
            
功能介绍
            
                
支持错题检索
                
支持同学探讨
            
        
    
    
个人评价
    在校期间，学习成绩优异, 多次获得奖学金    

HTML 只是描述了页面的骨架结构. 使用 CSS 可以针对页面进行进一步美化.

来源地址：https://blog.csdn.net/qq_63983125/article/details/129444794