这些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展示结果:

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

(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>

显示效果如下:这些HTML、CSS知识点,面试和平时开发都需要 No8-No9

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。

上一篇:QF——网络之JSON解析和XML解析


下一篇:《zw版·Halcon-delphi系列原创教程》 3d汽车模型自动区域分割