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

Posted Heavi的博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了这些HTMLCSS知识点,面试和平时开发都需要 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展示结果:

image

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

    显示效果如下:image

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。

以上是关于这些HTMLCSS知识点,面试和平时开发都需要 No8-No9的主要内容,如果未能解决你的问题,请参考以下文章

这些HTMLCSS知识点,面试和平时开发都需要 No5-No7

HTMLCSS知识点,面试开发都会需要--No.1

HTMLCSS知识点,面试开发都会需要--No.2

史上最全的HTMLCSS知识点总结,浅显易懂。

Android开发在面试中应该知道这些数据结构

为什么所有人都对 HTMLCSS 失望了?