系列知识点汇总

这些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。

这些HTML、CSS知识点,面试和平时开发都需要 No8-No9的更多相关文章

  1. 这些HTML、CSS知识点,面试和平时开发都需要 No1-No4

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  2. 这些HTML、CSS知识点,面试和平时开发都需要 No5-No7

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  3. 这些HTML、CSS知识点,面试和平时开发都需要 No10-No11

    系列知识点汇总 1.基础篇 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5- ...

  4. 这些HTML、CSS知识点,面试和平时开发都需要 No8-No9(知识点:媒体操作、构建表单)

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  5. 这些HTML、CSS知识点,面试和平时开发都需要 No10-No11(知识点:表格操作、代码编写规则)

    系列知识点汇总 1.基础篇 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5- ...

  6. 这些HTML、CSS知识点,面试和平时开发都需要 No5-No7(知识点:文字设置、设置背景、数据列表)

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  7. 这些HTML、CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML、CSS、盒子模型、内容布局)

    这些HTML.CSS知识点,面试和平时开发都需要 No1-No4   系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...

  8. 这些HTML、CSS知识点,面试和平时开发都需要 (转)

    http://www.cnblogs.com/w-wanglei/p/5414979.html No1.HTML 1.网页结构 网页结构一般都包含文档声明DOCTYPE,并且在head中的meta应该 ...

  9. 这些Javascript知识点,面试和平时开发都需要

    No1.语法和类型 1.声明定义 变量类型:var,定义变量:let,定义块域(scope)本地变量:const,定义只读常量.    变量格式:以字母.下划线“_”或者$符号开头,大小写敏感.    ...

随机推荐

  1. angularjs http 请求拦截器

    /** * Created by oy on 2016/11/29. */ (function() { 'use strict'; // 创建angular模块 angular .module('ap ...

  2. Unable to locate secure storage module异常的解决方案

    org.eclipse.equinox.security.storage.StorageException: Unable to locate secure storage module 该异常同样是 ...

  3. 旺信UWP公测邀请

    各位园主好,今天已将旺信Win10版提交到商店Beta测试. 哪位朋友需要邀请码的,请在评论中回复,我给你私信. 数量有限,共10枚. 2016/3/10 14:55 更新 10枚邀请码已发给前10位 ...

  4. Visual Studio 2015 RC版官方下载(ISO)

    微软Build2015开发者大会发布了下代开发套件Visual Studio 2015 RC候选版,覆盖企业版.专业版以及免费授权的Community社区版,原生支持开发通用型Windows Apps ...

  5. 如何捕获和分析 JavaScript Error

    前端工程师都知道 JavaScript 有基本的异常处理能力.我们可以 throw new Error(),浏览器也会在我们调用 API 出错时抛出异常.但估计绝大多数前端工程师都没考虑过收集这些异常 ...

  6. SQL Server Profiler使用教程,通俗易懂才是王道

    做开发,平时难免和数据库打交道,特别是写存储过程,对于我们这些不常写SQL的人来说是一件极其痛苦的事,每次写完运行总是有错,如果用的是本地数据库的话还好,可以在本机调试SQL,那如果在数据库在服务器上 ...

  7. 解如下方程(java实现)

    n                              (m=1) f(m,n)=  m                              (n=1) f(m-1,n)+f(m,n-1) ...

  8. 一天一小段js代码(no.3)

    //遍历属性,返回名值对 function outputAttributes(element){ var pairs = new Array(), attrName, attrValue, i, le ...

  9. 如何开始DDD(完)

    连续写了两篇文章,这一篇我想是序的完结篇了.结合用户注册的例子再将他简单丰富一下.在这里只添加一个简单需求,就是用户注册成功后给用户发一封邮件.补充一下之前的代码 public class Domai ...

  10. Qt类继承图

    对于学习Qt的,有一个Qt所有类的继承图表,是很有需要的.以下提供了Qt5.1的所有类的继承关系图.看的时候,可以放大和缩小.如需文档下载,可以加入最后的QQ学习群.