前端学习历程6

HTML

表单进阶-单选框

<input type="radio" name="a" id="neo" checked="b">同一组中name名同一个
<label for="neo"></label>  点击文本可以选中属性
默认选中用checked

单表进阶-复选框

<input type="checkbox" name=" " id=" ">
<label for="id名"></label>
checkbox可以选中多个属性

单表进阶-上传文件和隐藏文字段

<input type="file" name=" " id="">----上传文件
<form action=" ">
<input type="image" src=" ">----图片按钮
</form>

<input type="hidden" name=" " id=" " value="带个后端个人信息... ">----隐藏按钮

<button disabled=" "></button>-----禁用，只读的功能
<button readonly=" "></button>        

表单进阶-下拉菜单

<select size="显示几个属性" multiple>
    <option value=" " selected></option>
</select>
------------------------------------------
multiple：多选
value:提供给后端需要用的value值
selected：默认选中

表单进阶-文本域

<textarea cols="" rows=" " placeholder=" "></textarea>
-----------------------------------------------
cols、rows:列数、行数
placeholder:提示文字
默认value值是在双标签内部的

表单进阶-字段集

<fieldset>
    <legend></legend>
<fieldset/>

H5基础与语法

增强：语义化标签、增强型表单、canvas svg、音频视频、本地存储和离线存储

可省略标记的元素： 不允许写结束标记的元素：br、col、embed、hr、img、input、link、meta 可以省略结束标记的元素：li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、th、td 可以省略全部标记的元素：html、head、body、colgroup、tbody

省略引号： 属性值可以使用双引号也可以使用单引号

H5新增语义化标签

section元素 表示页面中的一个内容区块 article元素 表示一块与上下文无关的独立的内容 aside元素 在article之外的，与article内容相关的辅助信息 header元素 表示页面中一个内容区块或整个页面的标签 footer元素 表示页面中一个内容区块或整个页面的脚注 nav元素 表示页面中导航链接部分 figure元素 表示一段独立的流内容，使用figcaption元素为其添加标题（第一个或最后一个子元素的位置） main元素 表示页面中的主要的内容（ie不兼容）

video元素 定义视频

<video scr="movie.ogg" controls=" ">video元素</video>
------------------------------------------------------------
controls属性:如果出现该属性，则向用户显示控件，比如播放按钮
autoplay属性：如果出现该属性，则视频在就绪后马上播放
loop属性：重复播放
mute属性：静音属性
poster属性：规定视频正在下载时显示的图像，直到用户点击播放按钮

audio元素 定义音频

<audio src="someaudio.wav">audio元素</audio>
------------------------------------------------

增强表单-input

type="color" 生成一个颜色选择的表单 type="tel"唤起拨号盘表单 type="search"产生一个搜索意义的表单 type="range"产生一个滑动条表单 type="number"产生一个数值表单 type="email"限制用户必须输入email类型 type="url"限制用户必须输入url类型 type="date"限制用户必须输入日期 type="month"限制用户必须输入月类型 type="week"限制用户必须输入周类型 type="time"限制用户必须输入时间类型 type="datetime-local"选取本地时间

增强表单-数据列表

datalist：选项列表(模糊搜索的功能)

<datalist id=" ">
    <option value=" "></option>
    <option value=" "></option>
    <option value=" "></option>
</datalist>

（option元素永远都要设置value属性）

增强表单-属性

autofocus属性： 给文本框、选择框或者按钮控件加上该属性，当打开页面时，该控件自动获得国标焦点，一个页面只能有一个

require属性： 验证输入不能为空

multiple： 可以输入一个或多个值，每个值之间用逗号分开 例如：<input type="email" multiple/> 还可以应用file

pattern： 将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定格式 例如：<input pattern="[0-9][A-Z]{3}" title="输入内容：一个数与三个大写字母"placeholder=“输入内容：一个数与三个大写字母”>