【JavaWeb】前端之HTML基础认知

目录

1、第一个HTML程序

1.1、创建第一个HTML文件

1.2、HTML文件的基本结构

2、HTML常见标签

2.1、注释标签

 2.2、标题标签：h1-h6

 2.3、段落标签：p

2.4、换行标签：br

2.5、格式化标签

2.6、图片标签：img

2.7、超链接标签：a

2.8、表格标签

2.8.1、单元格的合并

2.9、列表标签

2.10、表单标签

2.10.1、input标签

 2.11、select标签

 2.12、textarea标签

 2.12、无语义标签

3、HTML特殊符号

---

1、第一个HTML程序

1.1、创建第一个HTML文件

我们创建一个文本文件，将其后缀名改为html，这样我们就创建出了一个在浏览器上可以直接运行的文件。

现在我们在这个文件中写入内容，双击这个文件，就会在你电脑的浏览器上运行出，你文件中的内容。

编写代码我们可以这样实现，但是我们之前学习Java的时候，代码哪里出现问题了，我们可以通过打断点调试 ，那么HTML这样编辑的时候，出现的页面效果不符合我们心里的预期效果，我们该怎样进行调试呢？这里以Microsoft Edge浏览器为例。

我们可以直接在浏览器上进行调试，直接按F12打开浏览器的开发者工具对html程序调试，也可以在浏览器页面的任意位置单机鼠标右键，选中检查，就可以出现下面的页面。

在流量器的开发者工具上调试html代码，根据自己的想法随意改变，直到调试出自己想要的样式，就可以将html文件中的相应的内容修改掉 。在浏览器中修改的内容，不会直接修改掉我们创建的以html结尾的文件中的内容，所以在浏览器中我们可以根据自己的想法随意修改内容。

 编译HTML程序的方式

第一种就是上面图片中看到的，我们可以直接在文本文件中编写HTML程序，这种写法是最原始的；第二种方式就是使用编译器，小编这里推荐使用Visual Studio Code，别的编译器小编没有用过，但是这个编译器写HTML程序非常的方便，就像我们写Java使用idea一样。

1.2、HTML文件的基本结构

在VS code编译器上，我们打开创建好的HTML文件，直接输入！，就会出现提示，我们只需要按Tab键，就可以直接生成HTML文件的基本结构了。

 这里的 申明当前文档是什么类型的文档，表示当前的文档是一个HTML文件。

这里的中的lang属性为en时表示当前页面是一个"英语页面"；当lang属性为cn时表示当前页面是一个"中文页面"。当我们设置lang=en时，在浏览器上打开这个文件的时候，编译器就会提醒是否将这个英文页面翻译为中文的。

 这里的描述页面的字符编码方式，没有这一行可能会导致中文乱码。

    中的name = "viewport"表示的设备的屏幕上能用来显示我们的我也的那一块区域；content="width=device-width, initial-scale=1.0"表示设置可视区和设备宽度等宽，并设置初始缩放为不缩放。

html的基本结构

1. html标签是整个html文件的根标签，他也是一个双标签。
2. head标签描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。head标签中的title标签中写的是文档的标题，这个标签是一个双标签，成对出现。
3. body标签用来定义文档的主体。它也是一个双标签，每次都是成对出现。

标签之间的关系 

就html、head和body这三个标签为例，我们来了解一下这个三个标签之间的关系。

由于head和body标签都包在html标签中，所以head和body标签之间属于兄弟关系。所以head标签和body标签与html标签之间属于父子级关系。

---

2、HTML常见标签

2.1、注释标签

注释标签和我们在Java中的注释一样，不会显示在界面上，只是在代码编写的时候用来标注提高代码的可读性。我们可以直接按ctrl+/快捷键快速进行注释和取消注释。

    
    
    
    


    
    这是一个页面

注释的原则：

1. 要和代码逻辑一致
2. 经量使用中文
3. 不要传递负能量

---

 2.2、标题标签：h1-h6

标题标签一共有六个，从h1到h6字体逐渐减小，这六个标题标签也是双标签，他们成对出现。

    
    
    
    


   
这是h1标签
   
这时h2标签
   
这是h3标签
   
这是h4标签
   
这是h5标签
   
这是h6标签

 这里每个标签都是独占一行

---

 2.3、段落标签：p

HTML中使用p标签表示段落，每一个p标签都独占一行，段落之间有一个明显的段落间距。p标签也是一个双标签，成对出现。

语法格式：

内容

代码示例：

    
    
    
    


   
在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像
    素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素
    
但实际情况却并非如此,css中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表的设备物理像素是不同的。

执行结果：

 这里的p标签描述的段落，前面没有缩进，在学习css的时候，这个缩进就会实现。

---

2.4、换行标签：br

br标签是一个单标签（不需要结束标签），使用br标签不想段落标签p一样，中间存在空隙。

书写格式：

或者

但是跟建议使用

代码示例：

 

---

2.5、格式化标签

• 加粗：strong 标签和 b 标签
• 倾斜：em 标签和 i 标签
• 删除线：del 标签和 s 标签
• 下划线：ins 标签和 u 标签

