HTML总结

1、基本概念

HTML
超文本标记语言
H Hyper
T text (超链接 图片 视频 音频等)
M markup(标记,标签 <不是编程语言>)
L language

HTML是一个树状结构,标签间是有父子,兄弟关系的

html结构
------head
显示网页信息声明 title/meta/link/script
title是必填项
-----------title
------body
------------所有可显示内容
所有要在页面主体区域显示的内容必须写在body内

文档声明头:告诉浏览器你要用的H5标准来解释当前的HTML文档

元素分类
块级元素:默认情况下,沾满爸爸整行,可以设置宽高 如:div p ul li
内联/行内元素:元素并列在同一行,不能够设置宽高,也就是说他们的内容多少决定了标签的大小 如:a span b i
img(行内块级元素/置换元素 可以设置宽高)

HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是,这三者是可以互相转换的,使用display属性能够将三者任意转换:
  (1)display:inline;转换为行内元素
  (2)display:block;转换为块状元素
  (3)display:inline-block;转换为行内块状元素

实体字符(都是以&开头;结尾的)

特殊字符 字符实体
大于号(>) >
小于号(<) <
引号" "
® ®
© ©
& &
一个英文的空格  
一个汉字的空格

结构层(HTML)、表现层(CSS)、行为层(JavaScript)
样式:模样的形式(对齐方式,颜色,宽高大小)
锚点:页内跳转,在地址栏上会拼接上#targetId
“#”回到页面顶部

2、重要标签&属性

块级元素
实际意义(应用场景):它可以作为一个容器

段落标签语言

图片标签:

  • src属性:指定显示图片的路径
  • alt属性:图片备注
  • 全局属性title:鼠标移上去的提示

  • href:指定超链接的目标网址(如果是线上地址,必须以HTTP开头的完整路径)
  • target:指定了目标链接的打开方式
    a标签绑定手机号码,发短信,发邮件,下载
锚点测试
点击请联系我
点击请联系我
点击请联系我

  • border 边框
  • cellspacing 单元格与单元格之间的间隙
  • cellspadding 内边距 内容与边框之间的距离
  • tr 表示table的一行
  • th/td 一个单元格
  • rowspan 跨行
  • colspan 跨列

  • 无序列表
      有序列表

      • start 开始下标
      • type 指定序列号类型
      • reverse 倒序

      列表标签 标题 列表 (开头有缩进)

      一些常用的行内元素

      • span标签 行内元素,包裹文字
      • sup 上标
      • sub 下标
      • b 粗体
      • i 斜体
        -mark 定义带记号文本 文本被加颜色背景

      input属性

      • placeholder 空内容时占位提示内容
      • value 可以指定input的默认值
      • autofocus 自动获取鼠标焦点
      • autocomplete 自动提示之前提交的内容
      • required 必填项,否则无法提交
      • readonly 只读
      • disabled 禁用
      • accept 文件接收类型
      • multiple 上传文件多选
      • name属性:指定向后台传值的字段(后台通过这个字段来获取用户的输入)

      type:number 并不是说,你只能输入数字,而是HTML会将内容尽量转为数字,
      它在移动端时是非常有意义的,例如电话号码输入框(弹出数字键盘)

      audio属性

      • controls 显示出控制板
      • autoplay 现在已经被谷歌浏览器禁用了,设置了也不会自动播放(可以设置捕获用户行为来进行播放)
      • loop 循环播放

      利用source解决音频兼容问题

      
      
      
      

      video属性

      • width/heigth 设置视频宽高
      • controls 显示操作台
      • Preload 预加载
      • muted 静音
      • poster 设置海报地址
      • autoplay 自动播放(目前大部分浏览器不再支持)

      Mp4 WebM Ogg
      MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
      WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
      Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

      3、重要知识点

      路径问题
      绝对路径:表示路径的完整描述信息 D:\study\classfile\2018.12.24helloworld\img
      相对路径:根据相对位置得到路径信息
      / 进入文件夹
      ./ 表示当前文件夹
      ../ 表示上一层文件夹

      form标签

      • method属性:指定通讯方式(常用get/post/put/delete)
        form表单提交的方式get和post的区别
        1.传值方式不同,get会把传递的值以URL查询字符串的形式显示在地址栏里,而post是把要传递的值放在了请求体里面,相比来说post会更安全一点,千万不要把带有密码的内容以get的方式传值.get传值多个值用&连接 用?查询字符串
        2.传输数据量的大小,因为get的内容是放在地址栏的,但是地址栏能传输数据大小是有限制的,所以get方式传输数据的大小是有限制的,大约3000字符.post方式理论上说是没有大小限制的.
        3.一般情况下需要从服务器获取数据是用get方式,一般向服务器发送数据时,用post的方式,
        4.当需要向后台传递文件信息是必须post请求,同时在form标签修改enctype属性为multipart/form-data
        其他参考资料:https://www.cnblogs.com/logsharing/p/8448446.html#!comments
        https://blog.csdn.net/qq_28483283/article/details/80207674

      src与href的区别
      使用src的标签:img JavaScript iframe
      href 超文本引用
      当前元素与外链资源建立一种联系
      src source资源引入
      当前元素正确显示必须的资源
      如果src地址写错,会影响页面显示出错,而href不会影响

      meta使用

      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      

      你可能感兴趣的:(HTML总结)