HTML5初学总结
基本标签的使用
<!doctype html> <!--这是HTML5的申明,大小写都可以-->
<html>
<head>
<title>标题</title>
<meta charset=”utf-8” /> <!--设置页面编码-->
<meta name=”keywords” content=”关键字1,关键字2,…" />
<meta name="description" content="内容介绍" />
</head>
<body>
<br /> <!--换行符-->
<p align=”right”>这是一个向右对齐的段落</p>
<h1>标题文本是有6个,由h1至h6,越来越小</h1>
<b>定义粗体文本</b>
<i> 定义斜体文本 </i>
<del>定义删除文本</del>
<sup>定义上标字</sup>
<sub>定义下标字</sub>
<a href=”URL” title=”链接提示信息” target=”链接打开方式(_blank,_self,_top)”>超链接</a>
<a href=”mailto:邮箱地址”>邮件链接</a>
<a href=”tel:电话号码”>一键拨打</a>
<a href="sms:139xxxxxxx">一键发送短信</a>
<img src="URL" width="宽度" height="高度" alt="替代文字" usemap="#map 名称" /> <!--图像热区(shape的取值rect,circle,poly)-->
<map name="map 名称">
<area shape="形状" coords="坐标值" href="URL" />
</map>
</body>
</html>
无序列表/有序列表
语句:
<ul>
<li>无序列表</li>
<li>可通过type属性来设置列表样式</li>
<li>具体的值为disc,Circle,square</li>
</ul>
<ol >
<li>有序列表</li>
<li>可通过type属性来设置列表样式</li>
<li>还可以用start设置排列的起点数值</li>
</ol>
audio(音频)/video(视频)
audio标签的语法与video标签的语法相同,只是属性方面video比audio多了几个,下面我会详细的列出来
语句:
<audiocontrols="controls">
当标签无效时,会出现这段字!
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
</audio>
属性 | 说明 |
autoplay | 如果出现该属性,则音频在就绪后马上播放。 |
controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
loop |
如果出现该属性,则每当音频结束时重新开始播放。 |
preload | 如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果 使用 "autoplay",则忽略该属性。 |
src |
要播放的音频的 URL。 |
muted |
规定视频的音频输出应该被静音。 |
下面是video比audio多的属性 |
|
poster | 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。 |
width |
设置视频播放器的宽度。 |
height | 设置视频播放器的高度度。 |
table表格
语句:
<table border="1">
<tr>
<th>row 1, cell 1</th>
<th>row 1, cell 2</th>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<table> 定义表格
<th> 定义表头
<tr> 定义表格的行
<td> 定义表格单元
属性 | 说明 |
width | 指定表格的宽度 |
height | 指定表格的高度 |
align | 指定对齐方式 |
valign | 垂直排列方式 |
cellpadding | 指定边框与内容之间的空白 |
cellspacing | 指定单元格之间的空白 |
colspan | 合并列单元格 |
rowspan | 合并行单元格 |
border | 指定表格边框的宽度 |
<iframe> 内嵌框架
语句:
<iframe src="URL" name="框架名"> ~ </iframe>
网站上的广告大多数就是使用了内嵌框架
属性 | 说明 |
width | 指定框架的宽度 |
height | 指定框架的高度 |
scrolling | 是否显示滚动条(yes,no,auto) |
frameborder | 是否显示边框(1, 0) |
hidden
hidden是HTML全局属性,标签中出现该属性,则隐藏标签,然后可使用 JavaScript 来删除 hidden 属性,使该元素变得可见。
<p hidden>这是一段隐藏的段落。</p>
HTML5初学总结的更多相关文章
- HTML5初学篇章_4
HTML5的表单所有type类型(补第一章) 类型 说明 button 定义可点击的按钮(大多与 JavaScript 使用来启动脚本) checkbox 定义复选框. color 定义拾色器. da ...
- HTML5初学篇章_3
表单的标签是<form>,它使页面与客户的互动成为可能.而它的大部分元素字自HTML2.0后就没有再改变过,由此可见这是一个多么具有卓越性的设计. <form>标签是用于创建供 ...
- HTML5初学笔记
今天学习了下HTML5的基本知识,用画笔在画布上画了几个东西,效果如图,相关代码如下,注意点总结在末尾: <!DOCTYPE html> <html> <head> ...
- HTML5初学---坦克大战基础
让小球动起来,根据键盘的W(上),D(右),S(下),A(左):键的点击移动小球 <!DOCTYPE html> <html> <head> <meta ch ...
- 初学HTML5、初入前端
学习HTML5是一个漫长的过程,当中会遇到很多技术与心态上的变化.刚开始学习,我们不能发力过猛,需要一个相对稳定的状态去面对.多关注一些自己感兴趣的网站和技术知识,建立自己的信心与好奇心,为以后的学习 ...
- 初学HTML5系列三:事件
Window 事件属性 针对 window 对象触发的事件(应用到 <body> 标签): 属性 值 描述 onafterprint script 文档打印之后运行的脚本. onbefor ...
- 初学HTML5系列二:HTML5新增的事件属性
Window事件属性: 属性 值 描述 onafterprint script 文档打印之后运行的脚本. 属性发生于用户设置页面打印并且打印对话框已出现之后. onbeforeprint scri ...
- 初学HTML5系列一:简单介绍
最近很闲,就想着学点东西,然后就瞄中了html5,以前只看过很简单的一些,这次是系统的学下,顺便也记录下.废话不多说,开始正题. 稍微介绍下html5,html5是W3C和WHATWG 合作的结果. ...
- 初学HTML5
Document 什么是HTML5? 首先了解html:html即超文本语言,这是一种语法简单.结构清晰的语 解析型文档,他不同于其他的编程语言. html5就是html网页标记语言的第五次重大更新产 ...
随机推荐
- DOM兼容
-firstChild firstElementChild var oFirst = oUl.firstChild || oUl.firstElementChild; -lastChild la ...
- SQL Server2008函数大全(完整版)
SQL2008 表达式:是常量.变量.列或函数等与运算符的任意组合. 1. 字符串函数 函数 名称 参数 示例 说明 ascii(字符串表达式) select ascii('abc') 返回 97 返 ...
- loadrunner通过C语言实现字符的替换(只能替换单个字符,慎用)
如果按照普通的定义字符串就会出现以下错误: 解决方法如下: 将双引号改成单引号: lr_searchReplace(abc,"test",' ','+'); Action也可以这些 ...
- hdu1010 dfs+奇偶性减枝
Tempter of the Bone Problem Description The doggie found a bone in an ancient maze, which fascinated ...
- 学习笔记总结---关于sass
今天跟大家共同分享交流一下关于sass的知识点: sass的产生: css不是一种编程语言,我们可以用它开发网页样式,但不能用它进行编程.它没有常量,变量,也没有条件语句,只是对属性一行行的描述,资料 ...
- Codeforces Round #343 (Div. 2)
居然补完了 组合 A - Far Relative’s Birthday Cake import java.util.*; import java.io.*; public class Main { ...
- HDU4758 Walk Through Squares(AC自动机+状压DP)
题目大概说有个n×m的格子,有两种走法,每种走法都是一个包含D或R的序列,D表示向下走R表示向右走.问从左上角走到右下角的走法有多少种走法包含那两种走法. D要走n次,R要走m次,容易想到用AC自动机 ...
- oracle性能优化----处理大数据量数据
场景:对2千万个数据,修改他们的名字加上后缀“生日”. 普通sql: and not regexp_like(title, '生日'); 优化sql: declare type rid_Arra ...
- WPF: 旋转Thumb后,DragDelta移动距离出错的解决
当Thumb跟随Grid旋转90度后,拖拽控件时会飞掉. <Grid x:Name="gridMain" Width="100" Height=" ...
- BZOJ4573 : [Zjoi2016]大森林
扫描线,从左到右依次处理每棵树. 用set按时间顺序维护影响了这棵树的所有操作,那么一个点的父亲就是它前面第一个操作1. 用Splay维护树的括号序列,那么两点间的距离就是括号数量减去匹配的括号个数. ...