HTML基础

HTML基础

1.基础结构

head：代表网页头部

meta：描述性标签，它用来描述我们网站的一些信息，一般用来做SEO

body：代表网页主体

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x3R5UUX1-1637740845134)(C:\Users\22341\AppData\Roaming\Typora\typora-user-images\image-20211124153649404.png)]

2.基本标签

2.1 标题标签

• h1 ~ h6

2.2 段落标签

• p

2.3 换行标签

• br/

2.4 水平线标签

• hr/

2.5 粗体、斜体

• strong em

2.6 特殊符号

• 空格： 
• 大于：>
• 小于：<

特殊符号记忆方式

• & ;
  中间打一个字母就会有提示

3.图像标签

img标签
src：图片地址（必填）
路径：相对地址（推荐使用） 绝对地址
…/ --上一级目录
alt:图片名字（必填）

4.链接标签

• a标签
  href：必填，表示要跳转到哪个页面
  target：表示窗口在哪里打开
  _blank：在新标签中打开
  _self：在本网页打开（默认）

点我跳转到百度网页

• 锚链接
  1：需要一个锚标记
  2：跳转到标记

点我回到顶部

• 功能性链接
  邮件链接：mailto
  QQ链接（去QQ推广里面可以一键生成）

5.列表标签

• 有序列表（应用范围：试卷，问答…）

  
    
  Java
    
  Python
    
  Linux
  
  

• 无序列表（应用范围：导航，侧边栏…）

  
    
  Java
    
  Python
    
  Linux
  
  

• 自定义列表（dl：标签，dt：列表名称，dd：列表内容）

  
    
  学科
    
  Java
    
  Python
    
  Linux
  
  

6.表格标签

表格table
行：tr rows
列：td cols

​ rowspan：跨行

​ colspan：跨列

  

    
    
学生成绩
  

  

    
    
狂神
    
语文
    
100
  

  

    
数学
    
100
  

  

    
    
琴疆
    
语文
    
100
  

  

    
数学
    
100
  

7.媒体元素

音频和视频
src：资源路径
controls：控制条（必填，有了它才能播放）
autoplay：自动播放

8.页面结构分析

页面结构分析
header：标题头部区域的内容
footer：标记脚部区域的内容
section：Web页面中的一块独立区域
article：独立的文章内容
aside：相关内容或应用（常用于侧边栏）
nav：导航类辅助内容

  
页面头部



  
页面主体



  
页面脚部

9.内联框架

iframe内联框架（可以配合a标签使用，点击a标签操作内联框架）
src：地址
w—-h：宽度高度

点我打开内联框架

10.表单

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

表单的应用
hidden：隐藏
readonly：只读
disabled：禁用

表单初级验证
placeholder：提示信息
required：非空判断
pattern：正则表达式

注册


     
  
账号：


    
  
密码：


    
  
性别：
      男
      女
  


    
  
爱好：
      睡觉
      敲代码
      聊天
      游戏
  


    
  
按钮：
      

  


    
    
国家：
        
            中国
            美国
            瑞士
            英国
        
    


    
    
反馈：
        文本内容
    



    
    

        
        
    



    
    
邮箱：
        
    



    
    
URL：
        
    



    
    
商品数量：
        
    




    
    
音量：
        
    




    
    
搜索：
        
    




    

        你点我试试：
        
    




    
    
自定义邮箱：