HTML学习笔记详解01 初识HTML

  • HTML

HTML，英文全称为 Hyper Text Markup Language，中文翻译为超文本标记语言，其中超文本包括：文字，图片，音频，视频，动画等

  • 目前

目前主流使用的是HTML5+CSS3

  • HTML的优势

    • 主流浏览器都支持
      • 微软
      • GOOGLE
      • 苹果
    • 市场的需求
    • 跨平台（类似JVM）

  • W3C标准

    • W3C

      • Wold Wide Web Consortium（万维网联盟）

      • 成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构

      • http://www.w3.org

      • http://www.chinaw3c.org

    • W3C标准包括

      • 结构化标准语言（HTML（ 超越文本标记语言）、XML（配置文件 ））
      • 表现标准语言（CSS（表现标签语言 ））
      • 行为标准（DOM（文档对象模型 ）、ECMAScript（JavaScript））

02 HTML基本结构

  • 、等成对的标签，分别叫开放标签和闭合标签。
  • 单独呈现的标签（空元素），如”
    ;”意为用“/”来关闭元素
                                myFirstpage        我的第一个web网页
        Hello world！

03 网页基本标签

  • 标题标签
  • 段落标签
  • 换行标签
  • 水平线标签
  • 字体样式标签
  • 注释和特殊符号
        基本标签学习
 一级标题 
 二级标题 
 三级标题 
 四级标题 
 五级标题 
 六级标题 
<!-- 使用
和
  -->
 两只老虎 
两只老虎，两只老虎，
跑得快，跑得快，
一只没有眼睛，
一只没有尾巴，
真奇怪！真奇怪！
两只老虎，两只老虎，
跑得快，跑得快，
一只没有耳朵，
一只没有尾巴，
真奇怪！真奇怪！
<!-- 使用
  -->
 两只老虎 
两只老虎，两只老虎，
跑得快，跑得快，
一只没有眼睛，
一只没有尾巴，
真奇怪！真奇怪！
两只老虎，两只老虎，
跑得快，跑得快，
一只没有耳朵，
一只没有尾巴，
真奇怪！真奇怪！
字体样式标签
粗体：I LOVE HTML
斜体：I LOVE HTML
特殊符号
1、空格： 
空    格
注意，按空格也会有，但是多个space只会显示一个
空    格
2、大于小于符号
>：大于号
<：小于号
©：版权号

04 图像标签

  • 常见的图像格式
    • JPG
    • GIF
    • PNG
    • BMP
    • ………
  • 调用格式
text

https://www.cnblogs.com/wutong666/archive/2023/04/24/path：指图片加载路径（必填）

  • 建议使用相对地址（推荐），绝对地址（也可以，但不推荐）

  • 在这里可以看到copy过来的绝对地址或者在本project中的地址。

../：–上一级目录

alt：图片名字，指如果图片无法正常加载会出现的替代文本

title：当鼠标置于图片上时会显示图片名称

width：设置宽度

height：设置高度

        俾斯麦号战列舰      
俾斯麦号战列舰
      俾斯麦号战列舰

05 链接标签

  • 使用格式
链接文本或图像
  • 文本超链接
  • 图像超链接
        链接标签学习点我查看俾斯麦号高清大图
    俾斯麦号战列舰
俾斯麦号战列舰
俾斯麦号战列舰
俾斯麦号战列舰
俾斯麦号战列舰
俾斯麦号战列舰
俾斯麦号战列舰
点我回到顶部
down
  • 首先明确，超链接一共三类
    • 页面间链接
      • 从一个页面链接到另一个页面
    • 锚链接
    • 功能性链接

06 块元素和行内元素

  • 块元素
    • 无论内容多少，该元素独占一行
    • 例如（p,h1-h6,……）
  • 行内元素
    • 内容撑开宽度，左右都是行内元素的可以排在一行
    • （a.strong.em……）

