【干货】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^)/~】