目录

1. 前端开始

HTML5 浅浅入门

常见 IDE

2. 网页基本信息

3. 网页基本标签

1. 标题标签 hx

2. 段落标签 p

3. 换行标签 br/

4. 水平线标签 hr

5. 字体样式标签 strong em

6. 注释和特殊符号 nbsp gt lt copy

1. 空格  

2、大于小于号

3、版权符号

4、图像标签 img

5、超链接标签及应用

1、页面间链接

2、锚链接

3、功能性链接

6、行内元素和块元素

7、列表标签

8、表格标签

1、生成一个表格

2、跨行 / 列

9、视频和音频

10、页面结构分析

11、iframe 内联框架

1、在当前网页打开百度

2、点击跳转

12、表单语法 form

1、初识 get 和 post

2、文本框

3、单选框

4、多选框

5、按钮 button

6、下拉框 select option

7、文本域

8、文件域

9、邮件验证

10、URL 验证

11、数字验证

12、滑块验证

13、搜索框

13、表单应用

1、隐藏 hidden

2、只读 readonly

3、禁用 disabled

4、增强鼠标可用性

14、表单初级验证

1、placeholder 提示信息

2、required 非空判断

3、pattern 正则表达式

---

1. 前端开始

HTML5 浅浅入门

前端，就是写一些基本的页面。

HTML

CSS 美化网页

JS 让网页动起来产生交互行为 JS 原生代码比较复杂，学习封装 JS 的库——JQuery

主流框架 VUE，前后端分离，数据的分离与绑定

常见 IDE

IDEA

创建一个 HTML

1、打开 IDEA，创建一个 Project

2、默认 Java，然后 next，再 next，

3、选好路径，finish

4、创建一个 html 的 directory

5、创建一个 HTML File

6、定义浏览器——>【狂神说 Java b 站】HTML01【【狂神说 Java】HTML5 完整教学通俗易懂】【精准空降到 07:57】【狂神说 Java】HTML5 完整教学通俗易懂_哔哩哔哩_bilibili

2. 网页基本信息

title 标签的作用，title 是网页这里显示的。

这里注意：运行 vs code 的快捷键是 alt+B

几个标签

DOCTYPE

html

head

body

title

meta

注意：基础代码：1 是 html 文件 2 输入英文叹号，然后回车就自动生成基本代码。

​

​

​




    
    
    
    
    
​
    
    



​
hello world！​

3. 网页基本标签

1. 标题标签 hx

 一级标签 
 二级标签 
 三级标签 
 四级标签 
 五级标签 
 六级标签 
 七级标签 
 八级标签 

2. 段落标签 p

 我唤醒大海 

​
 唤醒山脉 
​
 我唤醒沙漠 
​
 处处充满色彩 
​
 美丽的地方 
​
 开心往前飞 
​
 就算有亿万公里 
​
 一吨行李 
​
 我们不放弃 
​
 前进需要勇气 
​
 一直往前飞 
​
 最重要开心就好 
​
 忘记烦恼 
​
 宇宙很大 

用于分段

3. 换行标签 br/

自闭合标签

​
我唤醒大海 

​
唤醒山脉 

​
我唤醒沙漠 

​
处处充满色彩 

​
美丽的地方 

​
开心往前飞 

4. 水平线标签 hr

效果，加一个水平线

5. 字体样式标签 strong em

 字体样式标签 
粗体：i love you
斜体：i love you

6. 注释和特殊符号 nbsp gt lt copy

1. 空格  

空     格：空        格：

2、大于小于号

&gt；分号是英文的

&lt；英文分号

3、版权符号

&copy；

4、图像标签 img

JPG

GIF

PNG

BMP

src alt 必填

在网页上加载图片

    
    


​

​



​

正常显示

 没有加载出来，显示 alt 内容

5、超链接标签及应用

 以下包括文本超链接和图片超链接

1、页面间链接

