HTML基础知识

一、HTML初识

1、概念

1. 概念：

HTML：超文本标记语言

2. HTML的作用：

需要将java在后台根据用户请求处理的请求结果在浏览器中显示给用户。

在浏览器中数据需要使用友好的格式展示给用户。

==HTML最大作用是告诉浏览器接收到的数据是使用什么样的数据组织形式显示。==

3. 使用：

HTML的标准文档规范

HTML的标签

---

System.out.println("学生\t老师\t");

System.out.println("学生
老师
");

2、三大基石

HTML：

超文本标记语言（有效的组织数据在浏览器端的显示）

HTTP：

超文本传输协议（规范浏览器和服务器之间数据交互的格式）

URL：

统一资源定位符（唯一的定位一个网络资源）

超文本就是包括视频音频的文本

3、HTML的文档声明

文件以html或者htm结尾

4、标准文档结构

    
    
    
    
    
    
    This is my first html!
    

注意：html是由浏览器解析执行的

二、HTML的Head标签

前端开发工具介绍：

​ Hbuilder：可以快速生成HTML的标准文档结构，而且集成了很多方便的快捷键。

---

1、网页标题标签

2、编码格式标签

​

3、 网页搜索优化标签

4、 网页指定跳转标签

    
        
        
        
        
        
        
        
          
        
        
        
        
        
    
    
        this my first html
    

5、其他标签

css、js

三、body标签

文本标签

自己占一行的标签叫做块级标签

1、标题标签

2、段落标签

==p:==

会将一段数据作为整体进行显示，主要是进行css和js操作时比较方便
特点：
段落与段落之间会自动换行，
也可以使用 ==br==换行
空格符：
== ==

权重标签：

​ b：会将内容加黑
​ i：斜体
​ u：下划线
​ del：增加删除线
​ 以上标签不会自动换行，并且可以嵌套使用

3、标签属性

1. align:center left right

2. width="宽度"

3. color="颜色"

4. size="高度"

列表标签

1.无序列表

​ ul
​ li:该标签中数学列表内容，一个li标签代表列表中的一行数据
​ 特点：默认数据前有一个黑圆圈符号

2.有序列表

​ ol
​ li:该标签书写列表内容，一个li标签代表列表中的一行数据
​ 特点：会自动给列表进行顺序编码，序号连续
​ 属性
​ type：可以改变顺序编码的值，如a，A，Ⅰ（罗马数字1）

3.自定义列表

​ dl
​ dt 数据的标题
​ dd 数据内容

四、图片标签

1.img

src

• 图片路径

  • 本地路径
    • 相对路径：从当前所在位置出发的路径
    • 绝对路径：从根盘符出发的路径
  • 网络资源
    • 图片的url地址

• width:宽度，单独设置时自动同步高度以保证不失真

• height：高度

• alt:加载不成功时显示的文字

• title:鼠标指上去时显示的文字

2.不自动换行：

​ 行内元素

五、超链接标签

1.超链接标签学习

​ ==a：==
​ href：写要跳转的资源路径
​ 本地资源：路径
​ 网络资源：url
​ target:知名要跳转网页资源的显示位置
​ _self：在当前页刷新显示
​ _blank:在新标签里显示
​ _top:在顶层页面显示
​ _parent:在父级页面显示
​ 注意：超链接标签中声明访问方式，可以是文字也可以是图片

2.锚点学习:

​ 作用：在一张网页中进行资源跳转
​ 使用：
​ 先使用超链接标签在指定的网页位置增加锚点，格式为：
​
​ 使用a标签可以跳转指定的锚点，达到网页内部资源跳转的目的，格式：
​ 访问

------回到顶部

==回到顶部==

    
        
        
        
    
    
        
超链接标签
        

        
本地资源
        跳转到05-HTML-图片标签
        
        

        
网络
        菜鸟
        

            
        
    

六、表格标签

1.表格标签学习

table：声明一个表格
tr：声明一行,设置行高及该行所有单元格的高度
th：声明一个标题格，默认居中加黑加粗
td：声明一个单元格，默认居左显示原始数据，只需要设置第一行单元格的宽度，该列均这么宽

2.表格标签的常用属性学习

• 属性：

  • border:给表格添加边框

  • width:宽

  • height：高

  • cellpadding:

    内容距离边框的距离

  • cellspacing：

    表格边框的宽度

• 特点：
  默认根据数据的多少进行表格扩充

3.单元格的合并学习

1. 第一步：
   确保表格是一个规整表格

2. 第二步：
   根据要合并的单元格，找到所在源码位置

3. 第三步：

   • 行合并：在要合并的单元格中第一个上使用属性rowspan=“要合并的单元格个数”，并删除其他单元格完成合并
   • 列合并：在要合并的单元格中的任意一个上使用属性colspan=“要合并的单元格个数”，并删除其他单元格

   
   
    
        
        
        
    
    
        
   表格标签学习
        
   
        
   表格标签的常用属性学习
        
   
            
   
                
   科目
                
   分数
                
   级别
                
   说明
            
            
   
                
   java
                
   80
                
   b
                
   面向对象语言
            
            
   
                
   c语言
                
   100
                
   a
                
   面向过程的语言
            
        
        
   
        
   单元格的合并学习
        
        
    
   
   

   标签会原样输出格式

七、内嵌和框架标签

注意：
第一步一定要删除body标签

框架标签学习：

• frameset
  • rows：按照行进行切分页面
  • cols：按照列进行切分页面
  • 子标签：
    • frame：进行切分区域的占位，一个frame可以单独加载网页资源
      • src：资源路径（本地或者网络）
      • name：区域名，结合超链接使用

八、HTML表单

1、form表单标签

form表单标签学习：

作用：

收集并提交用户数据给指定的服务器

注意1：form标签会收集其标签内部的数据

属性:

1. action:收集的数据的提交地址url
2. method：收集的数据的提交方式
   • get：适合小量数据，表单数据以问号隔开，拼接在url后面，不同键值对使用&隔开
   • post：适合大量数据，安全，隐式提交

注意2：表单数据的提交，要提交的表单项必须有name值，否则不提交
并且提交的数据为键值对

注意3：form表单数据提交需要依赖于submit提交按钮

2、form表单域标签

1）form表单域标签学习：

作用：给用户提供可以进行数据书写或者选择的标签

2）使用：

1.文本框：

                input：
                    type：
                        text：收集少量的文本数据，用户可见
                        password：不可见文本数据
                    name：数据提交的键，也会被js使用
                    value：默认值

2.单选框：

                input：
                    type：
                        radio
                    name：name属性值相同的单选框只能选择一项
                    value:要提交的数据
                    checked：使用此属性的单选默认是选择状态

3.多选框：

                input：
                    type：
                        checkbox
                    name:一个多选组需要使用相同的name属性
                    value：要提交的数据
                    checked：默认选择状态

4.单选下拉框：

                select:
                    name：数据提交的键名，必须声明
                    option：子标签，一个option标签标示一个下拉选项
                        value：要提交的数据

5.文本域：

                textarea：声明一个可以书写大量文字的文本趋于
                    name：数据提交的键名，js和css会使用
                    rows：声明文本域的行数
                    cols：声明文本域的列数

6.普通按钮：

                input：
                    type：
                        button
                    name：如果有，会提交数据，无意义所以多不写
                    value

7.隐藏标签：

                input：
                    type：
                        hidden
                    name
                    value

注意：表单数据提交提交的是表单域标签的value值

3、form表单标签的使用

在点击数据提交时，form标签会将其内部所有form表单域标签中用户
书写的数据按照method指定的提交方式，提交给action属性指定的提交地址。

    
        
        
    
    
        
form标签学习
        

        

            
            
            用户名：

                
            密码：

            性别：
            男
            女   

            爱好：

            吃饭

            睡觉

            打豆豆

            籍贯：
                
                    中国
                    海外
                

            自我介绍：

            
            

            
            隐藏标签：