07 列表标签

  • 什么是列表
    • 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的形式显示出来，以便浏览者能更快捷的获得相应的信息。
  • 列表的分类
    • 无序列表
    • 有序列表
    • 自定义列表
        Title
      
  1. Java
    2.   
  2. Python
    3.   
  3. C/C++
    4.   
  4. Linux
        
  • Java
    •     
  • Python
    •     
  • C/C++
    •     
  • Linux
    
计算机编程语言
    
Java
    
Python
    
C/C++
    
Linux

08 表格标签

  • 为什么使用表格

    • 简单通用
    • 结构稳定

  • 基本结构

    • 单元格
    • 行
    • 列
    • 跨行
    • 跨列
        table
  
    学生成绩  
    
吴同    语文    100  
    
数学    100  
    
肉食动物    语文    100  
    
数学    100

09 视频和音频

  • 视频元素
    • video
  • 音频元素
    • audio
        媒体元素调用

10 页面结构分析

元素名描述
header标题头部区域的内容（用户页面或页面中的一块区域）
footer标记脚部区域的内容（用于整个页面或页面的一块区域）
sectionWeb页面中的一块独立区域
article独立的文章内容
aside相关内容或应用（常用于侧边栏）
nav导航类辅助内容
        Title
    
网页头部
    
网页主体
    
网页脚部

11 iframe内联框架

  • 使用结构
  • https://www.cnblogs.com/wutong666/archive/2023/04/24/path:引用页面地址
  • mainFrame:框架识别名
        iframe网站内联框架<!-- -->
  • 有些网站如baidu等拒绝使用内联框架访问，所以显示不成功可以换一个网站，如b站
  • 下一个示例是在内联窗口中打开跳转网页
        iframe网站内联框架点击跳转

12 初识表单和提交

        登录      
登录注册
                                      
用户：
                    
密码：
  • 但事实上，使用post也十分危险，按F12打开开发者工具，进入网络监听（Network，然后在左边点击提交

  • 可以看到右下角出现一个提交文件，点开后在上面选择payload，即可以看到传输的相关内容

  • 因此其实这个也不安全，具体何种方法传输此类保密信息比较安全，需后期进一步学习。

13 表单元素格式

属性说明
type指定元素类型。text、password、checkbox（多选）、radio（单选）、reset、file、hidden、image和button。默认为text
name指定表单元素的名称（后期java程序读取该属性）
value元素的初始值。type为radio时必须指定一个值
size指定表单元素的初识宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位（px）
maxlengthtype为text或password时，输入的最大字符数
checkedtype为radio或checkbox时，指定按钮是否被选中

14 文本框和单选框

        注册
注册
            
用户：
            
密码：
        
性别：        男        女

15 多选框和按钮

        注册
注册
        
用户：
        
密码：
        
性别：        男        女    
        
爱好：        睡觉        学习        聊天        游戏    
            
                    
    
        电子木鱼：            
   <!-- 
            
-->        
        国籍：                    中国            美国            瑞士            日本            
        
        反馈：            
        
        上传文件：

  • html中按钮有4种

    • input type=”button” 普通按钮
    • input type=”image” 图像按钮
    • input type=”submit” 提交按钮
    • input type=”reset” 重置

  • 除了button按钮外，剩余三种都会产生不同效果。

  • image点击会直接进入上方action对象中

  • 提交按钮和image类似

  • 重置即清空当前页面的表单内容

16 列表框文本域和文件域

    
        国籍：                    中国            美国            瑞士            日本            
        
        反馈：            
        
        上传文件：

17 搜索框滑块和简单验证

        
邮箱:            
        
URL:            
        
数量：            
        
音量：            
        
搜索:

18 表单应用

  • 隐藏域 hidden
  • 只读 readonly
  • 禁用 disabled

拓展：使用label增强鼠标可用性，即点击某部分会进入某一编辑部分

19 表单初级验证

  • 为什么要进行初级验证
    • 对输入内容进行简单判断，从而降低服务器负载
    • 安全，进行初级验证可以对用户输入内容进行简单查验，对系统有一定保护作用
  • 常用方式：
    • placeholder 提示信息
    • required 非空判断
    • pattern 正则表达式

20 总结