【干货】Html与CSS入门学习笔记12-14【完】
十二、HTML5标记 现代HTML
html5新增的元素:header nav footer aside section article time 这些新增元素使页面结构更清晰,取代<div id="header">这些。
还有,mark:突出显示文本。audio:插入音频。progress:显示进度条。
htime元素:<time datetime="2017-07-28">7/28/2017</time>,datetime的值是官方格式只有几种,标签内容可以随便写,是显示在页面上读者看到的。
在li中设置属性,display:inline; 元素从默认的block改成inline,会像内联元素一样在一行,且项目标号样式消失。
1、video元素
通过video元素引用视频,逐渐取代flash.
该元素的基本设定都是通过在html中增加属性来完成,除样式外。
基本设定:<video controls autoplay poster="images/poster.png" width="512" height="288" src="video/tweetsip.mp4 "id="video"></video>
controls:是否提供播放控件。
autoplay:是否加载后自动播放。
poster:不设定的话,自动将视频第一帧作为海报。
width, height:视频显示区,尽量设定为视频原始尺寸,否则视频会按原比例显示,两边填充黑边。
loop:是否循环播放。
2、视频格式
主流的有三种视频容器对应三种视频格式。
分别是(容器/格式):mp4/.mp4 webm/.webm ogg/.ogv,每种浏览器支持的格式不同,所以为了保证适应性,最好多放几个不同格式的源,在video里增加几个source元素。
<video controls autoplay width="512" height="288">
<source src="video/tweetsip.mp4" type='video/mp4'> 其中,type属性指定容器。
<source src="video/tweetsip.webm" type='video/webm'>
<source src="video/tweetsip.ogv" type='video/ogg'>
可以将<object></object>元素放最后,作为退路播放flash视频
</video>
十三、表格与更多列表 建立表格
用html中的元素建立表格数据。在html中<table>开始整个表格,<tr>标记一个表行,<th> <td>都在<tr>里面,其中<th>是表头,<td>是其他单元格内容。可以在css中针对各表格元素设定样式。还可以在<table>的最上面添加<caption>元素,作为表格标题。
1、表格的css样式
单元格数据对齐方式:text-align vertical-align
在table中为整个表格设定单元格边框间距:border-spacing
边框间距折叠,将两个紧挨着的边框合并为一个边框:border-collapse: collapse;
利用伪类:nth-child可设定奇偶行/列不同格式,是这个元素相对于它的兄弟元素的数字顺序。tr:nth-child(odd){ background-color: red; }奇数行红色。
单元格跨多行:在html中为td增加属性,<td rowspan="2">同时被占的相应单元格空出一个空行(也没有空的<td></td>)。
在行和列上都可以跨多个单元格,只是在相应位置上空行就行,跨多列用的是colspan="2"。
十四、html表单 实现交互
表单开始是form元素:
<form action="http://wickedlysmart.com/contest.php" method="post">
<form>其中,action属性指定处理表单文件的服务器脚本文件,method属性指定表单提交方式,标签里面是表单内容。
1、常用的表单元素
每一个表单元素都要有name属性。对于输入性内容,浏览器会打包name+输入内容到服务器,对于选择性内容,浏览器会打包name+value属性值到服务器。用户在页面上看到的都是标签。
输入类:
input 元素中的value属性会在页面上显示为框内默认文本。
单行文本输入 <input type="text" name="fullname">(input是void元素)
数字输入 <input type="number" min="0" max="20">除了限制输入类型为数字,还可以限制大小范围
范围输入<input type="range" name="range" min="0" max="20" step="5">显示是一个滑动条
颜色输入<input type="color" name="color">弹出一个颜色选择器
日期输入<input type="date" name="date">
email输入<input type="email" name="email">
tel输入<input type="tel" name="tel">
url输入<input type="url" name="url">
提交按钮<input type="submit" value="submit now">其中value值就是按钮上显示的
多行文本输入<textarea name="comments" rows="10" cols="48"></textarea>
选择类:
单选钮输入<input type="radio" name="hotornot" value="hot">标签1
<input type="radio" name="hotornot" value="not">标签2 name是一样的,提交的是hotornot+hot,用户在界面看到的就是标签值。可以为某个选项增加一个checked 属性,显示时会默认选中。
复选框输入<input type="checkbox" name="spice" value="salt">标签1
<input type="checkbox" name="spice" value="pepper">标签2
<input type="checkbox" name="spice" value="garlic">标签3 name是一样的,提交的是spice+salt&pepper,用户在界面看到标签值 。
下拉菜单<select name="characters">
<option value="buckaroo">bucharoo banzai</option>
<option value="tommy">perfect tommy</option>
<option value="penny">penny priddy</option>
<option value="john">john parker</option>
</select>用户在下拉框看到的是标签内容,向服务器提交的是name+value值。
2、两种提交方式
form中method属性的两种值,post和get。
post:打包表单数据发给服务器,不追加到url。当表单数据很多,或很私有时用post。
get:打包表单数据发给服务器,并将数据追加到url。可以加书签的请求,例如搜索结果。
3、用label元素来添加标签
与直接加文本标签表现形式一样,但可访问性好。但要为元素增加一个id
<input type="radio" name="hotornot" value="hot" id="hot">
<label for="hot"(id)>hot</label>
<input type="radio" name="hotornot" value="not" id="not">
<label for="not">not</label>
4、其他
文件提交,<input type="file" name="doc">
多选下拉菜单,为select元素增加布尔属性mutiple
输入提示,为input元素增加属性placeholder="ceshi",比正常内容浅些,不影响输入。
必须填写,为元素增加布尔属性required
【全书完,棒棒哒\(^o^)/~】
转载于:https://www.cnblogs.com/ziye89/p/7251100.html
【干货】Html与CSS入门学习笔记12-14【完】相关推荐
- CSS入门学习笔记(案例+详解)
CSS入门学习笔记 一.CSS简介 1.什么是CSS? 2.为什么使用CSS? 3.CSS的作用 二.CSS语法 1.CSS基础语法 2.CSS注释语法 3.CSS应用方法 三.CSS选择器 1.元素 ...
- CSS入门学习笔记+案例(1)
CSS入门学习 一.CSS简介 1.什么是CSS CSS:Cascading Style Sheet 层叠样式表 是一组样式设置的规则,用于控制页面的外观样式 2.为什么使用CSS 实现内容与样式的分 ...
- Three.js入门学习笔记12:模型沿着任意轨迹线运动
参考学习 http://www.yanhuangxueyuan.com/doc/Three.js/curveRun.html http://www.yanhuangxueyuan.com/doc/th ...
- MATLAB入门学习笔记12
用MATLAB生成一段音乐 音乐小知识 谱曲过程 发出声音 发出音阶 发出曲调 发出有起伏的曲调 长曲 linspace函数是Matlab中的均分计算指令,x=linspace(0,2*pi,100) ...
- Python入门学习笔记——12.文件操作
##################################################### # 1.文件写入 # 写入操作 ''' 1.打开文件 open()参数1:文件路径路径 ur ...
- Javascript入门学习笔记
JS入门学习笔记目录 1.JS简介 2.组成部分 3.特点 4.作用 5.JS三种添加方式 6.变量 7.数据类型 8.检测数据类型 9.逗号运算符 10.算术运算符 11.关系运算符 12.逻辑运算 ...
- Python快速编程入门#学习笔记01# |第一章 :Python基础知识 (Python发展历程、常见的开发工具、import模块导入)
全文目录 ==先导知识== 1 认识Python 1.1.1 Python的发展历程 1.1.2 Python语言的特点 2. Python解释器的安装与Python程序运行 1.2.1 安装Pyth ...
- 前端入门学习笔记(1)--html部分
这是在网上发表的第一篇文章,从来不喜欢在网上发表言论.文字和资源,是个名副其实的"伸手党",在"伸手白拿"的多年间,也曾想过要贡献些什么,但总是害怕自己分享出来 ...
- dubbo入门学习笔记之入门demo(基于普通maven项目)
注:本笔记接dubbo入门学习笔记之环境准备继续记录; (四)开发服务提供者和消费者并让他们在启动时分别向注册中心注册和订阅服务 需求:订单服务中初始化订单功能需要调用用户服务的获取用户信息的接口(订 ...
最新文章
- 【短视频SDK】Android如何使用硬编硬解?
- Tinyhttpd的实现和一些基本问题的解决
- Laravel大型项目系列教程(一)
- iar 堆栈设置_IAR MSP430设置合理堆栈大小(the stack pointer for stack is outside the stack range)...
- selenium模拟登录豆瓣和qq空间
- Java Swing Mysql实现的员工工资管理系统项目源码附带视频指导运行教程
- 查询ubuntu系统版本相关信息
- Sharepoint对List增删改操作
- linux显卡驱动重装
- 分布式系统的经典基础理论
- 1965:【14NOIP普及组】珠心算测验
- 和老外聊天、发邮件常用英语缩写(超实用)
- Java的图片处理工具类(放缩、切割、水印等)
- 品牌如何赋能加盟商,攻克时艰
- 【BZOJ5077】【UOJ198】【CTSC2016】时空旅行
- matplotlib绘制多维度分类散点图
- 最新C语言零基础入门(带课件+源码)
- MySql零基础教学,超细致,从小白到精通
- 算法中的递归和尾递归
- 十周年再发重磅新品,小米发布50倍潜望式变焦小米10青春版、MIUI 12