(syntax)html5
2022-09-01 00:00:00 #html

html5

html 超文本标记语言

  • <!DOCTYPE html> 文档声明类型、head、body

    • head title base link meta script style meta(页面元信息) base 定义了页面链接标签的默认链接地址
    • link rel href media=“”
    • meta
      • content http-equiv（Content-Type、refresh、text/html;charset=UTF-8） name（author 作者 、description 描述、keywords 关键字、viewport 视图） charset （UTF-8） scheme content【固定属性】
      • <meta http-equiv="refresh" content="30">
      • <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      • <meta name="viewport" content="width=device-width, initial-scale=1.0">
      • <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

  • <标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>

  • 块级元素： div、h1-h6[10~+2 24]、ul、ol、li、dl、table、p、hr、form 独占一行 width\height\padding\margin可改变

  • 内联元素：span、a、img、input、textarea、label、select 并联 width、height、padding-top/padding-bottom、margin-top/margin-bottom都不可改变，就是里面文字或图片的大小

  • line-height = height 单行文字居中

  • h1~h6、p、br、hr、div、span、

    • 文本格式化 i/em b/strong sub/sup u/ins s/del small
    • 计算机输出 code kdb samp var per 预定义格式
    • 引文、引用、标签定义 abbr(缩写) address(地址) bdo(文字方向) dfn(定义一个项目) blockquote(长引用) q(短引用) cite(斜体)

  • ul(无序)/ol(有序) li dl dt dd(ltd 描述列表)

  • 单标签 <br/> <input/>

  • img(src alt) map 图形地图 area 地图可点区域

    • img srcset sizes align图片对齐方式
    • srcset属性和sizes属性分别解决了像素密度和屏幕大小的适配
    • <srcset>属性：指定多张图像，适应不同像素密度的屏幕。它的值是一个逗号分隔的字符串，每个部分都是一张图像的 URL，后面接一个空格，然后是像素密度的描述符
      • <img srcset="foo-320w.jpg,foo-480w.jpg 1.5x,foo-640w.jpg 2x" src="foo-640w.jpg"> 像素密度描述符，格式是像素密度倍数 + 字母x。1x表示单倍像素密度，可以省略。浏览器根据当前设备的像素密度，选择需要加载的图像
      • <sizes>属性:像素密度的适配，只适合显示区域一样大小的图像。如果希望不同尺寸的屏幕，显示不同大小的图像，srcset属性就不够用了，必须搭配sizes属性
        • sizes="(max-width: 440px) 100vw,(max-width: 900px) 33vw,254px"
    • base64 图片压缩模式 精灵图 雪碧图

  • <picture>< source>

  • figure figcaption <figure>标签可以理解为一个图像区块 <figcaption> 图片的文本描述 放置标题

  • a 锚点 href="mailto: tel: " targettitle name download

    • <a href="" title="" target="" id="" download="" rel="" type="" ping=""></a>
    • target _blank _self _parent _top
    • referrerpolicy crossorigin loading 懒加载

  • table

    • table th tr td colgroup col
    • 属性：width、border、align、frame rules
    • caption 表格标题
    • table thead tbody tfoot + tr + td
    • table th 标题栏 tr 行 td 列
      • border=”0”
      • cellspacing 表格单元格之间的空间
      • cellpadding 单元格与单元格内容之间的距离
    • 合并单元格 作用在 td 上
      • colspan 合并列
      • rowspan 合并行
    • colgroup 表格列的组
    • col 列属性

  • form

    • form 表单域
    • label 提升信息
    • input 输入框/select下拉菜单/textarea文本域：表单控件（表单元素）

  • iframe width height src name frameborder

  • 表单 form

    • form
      • action=“URL”(规定当提交表单时向何处发送表单数据。)
        name(名称)、
        method(get、post)(规定用于发送表单数据的 HTTP 方法)、
        target（_black、_self、_parent、_top）、
        enctype （application/x-www-form-urlencoded、multipart/form-data、text/plain)(规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method=”post” 的情况）)
        accept=”MIME_type”(HTML5 不支持。规定服务器接收到的文件的类型。（文件是通过文件上传提交的）)
        navalidate=”navalidate”(如果使用该属性，则提交表单时不进行验证。)
        accept-charset(规定服务器可处理的表单数据字符集。)
        autocomplete=”on/off”(规定是否启用表单的自动完成功能。)
    • input 输入框

      • type=”text(文本域)/password(密码)/radio(单选按钮)/checkbox(复选框)/submit(提交按钮)/button(按钮)/reset(重置按钮)/file(文件上传)email(电子邮箱)”

      • button（按钮） 、checkbox（复选框） 、radio（单选框） 、reset、submit 、image (图像作为提交按钮)

      • color （拾色器）

      • date（date 控件（包括年、月、日，不包括时间）） 、datetime （ date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区））、datetime-local （ date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区））、time（用于输入时间的控件（不带时区）） 、month ( month 和 year 控件（不带时区）)、week( week 和 year 控件（不带时区）)

      • email 、search、tel 用于输入电话号码的字段、text 、 url、password

      • file (文件选择字段和 “浏览…” 按钮，供文件上传)

      • hidden (隐藏输入字段)

      • number (用于输入数字的字段)、range 用于精确值不重要的输入数字的控件（比如 slider 控件） 滑动控件

        • max - 规定允许的最大值。
        • min - 规定允许的最小值。
        • step - 规定合法数字间隔。
        • value - 规定默认值。
    • textarea 文本域 rows cols
      • name（名称）、rows=”10”(文本区域内可见的行数。)、cols=”30”(文本区域内可见的宽度)、maxlength(规定文本区域允许的最大字符数)、disabled=”disabled”(规定禁用文本区域)、readonly
    • fieldset 一组相关的表单元素，并使用外框包含起来
    • legend filedset元素的标题
    • select option optgroup 下拉列表选项
      • <option selected="selected">
    • label 标签
    • button 按钮 name(名称)、type=”button/reset/submit”(按钮类型)、value(按钮的初始值，可由脚本修改)
    • datalist 输入控件选项列表 keygen 密钥对 output 计算结果

  • 符号实体 字符实体 & + lt/glt/reg/copy/trade/amp(和号)/deg(摄氏度)/yen/nbsp+;

  • iframe src width height frameborder=”0” class id style title 所有主流浏览器都支持 <iframe>标签

    • frameset标签 HTML5 不支持 src
    • name 名字 src 文档的url
    • 设置高度和宽度 width 和 height
    • 移除边框: frameborder="0"
    • scrolling 去除滚动条

  • media

    • video audio
    • 插件
      • object 插件 插入对象Java 小程序 PDF阅读器 Flash 播放器object data type height width usemap name form
      • embed

  • 属性 class id style title

  • color

    • RGB 和 RGBA（Color RGBA） color: rgba(red, green, blue, alpha);
    • HSL 和 HSLA
      • H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
      • S：Saturation(饱和度)。取值为：0.0% - 100.0%
      • L：Lightness(亮度)。取值为：0.0% - 100.0%
      • A：Alpha透明度。取值0~1之间。
    • 颜色名
    • 颜色值（十六进制颜色(Color HEX)） #000000 ~ #FFFFFF
    • 预定义/跨浏览器颜色名

  • 单位 px em rem % vh/vw/vmin/vmzx

  • em 是父元素 字体大小

  • rem 移动端布局方式 root em 相对单位 rem的基准是相对 html元素的字体大小 html font-size=12px 非根设置 width:2rem// 24px 修改html rem 从而修改页面中所有的元素大小

