Html和Css学习笔记-html进阶-html5属性
此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签,元素,属性的具体意义。
这里所介绍的html和css的版本为html5与css3
Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言
Css是层叠样式表(英文全称:Cascading Style Sheets)是一种用来html和xml等文件样式的计算机语言,CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
Html和Css验证工具的地址:http://validator.w3.org/
一.html5标准新增的标签
1.<header> 标签定义文档或者文档的一部分区域的页眉
2.<footer>定义一个区块的底部和整个文档的页脚
3.<aside>标签定义文章的侧栏
4.<section>定义文档的主要区块
5.<time datetime="xxxxx">定义元素的日期和时间
6.<article>用于标记类似新闻报道或博客帖子等独立的内容
7.<nav>标签定义导航链接的部分
8.<progress>显示任务的完成进度
9.<mark>突出显示某些文本
10.<meter>显示某个范围的度量
11.<canvas>用来在页面显示用javascript绘制的图像和动画
12.<figure>用于定义类似照片,图表甚至代码清单等独立的内容
13.<video>标签定义视频,,可用的参数如下:
(有些浏览器不支持html5播放器,则在下面加入<object>标签,如果浏览器不支持html5视频则会使用flash视频)
值 | 描述 |
---|---|
autoplay | 如果出现该属性,则视频在就绪后马上播放。 |
controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
pixels | 设置视频播放器的高度。 |
loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 |
preload |
如果出现该属性,则视频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 |
url | 要播放的视频的 URL。 |
pixels | 设置视频播放器的宽度。 |
poster | 提供一个可选的海报图像 |
codecs | 指定使用哪个编解码器对视频和音频编码,来创建编码的视频文件 |
二.建立表格
1.所需要使用的属性:
(1)<table>标记内容为表格
(2)<tr>标记内容为一行
(3)<th>标记内容为一列,使用rowspan参数可以实现跨多行显示
(4)<caption>标记内容为表格的标题
(5)border-colllapse:属性设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示
2.知识要点
(1)表格提供了一种在html中指定表格数据的方法
(2)表格由行中的数据单元格组成
(3)列隐含的定义在行中
(4)表格中的列数就是行中数据单元格的个数
(5)一般来讲,表格不用来提供表现,那是css的工作
(6)表格中可嵌套表格
三html表单,建立交互
1.加入一个表单
<form action="url" method="POST">xxxxxx</form> form开始标记为表单 action链接web服务器的地址 method确定表单数据如何发送到服务器
2.表单使用的元素
1.<fieldset>包围一组输入元素
2.<legend>为一组表单提供标签
3.表单里的内容
(1)文本输入框
<input type="text" name="输入框显示的内容">
(2)提交输入
<input type="按钮的名字">
(3)单选钮输入
<input type="radio" name="给定选项关联的按钮的名字" value="按钮的不同值">
(4)复选框
<input type="checkbox" name="复选框的名字"value="复选框的值">
(5)文本区
<textarea name="属性的名字" rows“设定文本的高度”cols="设定文本的宽度">xxxxx</textarea>
(6)菜单控件
单选菜单
<select name="元素的名字"><potion value="元素的名字">xxxx</potion><potion value="元素的名字">xxxx</potion><potion value="元素的名字">xxxx</potion> </select>
多选菜单
<select name="元素的名字" multiple><potion value="元素的名字">xxxx</potion><potion value="元素的名字">xxxx</potion><potion value="元素的名字">xxxx</potion> </select>
(7)数字输入
<input type="number" min="最小值"max="最大值">
(8)范围输入
<input type="range" min="最小值" max="最大值"step="间隔数">
(9)颜色输入
<input type="color">
(10)日期输入
<input type="date">
(11)email输入
<input type="email">
(12)tel输入
<input type="tel">
(13)url输入
<input type="url">
(14)密码输入
<input type="password" name="xxxxx">
(15)文件输入
<input type="file" name="xxxx">
(16)提供一个提示
<input type="text"placeholder="提示内容">
(17)设置选项必填
<input type="text" placehollder="提示内容"required>
四.新增的杂乱的知识
1.伪元素(语法与伪类 类似)
p:first-letter{ }
2.属性选择器
img[width]{参数}选择html中所有包含width属性的图像 img[height="300"]{参数}选择height属性值为300的图像 image[alt~="flowers"]{参数}选择alt属性包含单词“flowers”的所有图像
3.开发商特定的css属性
-moz-transform mozilla浏览器 -webkit-transform safari或chrome浏览器 -o-transform opera浏览器 -ms-transform ie浏览器
4.加入音频
<audio src-"音频文件的路径" id="id名字"> xxxxxxxxx </audio>
转载于:https://www.cnblogs.com/renren-study-notes/p/10499535.html
Html和Css学习笔记-html进阶-html5属性相关推荐
- CSS学习笔记——动画进阶(八音盒动画效果)
八音盒动画制作: 通过学到了CSS3动画以后,发现通过动画也是可以制作八音盒,话不多说,走起! Demo代码: HTML片段 <body><section><div> ...
- CSS学习笔记 02、文字属性与继承性
文章目录 前言 一.文本与字体属性 1.1.文本样式属性 1.2.字体样式(font-xxx) 常用样式 使用开源字体(阿里巴巴普惠体) ①线上方式 ②本地方式(建议) 二.继承性 2.1.具有继承性 ...
- 【温故知新】CSS学习笔记(字体样式属性)附加篇
CSS字体样式属性 目录 CSS字体样式属性 一.font属性 二.color属性 三.line-height 行间距(行高) 四.text-align 水平对齐方式 五.text-indent 首行 ...
- 【温故知新】CSS学习笔记(字体样式属性)
CSS字体样式属性 一.font-size:字号大小 该属性可以使用相对长度单位(推荐),也可以使用绝对长度单位,推荐使用像素单位px. 相对长度单位 说明 em ...
- HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- jqGrid 学习笔记整理——进阶篇(一 )
jqGrid 学习笔记整理--进阶篇(一 ) 本篇为基础篇的扩展,使其具有增.删.改.查的基本功能. 在浏览导航栏添加所需按钮 <!DOCTYPE html> <html>&l ...
- Metro UI CSS 学习笔记之一:简介和Metro UI CSS 环境搭建
简介: Metro UI CSS 是一套用来创建类似于Windows 8 Metro UI风格网站的样式. 这组风格被开发成一个独立的解决方案.Metro UI CSS包含两种类型的许可证: MIT和 ...
- CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 参考文章: (1)CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 (2)https://www.cnblogs. ...
- 前端篇--------1.css学习笔记
1.css 单行文本换行溢出解决方案(css三件套) white-space:nowrap overflow:hidden text-overflow:ellipsis 2.css m ...
- HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
最新文章
- 报告解读 | 智能技术“核聚变”催生智能经济,将拉动十万亿市场
- Ubuntu 14.10安装libvirt KVM
- 关于管理的经典故事(员工激励)
- c ++查找字符串_C ++类和对象| 查找输出程序| 套装4
- 虚拟机从网卡路由问题
- InTouch离线激活教程
- 在使用Git提交代码的时候犯了个低级错误
- 关于变量声明的var,let,const
- 为了找出最好用的安卓模拟器,我发起了一项众测
- 机器学习基石 作业三
- Unity插件——Odin 学习笔记(一)
- ubuntu20.04.1下安装qt4相关依赖库
- python 矩阵求转置、行列式、迹、求逆
- MFC picture控件加载透明png图片
- 我运营公众号这一个月
- uni-app离线打包遇到的坑
- springmvc重定向到另一个项目_Spring MVC重定向和转发详解
- MFC之图像绘制---高速绘图控件(High-speed Charting Control)应用(二)
- 单片机光敏电阻c语言程序怎么写,STC12C5A60S2 单片机,光敏电阻,步进电机,制作寻光器,始终指向光源...
- 电脑主机选购---内存条,光驱
热门文章
- 汇编学习--7.10--程序编写
- C语言:求矩阵对角线元素的和
- 云起智慧中心连接华为_华为新款鸿蒙产品企业智慧屏亮相:可连接电脑和手机多屏协同工作...
- android手机测试用例,Android手机测试用例-从事手机测试必备
- linux exec 脚本之家,详解Shell脚本中调用另一个Shell脚本的三种方式
- 计算机逻辑运算进位,二进位数进行逻辑运算1010AND1001的运算结果
- 计算机打出音乐小樱,《火影忍者》插曲——小樱主题曲
- Hive date_format函数入门
- presto安装及入门
- iOS Android 上传代码库+持续集成+单元测试