HTML（结构）

• HTML（结构）
  • 什么是html？
  • HTML的结构：
  • 标签：
    • 基础标签：
    • 图片标签：
    • 链接标签：
    • 块元素和行内元素
    • 列表标签：
    • 表格标签：
    • 媒体元素：
  • iframe内联框架:
  • 表单：
  • 总结：

什么是html？

超文本（文字，图片，视频，音频，动画）标记语言

HTML的结构：

DOCTYPE:告诉浏览器，使用的是什么规范

head:网页头部

meta:描述性标签，描述网站的一些信息，一般用来左seo（搜索引擎优化算法）

title:网页标题

body:网页主体

    

    



你好

标签：

基础标签：

1. 标题标签：

2. 段落标签：

3. 换行标签：
   
4. 水平线标签：

   ---

5. 粗体，斜体：粗体,斜体
6. 注释和特殊符号：
   1. 空格： ；
   2. 大于：>；
   3. 小于：<；
   4. 版权符号：©；
   5. 注释：

   一级 
   二级 

段落

没换行
换行了
不信你看



粗体
斜体


空 格

2>1

1<2

©刘超持有

1. 普通超链接：
   1. 格式：< a href="跳转地址">链接显示的内容（文字，图片，视频）
   2. href:地址（必填）
   3. targe（目标）：在哪个窗口打开，_blank：另外一个窗口，_self：当前窗口
   4. 标签内可以插入文字，图片，视频生成图片链接，视频链接
2. 锚链接：
   1. 需要一个锚标记，属性name标记
   2. 使用#跳转到标记
3. 功能性链接：
   1. 邮件链接：

      块元素和行内元素

      • 块元素：不管内容多少，该元素都会独占一行：

        ，

      • 行内元素：内容靠宽度撑开，左右都是行内元素就可以放在一行：，,

      列表标签：

      • 什么是列表：列表就是将信息，以结构化和条理化的并以列表的样式显示出来
      • 类型：
        • 有序：ol=order list ；应用：试卷，问答
        • 无序：ul:unorder list ； 应用范围：导航，侧边栏
        • 自定义：Definition（定义）； list 应用范围：网站底部
        • 语法使用：看下面代码

      
      
      
        
      有序1
        
      有序2
        
      有序3
        
      有序4
      
      
      
          
      无序1
          
      无序2
          
      无序3
          
      无序4
      
      
      
          
      列表名称1
          
      内容1
          
      内容2
          
      内容3
          
      列表名称2
          
      内容1.1
          
      内容2.2
          
      内容3.3
      
      
      

      表格标签：

      语法：

      table

      ? tr

      ? td td/

      ? tr/

      table

      实现跨行：rowspan

      跨列：colspan

      
      
      
        
      
      
          
      列1
          
      列2
        
          
      
      
              
      列2.1
              
      列2.2
              
      列2.3
          
          
      
              
      列3.1
              
      列3.2
          
      
       
      

      媒体元素：

      视频：video

      音频：audio

      iframe内联框架:

      表单：

      1. 提交方式

         • get：不安全，高效，会暴露我们的信息
         • post：比较安全，效率不如get，适合传输大文件

      2. .单选框：

         • radio：属性name一样就是一个组的，就只能从一个组里选择一个

      3. 多选框：

         • checked：

      4. 按钮：

         1. button：普通按钮
         2. image：图片按钮
         3. submit：提交按钮
         4. reset：重置按钮

      5. 下拉框（具体看下面代码）：

         1. 标签select里option标签

      6. 文本域：textarea

      7. 文件域：type="file"

      8. 验证，搜索框，滑块(看代码)

      9. 常用的应用：属性：隐藏域hidden，只读readonly，禁用disable

      10. 表单的初级验证：

          • 默认提示信息placeholder
          • 非空判断：required
          • 正则表达式：pattern

          
          
          button，submit，image，reset：按钮
          -->
          
          
             
          账号：
             
          密码：
          
          
                 男
                 女
          
                  
          爱好：
                       女
                       游戏
                       代码
                  
          
            下拉框：  
                  1
                  2
                  3
                  4
              
          
          
              
          
                你好
              
              
          
          
              
          
                  
              
          
             
          
               邮箱: 
             
              数字
          
              url: 
          
              滑块: 
          
              搜索框: 
          
          
          
              
              
          
              
          
              
             
              
              
          
          
          

      总结：

      1. 什么是html：超文本标签语言，超文本包括：文本，图片，音频，视频等
      2. 知道html的结构：title标题，mate网页描述，head网页头部，body网页主体
      3. 常用标签：
         1. 段落标签：p
         2. 标题标签：h1
         3. 换行标签：
            
         4. 粗斜体：b，em
         5. 图片标签：image，src，
         6. 链接标签：a ，src地址，trage（跳转到另外个页面，还是当前页面）
         7. 表格标签
            1. table tr td
            2. clospan：跨列
            3. rowspan：跨行
         8. 媒体标签：audio，vedio
            1. 属性：autoplay自动播放
            2. src：地址
            3. controls：显示控件
         9. 列表标签 有序ol li （问答试卷），无序 ul li（导航，侧边栏） ，自定义(dl,dt,dd)
         10. iframe：内联框架（视频播放）
      4. 表单
         1. 提交方式：
            1. get：不安全，数据暴露但高效
            2. post：安全，适合传大数据文件
         2. 重要，所有需要传数据的表单元素都要加，name，不然传不到后端
         3. text，password，文本框，密码框
         4. radio，单选框，checked多选框
         5. textarea文本域
         6. file文件域
         7. select ，option下拉框
         8. 按钮：button，image，submit，reset