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

注释

<!-- -->

 

posted @ 2020-07-29 22:30  小张张ya  阅读(196)  评论(0编辑  收藏  举报