html5

  • 新特性：新元素、新属性、canvas和svg video 和 audio
    • 表单元素 和 属性
    • 本地存储、SQL数据、应用程序缓存
    • Web 应用 （地理位置、拖放、Workers、SSE、WebSocket）
  • <!DOCTYPE html> html5shiv
  • 结构元素
    • 主体结构元素
      • article 代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容
      • section 对页面中的内容进行分块
      • nav 导航
      • aside 当前页面或文章的附属信息部分，包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有别于主要内容的部分
      • time
    • 非主体结构元素 header address main footer
      • 每一个网页内部只能放置 一个main元素。不能将main元素放置在任何article、aside、footer、header、nav元素内部
  • 新增元素
    • 绘画元素 1个
      • canvas 标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API
    • 多媒体元素 5个
      • audio 定义音频内容
      • video 定义视频（video 或者 movie）
      • source 定义多媒体资源 <video> 和<audio>
      • embed 定义嵌入的内容，比如插件。
      • track 为诸如<video> 和<audio> 元素之类的媒介规定外部文本轨道。
    • 新表单元素 3个
      • datalish 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
      • keygen 规定用于表单的密钥对生成器字段。
      • output 定义不同类型的输出，比如脚本的输出。
      • input
        • color 颜色
        • email 邮箱
        • tel （电话号码）
        • number 数值的输入域
        • range 类型显示为滑动条
        • search 搜索
        • url 网址
        • file 文件
        • date（日期）、datetime(datetime 类型允许你选择一个日期（UTC 时间）)、datatime-local(允许你选择一个日期和时间 (无时区))、month(月份)、time（时间）、week（周和年）
        • min max
  • 语义元素 语义元素 = 有意义的元素 23个
    • header nav article aside section footer
    • figure figcaption dialog
    • pogress meter mark time
    • datails summary
    • dbi wbr
    • 注音 ruby rt rp
    • command

结构命名

  • header 页头
  • main 页面主体
  • footer 页尾
  • content/container 内容
  • container 容器
  • nav 导航
    • miannav 主导航
    • subnav 子导航
    • topnav 顶导航
    • sidebar 边导航
    • leftsidebar 左导航
    • rightsidebar 右导航
  • menu 菜单
    • submenu 子菜单
  • title 标题
  • summary 摘要
  • sidebar 侧栏
  • column 栏目
  • wrapper 页面外围控制
  • logo 标志
  • banner 广告
  • login 登陆
  • loginbar 登录条
  • register 注册
  • search 搜索
  • shop 功能
  • title 标题

位置

  • left center right 左中右
上一页
2022-09-01 00:00:00 #html
下一页