页面间链接，从一个页面链接到另一个页面

    
    



 点击我跳转到页面 1 
 点击我跳转到页面 1 



    
​

​

2、锚链接

 锚链接，实现页面跳转

​

 顶部 
​
 回到顶部 

3、功能性链接

​
 联系我 

6、行内元素和块元素

行内元素 摆在一行的标签是行内标签

块元素 单独一行的标签是块标签

7、列表标签

有序列表 ol li

无序列表 ul li

自定义列表 dl dt dd

    
    


​

​

    
Java
    
Python
    
 运维 
    
 前端 
    
C/C++
​

​

​

​

    
Java
    
Python
    
 运维 
    
 前端 
    
C/C++
​

​


    
 学科 
​
    
Java
    
Python
    
 运维 
​
    
 位置 
​
    
 北京 
    
 南京 
    
 东京 
​

​

显示效果

8、表格标签

table

tr

td

colspan

rowspan

border

1、生成一个表格

​

    
        
        
        
        
    
    
        
        
        
        
    
    
        
        
        
    
​
1-1
1-2
1-3
1-4
2-1
2-2
2-3
2-4
3-1
3-2
3-3
3-4

2、跨行 / 列

    
        
        
        
        
        
    
    
        
        
        
        
        
    
    
        
        
        
        
    
​
1-1
2-1
2-2
2-3
2-4
3-2
3-3
3-4

效果

9、视频和音频

媒体元素

视频元素

video

音频元素

audio

    
    


​

​

​

显示视频

显示音频代码

10、页面结构分析

    
 网页头部 

​

    
 网页主体 

​

11、iframe 内联框架

在一个网页嵌套另外一个网页。

src 表示要打开的网站的路径

name 框架标识名

w-h 宽高

1、在当前网页打开百度

直接在 iframe 里生成内容。

​

点击跳转就会打开百度。

2、点击跳转

name 为 hello，a 标签的 target 也是 hello。

通过 a 标签向 iframe 加元素。

例子作用：在 hello 内联块里打开超链接，href 就是超链接链到的地址。

​
 点击跳转 

效果

点击页面的“点击跳转”

点击跳转后

12、表单语法 重点

1、初识 get 和 post

登陆、注册的输入框都是表单

 注册 
​

​

​
    
    
 名字：
​
    
    
 密码：
​
    
    

        
        
    

表单元素属性。

2、文本框

 
​
    
 名字：
​
    
    
 密码：

3、单选框

 性别：​
     男
     女

效果

4、多选框

 爱好： 睡觉
     敲代码
     聊天
    

效果

5、按钮 button

    
    
​

效果

点击图片实现一个跳转

按钮：

input type=”button” 普通按钮

input type=”image” 图像按钮

input type=”submit” 提交按钮

input type=”reset” 重置按钮

6、下拉框 select option

 国家：
         中国 
         美国 
         瑞士 
         印度 
    
    

7、文本域

 反馈： 文本内容 
​

8、文件域

效果

9、邮件验证

 邮箱：

10、URL 验证

11、数字验证

12、滑块验证

13、搜索框

13、表单应用

1、隐藏 hidden

 密码：

隐藏密码输入

 密码：

使得密码隐藏，且默认为 123，隐藏提交密码

2、只读 readonly

 名字：

名字只能读，不能修改

3、禁用 disabled

 性别：​
     男
     女

性别男不能选择

4、增强鼠标可用性

锁定到输入框里

label 标签，指向一个位置

    
     点击 
    

鼠标点击“点击”，光标跳转到 text 文本框里。

14、表单初级验证

高级验证需要 JS 去写

为什么要初级验证，减轻服务器的压力（在前端验证），保证数据的安全性。

常用方式

1、placeholder 提示信息

用在输入框中

 名字：

2、required 非空判断

必须提交

 名字：

不填直接提交的话会显示

3、pattern 正则表达式

一些正则表达式

正则表达式速查表_脚本之家