这些HTML、CSS知识点，面试和平时开发都需要 No8-No9

系列知识点汇总

这些HTML、CSS知识点，面试和平时开发都需要 No1-No4（知识点：HTML、CSS、盒子模型、内容布局）

这些HTML、CSS知识点，面试和平时开发都需要 No5-No7（知识点：文字设置、设置背景、数据列表）

这些HTML、CSS知识点，面试和平时开发都需要 No8-No9（知识点：媒体操作、构建表单）

这些HTML、CSS知识点，面试和平时开发都需要 No10-No11（知识点：表格操作、代码编写规则）

No8.媒体操作

1.增加图片

（1）img元素：自包含元素，不能封装其他任何元素。正确写法是<img>,而不是<img/>或者<img></img>。

（2）属性说明：src设置图片的地址；alt(alternative text)提供给搜索引擎，或者当图片不可见时显示的文本。

（3）width和height属性：为img设置固定的width和height可提升页面的加载速度。预留固定的大小，加载整个页面。如果设置width或者height任意一个属性，其他一个属性尺寸会等比例缩放。

（4）测试代码如下：

<!DOCTYPE HTML>

<html>

<head>

    <meta charset="utf-8">

    <style type="text/css">

        .box img{

            width: 400px;

        }

    </style>

</head>

<body>

    <img src="http://img1.gtimg.com/tech/pics/hv1/104/221/2071/134723234.jpg" alt="火星表面是否曾有海洋">

</body>

</html>

2.定位图片

（1）img元素级别：img默认是inline级别元素，但可通过设置float、display以及盒子模式的padding、border、margin设置元素停靠位子。

（2）float定位图片：为了让图片停靠在文字的左边或者右边，可通过float属性设置。例如下面的代码可通过设置img的float值可让图片靠左或者靠右：

<!DOCTYPE HTML>

<html>

<head>

    <meta charset="utf-8">

    <style type="text/css">

        .box{

            border: 1px solid #dedede;

            width: 700px;

        }

        .box span{

            word-wrap:break-word;

            word-break:break-all;

        }

        .box img{

            border: 1px solid #9799a7;

            background: #eaeaed;

            width: 200px;

            float: right;

            margin: 5px;

            padding: 4px;

        }

    </style>

</head>

<body>

    <div class="box">

        <span>ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<img src="http://img1.gtimg.com/tech/pics/hv1/104/221/2071/134723234.jpg" alt="火星表面是否曾有海洋">dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</span>

    </div>

  </body>

</html>

3.增加音频文件

（1）audio元素：播放音频文件元素。

（2）属性：autoplay、controls、loop、preload。autoplay、controls、loop是布尔属性，在使用它们时不需要设置值，直接添加属性名即可。例如：<audio src=”test.mp3”controls loop></audio>。

（3）属性说明：controls，是否手动控制;autoplay,是否自动播放；loop，是否循环播放。

（4）preload：包含none、auto、metadata三个值，none表示不加载文件信息，auto表示自动加载所有信息，metadata加载有效信息。如果audio没有添加preload属性，则默认加载文件的所有信息（相当于auto）。为了让页面加载更快，可设置preload属性为none或者metadata。demo如下：

<audio src="test.mp3" controls loop></audio>

4.增加视频文件

（1）video元素：播放视频文件元素。

（2）属性：和audio相似，拥有src、autoplay、controls、loop、preload属性。

（3）controls：和audio不同，如果没有controls属性，video也会显示出来。

（4）poster属性：在播放视频之前可设置poster显示一张默认图片。例如：

<video src="test.mp4" controls poster="test.jpg"></video>

5.页面嵌套

（1）iframe元素：<iframe src=”http://www.baidu.com”></iframe>。

（2）属性：iframe默认设置了border、width、height。我们有可以自己设置。例如下面的样式设置：

iframe{

    height: 800px;

    width: 100%    ;

    border: none;

}

No.9 构建表单

1.表单元素

（1）form：form是表单的容器，最常用的两个属性action和method。例如：

<form action="/login.html" method="post">

</form>

（2）原始文本类型：text、password。

（3）Html5增加的文本类型：color、date、datetime、email、month、number、range、search、tel、time、url、week。例如下面代码：

form action="No8-6.html" method="post">

    日期：<input type="date" />

    <br>

    颜色：<input type="color"/>

    <br>

    范围：<input type="range"/>

</form>

chrome展示结果：

（4）兼容性：如果浏览器不支持这些Html5的文本类型，元素类型自动显示为text类型。

（5）textarea元素：属性cols设置初始化时文本区内的可见宽度，rows设置初始化时文本区内的可见行数。个人建议直接设置height和width。

2.选择元素

（1）radio元素：一组radio必须有相同的名字，添加checked表示选择项。例如：

<form action="No8-6.html" method="post">

    哪天？

    <input type="radio" name="day" value="Friday" checked>Friday

    <input type="radio" name="day" value="Saturday" >Saturday

    <input type="radio" name="day" value="Sunday" >Sunday

</form>

（2）checkbox元素：和radio相似，但可以多选。例如：

<input type="checkbox" name="day" value="Friday" checked> Friday

<input type="checkbox" name="day" value="Saturday"> Saturday

<input type="checkbox" name="day" value="Sunday"> Sunday

（3）下拉列表元素：使用select和options两个元素实现。例如：

<select name="day">

    <option value="Friday" selected>Friday</option>

    <option vlaue="Saturday">Saturday</option>

    <option value="Sunday">Sunday</option>

</select>

（4）多选列表：和下拉列表相似，但需要给select添加multiple属性。例如：<select name="day" multiple>

3.表单按钮

（1）submit input:<input type="button" value="submit">。

（2）submit button：可通过设置button元素实现和input button一样的效果，代码如下：

<button type="submit">

    <strong>Send us</strong> a message

</button>

4.其他元素

（1）hidden input：可通过该类型在本地保存某些值，例如：<input type="hidden" name="tracking-code" value="abc-123">。

（2）file input：file类型的样式不好控制，一般都是通过js设置文件上传控件。

5.组织表单

（1）label元素：一般用来描述表单的头部信息。label包含for属性，for的值为text输入框元素的id。这样设置后，当点击label元素时，for属性值对应的输入框元素自动获取焦点。例如：

<label for="username">Username</label>

<input type="text" name="username" id="username">

（2）label元素for属性的替代方式：只需用label元素包含输入框元素，例如：

<label>

    <input type="radio" name="day" value="Friday">Friday

</label>

<label>

    <input type="radio" name="day" value="Saturday"> Saturday

</label>

<label>

    <input type="radio" name="day" value="Sunday"> Sunday

</label>

（3）fieldset：字段集合分组，和section相似。把form表单中同类元素信息放在一个组。

（4）legend：作为filedset头部信息。例如：

<fieldset>

    <legend>登录</legend>

    <label>

        Username

        <input type="text" name="username">

    </label>

    <label>

        Password

        <input type="text" name="password">

    </label>

</fieldset>

显示效果如下：

6.input属性

（1）disabled：元素不可用。

（2）placeholder：html5属性，文本框提示信息，例如：

<label>

    Email:

    <input type="email" name="email" placeholder="请输入电子邮件">

</label>

（3）required：html5属性，设置为必填项。可通过:required伪类设置无效元素的样式。

（4）html5其他附加属性：accept、autocomplete、autofocus、formaction、formenctype、formmethod、formnovalidate、formtarget、max、maxlength、min、pattern、readonly、selectionDirection、step。