一、HTML&HTML5
文章目录
1、列表
1.无序列表
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
2.有序列表
列表项目默认使用数字进行标记，type可设置字母进行标记
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
3.自定义列表
自定义列表以
标签开始。每个自定义列表项以 开始。每个自定义列表项的定义以
- 开始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
2.区块
一般span用来包裹文字。
包裹标签才能定义样式
<div style="color: blue;background-color: aquamarine;width: 100px;height: 200px;">
aaaaaa
</div>
<span style="color: red;background: sandybrown;">[span]bbbbbb</span>
[空白]bbbbbb
<span style="color: aqua;">你好，</span><span style="color: bisque;">HTML！</span>
3.布局
div 元素是用于分组 HTML 元素的块级元素
使用 HTML
标签是创建布局的一种简单的方式。
大多数站点可以使用
或者 元素来创建多列。
<!-- RGB:red0-255 green255 blue255 -->
<!-- r:FF g:FF b:FF -->
<!-- div分块 -->
<div style="width:500px">
<!-- 标题部分 -->
<!-- FFD700:r:255 g:215 b:00 -->
<div style="background-color: #FFA500;">
<h1 style="margin-bottom: 0px;">主要的网页标题</h1>
</div>
<div style="background-color:#FFD700;height:200px;width:100px;float: left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</div>
<div style="background-color:#EEEEEE;height:200px;width:400px;float: left;">
内容在这里
</div>
<div style="background-color:#FFA500;text-align: center;">
版权 © runoob.com
</div>
</div>
4.表单
<!-- 表单：提交用户填写的数据。登录注册、填写信息 -->
<form>
★★button（按钮）：<input type="button" value="Button按钮"/><br/>
★★checkbox(复选框，提交的是value)：
<input type="checkbox" value="football"/>足球
<input type="checkbox" value="lq"/>篮球
<input type="checkbox" value="rap"/>rap
<br/>
color(颜色选择器)：<input type="color"/><br/>
★date（日期选择器【年月日】）：<input type="date"/><br/>
datetime（无用，废弃）：<input type="datetime"/><br/>
datetime-local（年月日，时分）：<input type="datetime-local"/><br/>
email（必须符合邮箱格式才能提交@和.）：<input type="email"/><br/>
★★file（文件上传）：<input type="file"/><br/>
★★hidden（标签隐藏，不占空间，这个123会被一起提交）：<input type="hidden" value="123"/><br/>
image（a和img的组合标签，作用是提交表单数据）：<input src="img/help.jpg" type="image"/><br/>
month（只有年月）：<input type="month"/><br/>
★number（只能输入数字）：<input type="number"/><br/>
★★password（隐藏输入内容）：<input type="password"/><br/>
★★radio（单选按钮，提交的是value值，value是不会显示的）：
<input type="radio" value="man" name="sex"/>男
<input type="radio" value="woman" name="sex" checked/>女
<br/>
range（数字选择范围条）：<input type="range" max="100" min="1"/><br/>
★★★★reset（重置按钮，点击之后清空表单的所有内容）：<input type="reset"/><br/>
★search（多了一个x可以清空内容）：<input type="search"/><br/>
★★★★submit（与image一个效果，提交表单，默认value是“提交”）：
<input value="提交我的表单" type="submit"/><br/>
tel（无用）：<input type="tel"/><br/>
★★text（普通文本框，什么都可以输入）：<input type="text" maxlength="10"/><br/>
time（只有时和分）：<input type="time"/><br/>
url（必须要有http://或者https://）：<input type="url"/><br/>
week（选择一年的中第几周）：<input type="week"/><br/>
★★下拉框（如果option有value属性值，提交value，如果没有value，提交option中间的这个值）：
<select>
<option value="0000">1111</option>
<option>2222</option>
<option>3333</option>
<option>4444</option>
</select><br/>
文本域：
<textarea rows="10" cols="12">adsada啊实打</textarea>
</form>
5.表单(H5新增)
1.新增下拉框
输入框 (list–datalist的id>)
注意: Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 标签。
<form id="f1" action="" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<hr/>
2.加密标签
加密:
用户名: <input type="text" name="usr_name" />
加密: <keygen name="security"><!-- 不支持 -->
<hr/>
3.H5新增属性
3.1 novalidate
去掉系统默认的验证
当该属性被添加到 元素上时，浏览器将不会执行默认的表单验证，不会检查输入字段是否符合指定的验证规则。
使用 novalidate 属性可以让开发者完全控制表单验证的逻辑，可以通过 JavaScript 或其他方式来自定义表单验证的行为。
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email"><br>
3.2 autofocus
自动聚焦
autofocus 属性规定在页面加载时，域自动地获得焦点。
First name:<input type="text" name="kname" autofocus>
3.3 file
用于上传文件
单文件上传：<input type="file"/><br>
多文件上传：<input type="file" multiple/>
3.4 country_code
直接在标签中填写正则表达式验证
Country code: <input type="text" name="country_code" title="必须是3个字母" pattern="[A-Za-z]{3}" required/>
3.5 placeholder
未填写内容的时候显示的提示
<input type="text" name="jname" placeholder="请输入名字">
3.6 min step
输入间隔
<input type="number" name="points" min="1" step="3">
6.音频和视频
1.音频标签( MP3, Wav, 和 Ogg)
2.使用source(第二种写法)
3.视频标签（MP4, WebM, 和 Ogg）
<audio src="data/7copy、BT07 - 晚风.mp3" controls></audio>
<hr/>
<!-- -->
<audio controls>
<source src="data/183club - 真爱.mp3" type="audio/mpeg"/>
</audio>
<hr/>
<video src="data/movie.mp4" controls></video>
7.字符实体
<!-- XML都是用这种 -->
1 < 2 & 3 <br/>
大于号（great than）：> <br/>
小于号（less than）：< < <<br/>
等于：=<br/>
大于等于（great equals）：≥<br/>
小于等于（less equals）：≤<br/>
不等于：（not equals）：≠<br/>
A（65）：A
空格：
<!-- 0100 0001 0100 0010 0100 0011 0100 0101 -->
<!-- 65 66 67 69 -->
<!-- A B C E -->
显示结果 描述 实体名称 实体编号
空格  
< 小于号 < <
> 大于号 > >
& 和号 & &
" 引号 " "
' 撇号 ' (IE不支持) '
￠ 分 ¢ ¢
£ 镑 £ £
¥ 人民币/日元 ¥ ¥
€ 欧元 € €
§ 小节 § §
© 版权 © ©
® 注册商标 ® ®
™ 商标 ™ ™
× 乘号 × ×
÷ 除号 ÷ ÷
8.新增标签
标签 描述
<article> 定义页面独立的内容区域。
<aside> 定义页面的侧边栏内容。
<bdi> 允许您设置一段文本，使其脱离其父元素的文本方向设置。
<command> 定义命令按钮，比如单选按钮、复选框或按钮
<details> 用于描述文档或文档某个部分的细节
<dialog> 定义对话框，比如提示框
<summary> 标签包含 details 元素的标题
<figure> 规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption> 定义 <figure> 元素的标题
<footer> 定义 section 或 document 的页脚。
<header> 定义了文档的头部区域
<mark> 定义带有记号的文本。
<meter> 定义度量衡。仅用于已知最大和最小值的度量。
<nav> 定义导航链接的部分。
<progress> 定义任何类型的任务的进度。
<ruby> 定义 ruby 注释（中文注音或字符）。
<rt> 定义字符（中文注音或字符）的解释或发音。
<rp> 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
<section> 定义文档中的节（section、区段）。
<time> 定义日期或时间。
<wbr> 规定在文本中的何处适合添加换行符。
扫一扫
4494
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