这些标签都是双标签，都是成对出现的。

代码示例：

    
    
    
    


   加粗1

   加粗2

   倾斜1

   倾斜2

   删除线1

   删除线2

   下划线1

   下划线2

 执行结果：

 

---

2.6、图片标签：img

图片标签也叫img标签，它是一个单标签，img标签里面必须有src属性来表示图片的路径，可以是相对路劲，也可以是绝对路径，也可以是网络路径。

img标签的其他属性：

• alt：替换文本，当图片不能正常显示的时候，会出现一个替换的文字。
• title：提示文本，当鼠标放在图片上，就会出现提示。
• width/height：控制宽度高度，高度和宽度一般改一个就行，另外一个会等比例缩放，否则就会图片失衡。
• id：给标签一个唯一的标识，HTML中任何元素都可以指定id，但是每个元素的id不能相同。

我们在了解图片路劲的时候，将img标签的其他属性一起了解一下。

1️⃣绝对路径（从此电脑出发，到这个图片）

代码示例：

上述的代码中我们只是对图片的宽度进行了调整，没有调整高度但是图片的比例没有变化，这就是上面说到的图片的宽度和高度只需要调整一个，另外一个可以根据比例调整，当然我们也可以手动调节图片的长度和宽度。代码中调节的时候使用的px，表示的是像素单位。代码中alt这个属性在上述的执行结果中没有体现出来，下面我们来观察alt属性的作用。

我们将图片的路径删除掉，图片就不能显示，这个时候alt属性中内容就会出现在这个页面当中，提示这张没有显示的图片，表示的是什么。

 2️⃣相对路径（以html文件所在位置为基准，找到图片的位置）

小编的图片存放位置在html文件的上一级目录。

代码示例：

✨ 相对路径存在多种情况：

• 图片的位置和当前html文件在同一级目录：直接写图片名即可或者使用（./）表示同级目录。
• 图片的位置在当前html文件的上一级目录：../表示退出当前的目录，到上一级目录。
• 图片的位置在当前html文件的下一级目录：直接选中图片所在文件夹在选中图片。

---

 3️⃣网络路径

比如https://img-blog.csdnimg.cn/img_convert/2e28609c831efd6012d43054c8ed275d.png就是一个网络路径。

代码示例：

 使用网络路径有一个缺点就是，当别人网站将这个图片删除了，你的网页中这张图片也就显示不出来了。

---

2.7、超链接标签：a

超链接标签是一个双标签，成对出现。经常使用到的属性就是href和target

href：必须具备，表示点击后会跳转到那个页面。

target：打开方式，默认是_self，如果是_blank则用新的标签页打开。

 1️⃣外部链接：href引用其他网站的地址

代码示例

    
    
    
    


    百度

这里就不展示执行结果了，由于target属性的值为_self，用当前的页面打开新的标签页，小编不会插入动图所以就没有办法展示效果了。

但是将target属性的值换成_blank，就会使用新的标签页打开百度的页面。

百度

 2️⃣内部链接：网站内部页面之间的链接，写相对路径即可。

在一个目录中有helloworld.html和test.html文件，演示在helloworld文件中写一个链接，跳转到test文件。

代码示例：

    
    
    
    


    跳转到test页面

 3️⃣空连接：使用#在href中占位

空链接

4️⃣下载链接：href对应的 路径是一个文件。（可以使用zip文件）

    
    
    
    


  这是风景图

5️⃣ 锚点链接：可以快速定位到页面中的某个位置

这里我们使用段落标签，分为三个部分，给每个段落标签中都添加一个id属性用来插入锚点，在a标签的href属性中写入锚点的名字即可，此时点击锚点链接就会跳转到锚点位置。

代码示例：

    
    
    
    


  第一集
  第二集
  第三集
  

    第一集 
    
  
  

    第二集
    
  
  

    第三集
    
  

 

---

2.8、表格标签

表格标签有多个标签搭配使用

• table标签：表示整个表格
• tr：表示表格的一行
• td：表示一个单元格
• th：表示表头单元格，会居中加粗
• thead：表格的头部区域（注意和th区分，范围是不th要大的）
• tbody:表格得到主体区域。

table包含tr，tr包含td或者th.

代码示例

    
    
    


    

        

            
急救中心
            
急救电话
        
        

            
警局
            
110
        
        

            
消防队
            
119
        
        

            
医院
            
120
        

    

 上述的结果看起来不是很整齐，我们可以在table标签中使用border属性来加一个边框。

 我们还可以使用width和height属性来调整表格的大小，使用cellspancing属性为0来取出边框的间隙。

代码示例

 当然我们可以看到上面的图片还是存在问题的，他们并没有对齐，但是这里我们是没有办法将他对齐的，在后面的css学习之后，就可以将这个表格居中。
2.8.1、单元格的合并


跨行合并：rowspan="n"
跨列合并：colspan="n"

 再进行单元格合并的时候，需要找好目标单元格（跨列合并，左侧是目标单元格；跨行合并，上方是目标单元格），然后删除多余的单元格。
就上述的表格，我们将消防队和医院的这两行合并，我们将警局的这一行两个单元格（两列）合并，实现的效果为。
 代码示例



    
    
    


    

        

            
