十二、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^)/~】

【干货】Html与CSS入门学习笔记12-14【完】的更多相关文章

  1. 【干货】Html与CSS入门学习笔记1-3

    从23号开始用了4天时间看完了<Head First Html与CSS>这本书,本书讲解方式深入浅出,便于理解,结合习题,便于记忆,是一本不错的入门书.下面是本书的学习笔记: 一.认识HT ...

  2. 【干货】Html与CSS入门学习笔记4-8

    四.web镇之旅,连接起来 找一家托管公司如阿里云,购买域名和空间,然后将网页文件上传到购买的空间的根目录下. 1.绝对路径url url:uniform resource locators 统一资源 ...

  3. 【干货】Html与CSS入门学习笔记9-11

    九.盒模型 与元素亲密接触 1.盒模型 css将每个元素都看做一个盒子,包括以下属性: 内容区content area:包含内容,内容可以决定大小,也可以自行设定宽度和高度.元素的width属性指定的 ...

  4. HTML&CSS基础学习笔记1.14—有序列表及列表嵌套

    我们上篇讲到了无序列表,那么今天就来看看有序列表和他们的组合嵌套使用吧. 有序列表 现在我们要做那堆杂事了,但是发现这么多杂事,先做哪个好呢?于是我们给这堆杂事弄个优先级排序,让我们能够按照顺序做下去 ...

  5. Sass简单、快速上手_Sass快速入门学习笔记总结

    Sass是世界上最成熟.稳定和强大的专业级css扩展语言 ,除了Sass是css的一种预处理器语言,类似的语言还有Less,Stylus等. 这篇文章关于Sass快速入门学习笔记. 资源网站大全 ht ...

  6. OpenCV入门学习笔记

    OpenCV入门学习笔记 参照OpenCV中文论坛相关文档(http://www.opencv.org.cn/) 一.简介 OpenCV(Open Source Computer Vision),开源 ...

  7. stylus入门学习笔记

    title: stylus入门学习笔记 date: 2018-09-06 17:35:28 tags: [stylus] description: 学习到 vue, 有人推荐使用 stylus 这个 ...

  8. dubbo入门学习笔记之入门demo(基于普通maven项目)

    注:本笔记接dubbo入门学习笔记之环境准备继续记录; (四)开发服务提供者和消费者并让他们在启动时分别向注册中心注册和订阅服务 需求:订单服务中初始化订单功能需要调用用户服务的获取用户信息的接口(订 ...

  9. 汇编入门学习笔记 (九)—— call和ret

    疯狂的暑假学习之  汇编入门学习笔记 (九)--  call和ret 參考: <汇编语言> 王爽 第10章 call和ret都是转移指令. 1. ret和retf ret指令:用栈中的数据 ...

随机推荐

  1. 杭电acm 1022题

    Problem Description As the new term comes, the Ignatius Train Station is very busy nowadays. A lot o ...

  2. python+selenium UI自动化不同浏览器之间的切换

    class register(): ROBOT_LIBRARY_SCOPE = 'GLOBAL' def __init__(self): pass # m默认打开chrome def open_bro ...

  3. 7.XXEinjector:一款功能强大的自动化XXE注射工具

    今天给大家介绍的是一款名叫XXEinjector的漏洞利用工具,XXEinjector是一款基于Ruby的XXE注入工具, 它可以使用多种直接或间接带外方法来检索文件.其中,目录枚举功能只对Java应 ...

  4. [开发技巧]·Python极简实现滑动平均滤波(基于Numpy.convolve)

    [开发技巧]·Python极简实现滑动平均滤波(基于Numpy.convolve) ​ 1.滑动平均概念 滑动平均滤波法(又称递推平均滤波法),时把连续取N个采样值看成一个队列 ,队列的长度固定为N ...

  5. validate验证注册表单

    点击预览; <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnc ...

  6. Mol Cell Proteomics. |马臻| psims-一个用于编写HUPO-PSI标准下的mzML和mzIdentML的python库

    大家好,本周分享的是发表在MCP(MOLECULAR&CRLLULAR PROTEOMICS)上的一篇关于质谱数据处理和识别的文章,题目是psims - A Declarative Write ...

  7. 一个APK反编译利器Apktool

    一个APK反编译利器Apktool   APK 本地化 [http://www.andmoto.com/viewthread.php?tid=3873]   说起APK的汉化,目前大部分教程都是让用H ...

  8. 毕马威&阿里:通向智能制造的转型之路

    文章发布于公号[数智物语] (ID:decision_engine),关注公号不错过每一篇干货. 2019 年 4 月 17 日,毕马威与阿里研究院携手举办了智能经济主题报告发布会,从技术.制造.组织 ...

  9. C 语言实例 - 计算一个数的 n 次方

    C 语言实例 - 计算一个数的 n 次方 计算一个数的 n 次方,例如: ,其中 为基数, 为指数. 实例 - 使用 while #include <stdio.h> int main() ...

  10. docker常用到的一些命令

    docker ps 1. docker ps -a(显示所有的容器,包括未运行的) 2.docker ps -q (只显示ip) 3. docker ps -f(根据条件过滤显示的内容) docker ...