【Java】前端基础之HTML

一、什么是HTML？

Hyper Text Markup Language（超文本标记语言）

超文本包括：文字，图片，音频，视频，动画等。

世界知名浏览器厂商都对HTML5支持：微软，谷歌，苹果，Opera，Mozilla。

W3C World Wide Web Consortium（万维网联盟） Web技术领域最权威和具有影响力的国际中立性技术标准机构

W3C标准包括：
结构化标准语言（HTML XML）
表现标准语言（CSS）
行为标准（DOM ECMAScript）

1. HTML的基本结构

开放标签和自闭和标签是成对出现的

（1）注释 Ctrl + /

（2）DOCTYPE 告诉浏览器使用什么规范

    
    
    

    



hello world!

2. 网页基本标签

    
    



一级标签
二级标签
三级标签


12
123
1234





12

1234

12345




粗体：Java
斜体：Java




空格
空   格



大于号：>


小于号：<


©版权所有

效果如下图所示：

3. 图像标签 img

4. 链接标签 a

target：表示窗口在哪里打开
_blank：在新标签页中打开
_self：在自己的网页下打开

4.1 页面间链接

点击跳转
点击跳转到百度




    

4.2 锚链接

使用锚链接可以将页面跳转到指定的位置

支持跨页面跳转

跳转

4.3 功能性链接

邮件链接

点击联系我

5. 行内元素和块元素

块元素

无论内容多少，该元素独占一行

行内元素

内容撑开宽度，左右都是行内元素的可以排在一行

二、列表和表格

1. 列表标签 list

什么是列表？
信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能够更快捷地获得相应的信息。

分类：无序列表 有序列表 定义列表

    
Java
    
Python
    
运维
    
前端
    
C




    
java
    
python
    
c
    
c++




    
学科
    
java
    
python
    
c

2. 表格标签 table

属性：
border 边框大小
colspan 跨列
rowspan 跨行

实现如图所示的表格

    

        
        
        
姓名：
        
性别：
        
照片
    
    

        
身高：
        
体重：
    
    

        
出生年月：
        
民族：
    
    

        
电子邮件：
    

三、媒体元素（视频元素 video 和 音频元素 audio）

属性：
src 资源路径
controls 进度条控制
autoplay 自动播放

四、 页面结构分析

五、内联框架 iframe

点击跳转

六、 表单语法 form

1. 初识表单get和post提交

action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method: post， get提交方式
get方式提交可以在URL中看到提交的信息 不安全，但高效，不能传输大文件
post方式提交不显示，比较安全，可以传输大文件

注册


    
    
名字： 
    
密码： 

    
    

        
        
    

2. 表单格式

3. 单选框 radio

单选框标签

input type="radio"

value:单选框的值

name:表示组，组名一样表示在同一个组中

性别：
        男
        女
    

4. 多选框 checkbox

多选按钮也要放在同一个组里。

爱好：
        睡觉
        代码
        聊天
        玩耍
    

5. 按钮 button

普通按钮 图片按钮 提交按钮 重置按钮

按钮：
        
        
    
    
    

        
        
    

6. 下拉框 select

    
国家：
        
            中国
            美国
            英国
        
    

7. 文本域 textarea

 
文本域：
        文本内容
    

8. 文件域 file

文件域：
        
        
    

9. 简单验证

当输入不符合规范，系统就会自动提示。

 
邮箱：
        
    
    
url:
        
    
    
数字
        
    

10. 滑块 range

    
音量：
        
    

11. 搜索框 search

搜索：
        
    

七、表单的应用

1. 只读 readonly

只能看，不能重写，修改

名字： 

2. 禁用 disabled

选项变灰色，不能自己选择

性别：
        男
        女
    

3. 隐藏域 hidden

输入框隐藏，但属性还在

密码： 

通过隐藏域可以提交默认值

4. 附加

        
        点击
        
    

八、表单的初级验证

1. 提示信息 placeholder

应用在输入框的控件中

名字：

2. 非空判断 required

应用在输入框的控件中

密码： 

3. 正则表达式 pattern

正则表达式查找网站：

https://www.jb51.net/tools/regex.htm

自定义邮箱：
        
    

===========================================================

内容繁多，重在理解！

感谢ლ(°◕‵ƹ′◕ლ)！！！