急救中心
            
急救电话
        
        

            
警局 | 110
        
        

            
消防队 | 医院
            
119
        
        

            
120
        
    

---

2.9、列表标签

列表标签主要分为有序列表、无序列表和自定义列表，使用列表标签主要用来布局，让页面整齐好看。

1. 无序列表使用的标签 ul 和 li；
2. 有序列表使用的标签 ol 和 li；
3. 自定义列表使用的标签 dl(总标签) dt(小标签) 和 dd(围绕标题来说明)

 代码示例

    
    
    


    
有序列表
    

        

            语文
        
        

            数学
        
        

            英语
        
    
    
无序标签
    

        

            语文
        
        

            数学
        
        

            英语
        
    
    
自定义标签
    
三大工具科目
    
语文
    
数学
    
英语

❗❗❗注意：

• 元素之间是并列关系
• ul/ol中只能放li，不能放其他标签，dl中只能放dt和dd
• li中可以放其他标签

---

2.10、表单标签

表单是让用户输入信息的重要途经，其中存在很多表单控件，如文本框，密码框单选框，复选框，按钮等。表单域包含了表单元素的区域，重点是form标签，使用form标签可以把页面上用户进行的操作，提交到服务器上，可以进行一些前后端交互，这里的示例需要结合服务器和网络编程来进行，我们会在后面的博客中展示。

2.10.1、input标签

input标签是一个但标签，常用属性有下面几个：

• type：这个属性必须有，取值有很多种，button、checkbox、text、file、image、password、radio等。
• name：给input起了个名字，尤其是对于单选按钮，具有相同的name才能多选一
• value：input中的默认值
• checked：默认被选中（用于单选按钮和多选按钮）
• maxlength：设定最大长度。

 1️⃣文本框和密码框

type属性的值为text时表示时一个文本框，置为password表示是一个密码框

    
    
    


   
登录页面
   用户

   密码

2️⃣单选框 

type属性的值为radio表示一个单选框，对于单选框需要加个name属性，name属性相同的单选框的值之间是互斥的，只能选一个。如果不加name这个属性或者name属性的值不相同，那么单选框的效果就不能实现，会出现单选框都选上的现象。

    
    
    


   
单选框
   男 
   女

要解决这个问题我们可以将name的值都改为one或者two，总之让两个name的值相同即可。

男 
女

 上面的单选框都是在点显示的圆圈才能选中，但是很多时候我们在使用的时候，都是点击在文字上也就选中了，这个效果我们可以通过lable属性来实现。通过给for属性赋予文本框的id，这样就指定了是为哪一个文本框提供了选中功能。

这里我们就只展示一下代码，由于小编不会插入动图，可以将这个代码粘贴在一个文本文档中，进行验证。

    
    
    


   
单选框
   
   男
   
   女

上面的单选框程序执行的结果开始都是没有选中的，我们可以在执行的时候，让默认选中某个选项，我们可以通过checked属性增加一个默认选项的功能，比如默认选择男。

   
单选框
   男
   女
  

 3️⃣复选框

type属性的值为checkbox表示一个复选框，也可以设置checked属性为checked表示默认某项选中。

    
    
    


   
复选框
   打篮球  

   打乒乓球 
 
   打羽毛球
   

 4️⃣按钮

type属性的值为button表示是一个普通按钮，submit表示的是一个提交按钮，reset表示是一个重置/清空按钮。

普通按钮

简单使用html实现的普通按钮，在点击之后没有反应，这个需要搭配js使用，会实现相应的功能，js我们会在后面的博客中说到。

 普通按钮还可以实现按钮效果的效果。

  提交和清空按钮

提交和清空按钮必须放到for标签内，提交按钮点击之后就会尝试给服务器发送。清空按钮点击之后会将form内所有的用户输入内容重置。

 5️⃣选择文件

如果需要选择文件，上传文件，可以设置type属性为file，上传选哟配合服务器端实现

还是文字描述，因为不会插入动图，将这个代码执行了之后，会出现下面的按钮，点击之后，就会在你的磁盘中选择你要找的文件，选择完成之后，就会在旁边显示你选择的文件是什么。

 2.11、select标签

select标签可以实现下拉菜单功能，一个option表示一项菜单，option中可以定义selected="selected" 表示默认选中。

  
    --请选择年份--
    2000
    2001
    2002
    2003
    2004
    2005
  

 2.12、textarea标签

textarea标签用来实现多行文本框，cols属性表示显示出的列数，rows表示显示出来的行数

多行文本输入

 2.12、无语义标签

无语义标签有两个，为div标签和span标签，一般用于页面布局使用

div盒子

特点：

• width由屏幕宽度决定（独占一行）height自适应（由内容撑开）
• 默认占一整行（一行只能显示一个）

span 

特点：

• width、heght由内容来决定（有能容撑开）
• 一行可以显示多个

 代码示例

你好
世界
!!!
hello
world
!!!!!

3、HTML特殊符号

有些特殊的字符在html文件中是不能直接表示的，例如

• 空格： 
• 小于号：<
• 大于号：>
• 按位与：&