HTML5
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了HTML5,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含4888字,纯文字阅读大概需要7分钟。
内容图文
![HTML5](/upload/InfoBanner/zyjiaocheng/1000/c52b9462bdf64a0ca4d4041623bb8584.jpg)
HTML5
网页基本信息
<DOCTYPE:告诉浏览器我们使用什么规范>
<head>标签代表网页头部</head>
<body>标签代表网页主体</body>
<title>网页标题</title>
<meta描述性标签,它用来描述网站的基本信息></meta>
网页基本标签
标题标签
一级标题<h1>内容</h1>
二级标题<h2>内容</h2>
段落标签 <p>内容</p>
换行标签 <br/>
水平线标签 <hr/>
粗体标签 <strong>内容</strong>
斜体标签 <em>内容</em>
特殊符号
空格  ;
大于 >;
小于 <;
版权符号 ©;XXX
注释<!--内容-->
图像标签
<img src="图片路径" alt="图像的代替文字" title="鼠标悬停提示文字" width="图像宽度" height="图像高度">
../ 表示上级目录
src 必填
alt 必填
链接标签
页面间链接
<a href="链接路径" target="目标窗口位置,就是在哪个窗口打开(常用值:_self、_blank)">链接文本或图像</a>
href 必填
链接文本或图像位置 放置图像标签即为图片
_self 在当前窗口打开
_blank 新建窗口打开
锚链接
<a id="top">顶部</a>
使用id作为标记,锚链接的锚
HTML5弃用name,用id来代替
<a href="#top">回到顶部</a>
功能性链接
邮件链接:mailto
<a href="mailto:3478239019@qq.com">E-mail me</a>
QQ链接:参考QQ推广,会给你生成链接代码
行内元素和块元素
块元素:无论内容多少,该元素独占一行
比如标题标签,段落标签......
行内元素:内容撑开宽度,左右都是行内元素的可以排在一行
比如链接标签,粗体标签......
列表标签
有序列表
<ol>
<li>内容</li>
<li>内容</li>
<li>内容</li>
</ol>
无序列表
<ul>
<li>内容</li>
<li>内容</li>
<li>内容</li>
</ul>
自定义列表
<dl>
<dt>列表名称</dt>
<dd>内容</dd>
<dd>内容</dd>
</dl>
表格标签
<table border="1px">
<tr>
<td colspan="3">1-1</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
</tr>
</table>
table 表格
tr 行
td 列
border 边框 1px 指定边框宽度
colspan 跨列
rowspan 跨行
媒体元素
<video src="path" controls autoplay></video>
<audio src="" controls autoplay></audio>
video 视频文件
audio 音频文件
src 文件路径
controls 控制条
autoplay 自动播放
页面结构分析
元素名 | 描述 |
---|---|
header | 标题头部区域的内容(用于页面或页面中的一块区域) |
footer | 标记脚部区域的内容(用于整个页面或页面的一块区域) |
section | Web页面中的一块独立区域 |
article | 独立的文章内容 |
aside | 相关内容或应用(常用于侧边栏) |
nav | 导航类辅助内容 |
iframe内联框架
在当前网页嵌套一个别的网页
<iframe src="引用页面地址" name="框架标识名" width="宽度" height="高度">
</iframe>
src 地址
name 可以用于target,在此内联框架打开
表单语法
一般用法是网页的登录和注册
<form method="post|get" action="result.html">
<p>名字:<input type="text" name="username" value="梦寐" maxlength="8" size="20"></p>
<p>密码:<input type="password" name="pwd"></p>
<p>性别:
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<p>爱好:
<input type="checkbox" value="sleep" name="hobby"/>睡觉<input type="checkbox" value="game" name="hobby"/>游戏
</p>
<p>国家:
<select name="国家">
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="eth">瑞士</option>
</select>
</p>
<p><!--文本域-->反馈
<textarea name="textarea" cols="10" rows="10">文本内容</textarea>
</p>
<p><!--文件域-->
<input type="file" name="files">
</p>
<P>邮箱验证
<input type="email" name="email">
</P>
<P>URL验证
<input type="url" name="url">
</P>
<P>数字验证
<input type="number" name="num" max="100" min="10" step="10">
</P>
<P>滑块
<input type="range" name="voice" max="100" min="0" step="1">
</P>
<P>搜索:
<input type="search" name="search">
</P>
<p>
<!--增强鼠标可用性-->
<label for="mark">点击文本跳转输入框</label>
<input type="text" id="mark">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
method 规定如何发送表单数据 常用值get、post
action 表示向何处发送表单数据
文本输入框<input type="text"......>
value 默认初始值
maxlength 最长能写几个字符
size 文本框的长度
密码框<input type="password"......>
radio 单选框 用name分组
checkbox 多选框
select 下拉框
textare 文本域
file 文件域
email 邮箱 带有很low的验证
url URL 带有验证
number 数字带有验证
range 滑块
search 搜索框
直接添加不需要赋值
checked 单选框和多选框的默认选中
selected 下拉框的默认选中
readonly 只读
disable 禁用
hidden 隐藏
label 增强鼠标可用性
以下为按钮,写法差不多
button 按钮
image 图片按钮 需要路径src
submit 提交
reset 重置
get方式提交:我们可以在URL中看到我们提交的信息,不安全,高效
post方式提交:比较安全,可以传输大文件
表单元素格式
属性 | 说明 |
---|---|
type | 指定元素类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button,默认为text |
name | 指定表单元素的名称 |
value | 元素的初始值。type为radio时必须指定一个值 |
size | 指定表单元素的初始宽度。当type为text或password是,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位 |
maxlength | type为text或password时,输入的最大字符数 |
checked | type为radio或checkbox时,指定按钮是否被选中 |
表单初级验证
常用方式
placeholder 提示信息
required 判断非空
pattern 用正则表达式判断是否合法,不知道哪段正则表达式就去百度https://www.jb51.net/tools/regexsc.htm
<form method="post|get" action="result.html">
<p>placeholder
<input type="text" name="username" placeholder="请输入用户名">
</p>
<p>required
<input type="text" name="username" required>
</p>
<p>
<input type="text" name="username" pattern="一段正则表达式">
</p>
</form>
内容总结
以上是互联网集市为您收集整理的HTML5全部内容,希望文章能够帮你解决HTML5所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。