分享学习笔记

来源：互联网发布：维基百科云计算定义编辑：程序博客网时间：2024/06/07 12:57

最近学习HTML5，一些笔记

学习过程中的一些笔记和截图：

页面布局
表单元素
全局属性

页面布局

布局

<body>块header<header>标头：logo，标题，导航    <hgroup>h1~h6标题分组    </hgroup>    <nav>这是一个导航</nav></header><section>        文档主题部分</section><article>小主体（独立成篇的文档）    <header>        <nav></nav>    </header>    <section></section>    <footer></footer></article><aside>..</aside><footer>页面尾部：版权申明，友情链接    <address>联系信息</address></footer></body>

Html5新标签

<figure>    <figcation>这是一张图片</figcation>    <img src=””/></figure>

表单元素

form 表单
Button在form元素中具有提交功能
Input的type默认是text
Method的post方式提交时url地址栏后没有参数，get方式提交url回跟参数
Autocomplete是否用户输入过的数据on/off

<form action=”http://www.baidu.com“ id=”fromId” method=”get” name=”reg”  target=”_black” autocomplete=”on”>    <fieldset>//进行分组        <legend>注册分组</legend>        <label  for=”user”>用户名：</label><input  id=”user”  name=”User”  autofocus disabled  autocomplete=”off” /><label>            电子邮件：<input  name=”email”  form=” fromId”/></label></fieldset>Button提交按钮中这些属性覆盖form中的属性<button  type=”submit”>提交</button>//默认情况下type是submit<button  type=”reset”>重置</button>//恢复到文本框默认的value值<button  type=”button”>重置</button>//只是普通没有意义按钮配合js使用</form>Form使表单外元素提交电子邮件：<input  name=”email”  form=” fromId”/>

input

当Type为text时的属性Required作用是如果不填写提示“请填写此字段”Placeholder作用是文本提示，光标放上去就没有了<form>    用户名：<input  type=”text”  list=”abc”  required  placeholder=”请输入用户名”/></form><datalist>    <option  value=”1” >苹果</option>    <option  value=”2” >橘子</option>    <option  value=”3”  label=”香蕉”></option>    <option  value=”菠萝” > </option></datalist>

这里写图片描述

<select multiple="multiple" size="20" style="width:200px;">            <optgroup label="水果">                <option>水果</option>                <option value="1" selected>水果</option>            <option>水果</option>            </optgroup>            <optgroup label="粗粮">                    <option>粗粮</option>                    <option>粗粮</option>                    <option>粗粮</option>            </optgroup></select>效果图如下：

这里写图片描述

计算

<form action="http://li.cc" oninput="res.value=num1.valueAsNumber*num2.valueAsNumber">        <p>             <input type="number" id="num1" />*<input type="number" id="num2" />=            <output for="num1 num2" name="res"></output>            <button>提交</button>        </p></form>效果图如下：

这里写图片描述

这里写图片描述

表单验证（html5提供，但是简陋不好看、浏览器兼容问题，最好使用前端jquery库等）

元数据

<meta name="author" content="ldm" /><meta name="keywords" content="html5,csss" /><meta charset="utf-8" />作用同下<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="refresh" content="3;http://www.baidu.com" />3秒钟刷新到百度

全局属性

这里写图片描述
!important是css样式最高级
.abc{Color:red !important}

这里写图片描述

0 0