HTML标签笔记

HTML ： Hyper Text Markup Language(超文本标记语言)

---

软件架构

C/S架构(Client/Servers)

• 客户端 + 服务器端

B/S架构(Browser/Servers)

• 浏览器 + 服务器端

• 资源分类：

1. 静态资源
    使用静态网页开发技术发布的资源(html+css+javascript)
    所有用户得到的结果是一样的(文字,图片,音频,视频)
2. 动态资源
    使用动态网页开发技术发布的资源(jsp+php+asp)
    所有用户得到的结果可能是不一样的

---

Web标准

• 结构(Structure)
  用于对网页元素进行整理和分类，HTML
• 表现(Presentation)
  用于设置网页元素的外观样式，CSS
• 行为(Behavior)
  用于网页模型的定义和交互，JavaScript

---

浏览器内核

Trident内核：代表产品IE,又称为IE内核
Gecko内核： 代表产品Mozilla FirefoxGecko是一套开源的，C++编写的排版引擎
WebKit内核：代表产品有Safari，主要用于Mac OS系统
Presto内核： 代表产品OperaPresto是由Opera Software开发的浏览器排版引擎，它是世界公认最快的
渲染速度的引擎
Blink内核：由Google和Opera Software开发的浏览器排版引擎

---

HTML标签学习

• HTML基本结构(HEAD头+BODY身体)

 


    
    
    
    


    这是VSCODE通过SHIFT + 1键自动生成的标准结构

• HEAD标签（文档的头部，必须设置title标签）

 
       

    - charset定义文档的字符编码uft8
    - content定义与 http-equiv 或 name 属性相关的元信息
    - http-equiv把 content 属性关联到 HTTP 头部
        1.content-type
        2.default-style
        3.refresh
    - name把 content 属性关联到一个名称
        1.application-name
        2.author
        3.description
        4.generator
        5.keywords

标签
  引入外部样式

  定义页面的JavaScript脚本内容

  1.type规定样式表的 MIME 类型 text/css
  2.media为样式表规定不同的媒体类型media_query

• BODY标签（文档的主体）
  1. 布局网页标签(盒子)

  division:分隔，分区
  
  span:跨度，跨距
  

  2. 文本标签

  标题标签
  
  段落标签
  
  
  
  
  
  加粗标签 big也是加粗
  倾斜             也是倾斜
  删除线         也是删除线
  下划线         也是下划线
  
  
  
  

  3. 列表标签

  列表项
  无序列表unorder list
    
  只能放
  标签
    
  可以放任意标签
  有序列表order list
    规则与ul相同，区别是自带样式属性
  自定义列表
    
  列表项头
  标签
    
  列表项
  标签
  菜单列表
  

  4. 表格标签

  定义一个表格
  定义表格标题
  定义表格中的表头单元格
  定义表格中的行
  定义表格中的单元
  定义表格中的表头内容
  定义表格中的主体内容
  定义表格中的表注内容（脚注）
  定义表格中一个或多个列的属性值
  定义表格中供格式化的列组
  
  - align
     left/center/right 页面对齐方式
  - border
    边框，默认为""：没有边框
  - cellpadding
    内容与表格的留白像素：默认1像素
  - cellspacing
    单元格之间的留白像素：默认2像素
  - width
    表格的宽度
  
  - 跨行合并
        
  - 跨列合并
        
    合并后删除多余被合并单元格
  

  5. 图片标签

  单标签,定义图像
    - alt属性：替换文本，图像不能显示时的文字
    - title属性：提示文本，鼠标放上去显示的文字
    - height属性：规定图像的高度
    - width属性：规定图像的宽度，宽高一般设置一个，另一个会等比缩放
    - src属性：
    - border属性：设置图像的边框粗细
  

  6. 链接

  文本或图片anchor锚
    - href属性：用于指定链接目标的URL地址，必须
    - download属性：指定下载链接
    - target属性：用于指定链接页面的打开方式，_self默认：当前窗口，_blank：新窗口打开
  定义文档与外部资源的关系
  定义文档的主体部分
  定义导航链接
  
  - 外部链接
        href指向网页地址
  - 内部链接
        href指向本地文件路径
  - 空链接
         
  - 下载链接
        href指向地址是文件或压缩包时，会下载文件
  - 网页元素链接
        
  - 锚点链接
        1.
        2.标签中加ID属性：
  

  7. 表单标签

  
  定义一个 HTML 表单，用于用户输入
      - action属性：
           url地址
      - method属性：
           提交方式：get/post
      - name属性：
           表单名称
  
     
      单标签，定义一个输入控件
          男
            用于绑定表单元素，定义 input 元素的标注，跳转到对应表单元素，必须搭配input标签使用,for对应元素id值
          - type属性
              button：可点击按钮，集合js使用
              checkbox：复选框
              file：上传文件
              hidden：隐藏输入字段
              image：图像形式的提交按钮
              password：密码字段，字符被掩码
              radio：单选按钮，单选：name值必须相同
              reset：重置按钮，清空表单数据
              submit：提交按钮（往后台传递数据）
              text：单行输入字段，默认20字节
          - name属性：用户自定义名称，和value属性都是用于后台传递
          - value属性：用户自定义值，设定控件默认值
          - checked属性：首次加载时被选中
          - maxlength属性：输入字符的最大长度
      
  定义围绕表单中元素的边框
      
  定义一个计算的结果
      
  定义 fieldset 元素的标题
      定义按钮
    定义选择列表（下拉列表）
      选项1
        定义选择列表中相关选项的组合
        定义选择列表中的选项，option中定义selected属性可默认选中
    
      文本3行20个文字，60字节的文本域（会自动累加，一般用CSS设定）
  表单的排版一般结合表格无边框来使用
  

• HTML实体转义

  符号	转义表示
  小于号（<）	<
  大于号（>）	>
  与号（&）	&
  空格
  版权（©）	©
  乘号(×)	×
  除号(÷)	÷

• VS code插件推荐

open in browser ：浏览器打开
JSS-CSS-HTML formatter：自动格式化代码
auto rename tag：自动重命名配对的标签
CSS Peek：追踪至样式

• HTML5新特性
  1. 语义化标签

  l
  ：头部标签
  导航栏标签
  ：文章内容标签
  ：定义文档某个区域
  ：侧边栏标签
  ：末尾标签
  注意事项：
      1.都是双标签，可以多次使用
      2.需要转换成块级元素
  

  2. 多媒体标签

  l
  

  3. input类型

  l
  type=“email”
      限制用户输入必须为Email类型
  type=“url”
      限制用户输入必须为url类型
  type=“date”
      限制用户输入必须为date类型
  type=“number”
      限制用户输入必须为数字类型
  type=“tel”
      手机号码
  type=“search”
      搜索框
  type=“color”
      生成一个颜色选择表单
  注意事项：
      1.必须添加form表单域
      2.点击提交按钮的时候会验证合法性
  

  4. 表单属性

  l
  required=“required”
      该属性内容不能为空，必填
  placeholder=“提示文本”
      提示信息，默认不显示
  autofocus=“focus”
      自动聚焦，页面加载后自动聚焦到指定表单
  multiple=“multiple”
      可以多选文件提交
  autocomplete=“on/off”
      根据上一次填写，自动补全
      前提是必须有name属性，同时成功提交