• HTML5学习


    初识 HTML

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

    2. w3c标准 world wide web (万维网)

      w3c标准包括

      • 结构化标准语言(HTML、XML)

      • 表现标准语言(CSS)

      • 行为标准语言(DOM、ECMAScript)

    HTML基本语法

    1. 标签

    ​    <!DOCTYPE html>是指此HTML按h5标准编写
        lang是指语言 规定编码格式utf8 网页的标题
    • 标题标签 h(n)

    • 段落标签 <p></p>

    • 换行标签 <br/>

    • 水平线标签 <hr/>

    • 粗体斜体标签

        <strong></strong> <b></b>

        <i></i><em></em>

    • 特殊符号

      空格& nbsp; 大于& gt; 小于& lt; 版权符号& copy;

    • 图片标签img <img scr="./img01.jpg" alt="未成功加载" title="悬停信息" height="" width=""/>

    • 链接标签a

      href:目的网址、锚点(#):通过#要跳转到的name名、邮件(mailto)通过写mailto:邮件地址即可打开本地邮件应用

      target:

      • _blank 新窗口打开

      • _self 本网页打开(默认)

    • 列表标签

      无序列表ul(li)有个type属性, 可指定编号类型

      有序列表ol(li)

      定义列表dl(dt dd)

    • 表格

      table标签

      tr行 td列

      colspan 跨列 rowspan跨行

    • 媒体元素

      • video

      • audio

      属性

      controls 控制台

      aotuplay 自动播放

    1. 行内元素和块级元素的区别

      行内元素

      • 与其他行内元素并排

      • 不能设置宽高,默认的宽度就是文字的宽度

      块级元素

      • 霸占一行,不能与其他任何元素并列。

      • 能接受宽高,如果不设置宽度,那么宽度将默认变为父级的100%。

    在HTML的角度来讲,标签分为:

        文本级标签:p , span , a , b , i , u , em

        容器级标签:div , h系列 , li , dt ,dd

        p:里面只能放文字和图片和表单元素,p里面不能放h和ul,也不能放p。

      从CSS的角度讲,CSS的分类和上面的很像,就p不一样:

        行内元素:除了p之外,所有的文本级标签,都是行内元素。p是个文本级标签,但是是个块级元素。

        块级元素:所有的容器级标签,都是块级元素,以及p标签。

    页面结构分析

    元素名描述
    header 标记头部区域
    footer 标记脚部区域
    section web页面中一块独立的区域
    article 独立的文章内容
    aside 相关内容或应用(位于侧边栏)
    nav 导航类辅助
    • 内联标签iframe

      src: 路径

      name:框架表示名

      width:高度

      height:宽度

      name:框架表示名 可使用a标签中的target属性进行跳转

      iframe src="" name="MyIframe"></iframe

      a herf="http://www.baidu.com" target="MyIframe">点击跳转</a

    • 表单form

      action:目的网址

      method:提交方式 两种方式:get和post

      form中的input标签

      属性说明
      type 指定元素的类型,如text文本、password密码、checkbox多选框、radio单选、reset重置、file文件、hidden、image点击图片提交、button按钮、submit提交
      name 指定元素名称,方便后端获取数据
      value 内容的初始值
      size 指定表单元素的初始宽度
      maxlength 能输入的最大字符数
      checked 指定radio或者checkbox的元素是否被默认选中
    • 下拉选择

      select 包含 option

      属性 : value值 selected默认被选中

    • 文本域

      textarea

      属性:cols可容纳列数 rows可容纳行数

    • 文件域

      input value="file"

    • 数字

      input type="number" max最大值 min最小值 step跨度(即一次可增加或减小多少长度的值)

    • 滑块

      input type="range" max最大值 min最小值 step属性

    • 搜索框

      input type="search"

    禁用:disabled

    隐藏:hidden

    只读:readonly

    label标签:增强鼠标可用性

    通过label属性 for="id名称"即可实现绑定

    表单初级验证

    placeholder:提示输入,用户输入框中

    required:不能为空

    pattern: 正则表达式

    正则表达式查询网站:www.jb51.net/tools/regexsc.htm

    注释

    <!-- -->

     

  • 相关阅读:
    快速排序
    Java 循环队列
    Java 用链表实现栈和队列
    Java 遍历集合时产生ConcurrentModificationException异常
    Java 使用Scanner时的NoSuchElementException异常
    Mac中安装git后,终端运行git出错,提示安装Xcode
    Java的设计模式之开篇(1)
    粒子群算法(PSO)
    mysql时间与字符串相互转换
    Jsp中使用EL表达式对字符串进行操作
  • 原文地址:https://www.cnblogs.com/Patrick20726/p/13400073.html
Copyright © 2020-2023  润新知