首页 Web开发 Windows程序 编程语言 数据库 移动开发 系统相关 微信 其他好文

css页面组件

时间：2018-10-13 21:44:19   收藏：0   阅读：1468

页面组件

1 元素的尺寸/边框/背景

1.1 css尺寸相关属性

1.2 css内边距

1.3 边框

1.4 背景

2 超链接和锚点

2.1 超链接

<a href=‘要跳转的地址‘>超链接文字</a>

a标签的属性

超链接范例

网站链接：     <a href="http://www.oldboy.cn">Python专家</a>
电子邮件链接： <a href="mailto:fuming@oldboy.com">写信给我</a>
电话             <a href="tel:10086">10086</a>
短信          <a href="sms:10086">发短息给我</a>

路径

鼠标光标设置 （CSS属性）

2.2 锚点

用<a name=“”>定义，例如：<a name=“here1”>第一部分</a>，
使用<a href=“#here1”>跳转到第一部分</a>超链接就可以定位到网页中的“第一部分”这个位置。

锚点的跳转
使用#  <a href="#锚点名">跳转</a>
跳转到指定页面指定锚点  http://www.lampuser.com/index.html#section2

2.3 URL

URL(Uniform Resoure Locator)，统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

URL的组成

http://www.fuming.com/product/news/add?name=xiaolili&age=10#section1

3 图片

3.1 img 标签

<img src="图片地址" title="" alt="">

属性

常见图片格式

3.2 图像映射

<img src="planets.gif" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
  <area href="sun.htm" shape="rect" coords="0,0,110,260">Sun</a>
  <area href="mercur.htm" shape="circle" coords="129,161,10">Mercury</a>
  <area href="venus.htm" shape="circle" coords="180,139,14">Venus</a>
</map>

map标签

<map> 标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。
<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。
area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。

area标签

4 列表

4.1 HTML列表标签

4.2 CSS列表属性

5 表格

5.1 HTML列表标签

5.2 CSS列表属性

5.3 合并单元格

给<td> 或者 <th> 设置属性 rowspan 和 colspan

rowspan  合并行
colspan  合并列

6 表单

6.1 表单相关标签

6.2 表单组成控件

文本输入框

<input type="text" name="username">
<input type="text" name="username" placeholder="请输入用户名">
<input type="text" name="username" value="李大钊">
<input type="text" name="username" placeholder="请输入用户名" size="10" maxlength="15">

密码框

<input type="password" name="pwd">
<input type="password" name="pwd" placeholder="请输入密码">
<input type="password" name="pwd" placeholder="请输入密码" maxlength="12">

单选按钮

<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">男

复选框

<input type="checkbox" name="hobby" value="basketball"> 篮球
<input type="checkbox" name="hobby" value="football"> 足球
<input type="checkbox" name="hobby" value="ping-pong" checked> 乒乓球 
<input type="checkbox" name="hobby" value="baseball"> 棒球

文件选择框

<input type="file" name="pic">
<input type="file" name="pics" multiple>  <!--选择多个文件-->

规定类型的文本输入框（HTML5新增）

<!--邮箱-->
<input type="email" name="email" placeholder="请输入邮箱">

<!--url-->
<input type="url" name="url" placeholder="请输入网址">

<!--数字-->
<input type="number" name="num">
<input type="number" name="num" min=‘10‘ max=‘100‘ step=‘10‘>

<!--搜索框-->
<input type="search" name="kw" placeholder="搜索">

<!--电话号码 同于text  但是用移动设备，会直接弹出数字键盘-->
<input type="tel" name="tel_num" placeholder="请输入电话号码">

范围选择框(HTML5新增)

<input type="range" name="range">
<input type="range" name="range" value="80">
<input type="range" name="range" value="80" max="100" min="0">

颜色选择框(HTML5新增)

<input type="color" name="color">

时间日期选择框(HTML5新增)

<input type="date" name="date">
<input type="month" name="month">
<input type="week" name="week">
<input type="time" name="time">
<input type="datetime" name="datetime">
<input type="datetime-local" name="datetime">

下拉选项

<select name="major">
    <option value="computer">计算机</option>
    <option value="archaeology">考古学</option>
    <option value="medicine" selected>医学</option>
    <option value="Architecture">建筑学</option>
    <option value="Biology">生物学</option>
</select>

<!--多选-->
<select name="major" multiple>
    <option value="computer">计算机</option>
    <option value="archaeology">考古学</option>
    <option value="medicine">医学</option>
    <option value="Architecture">建筑学</option>
    <option value="Biology">生物学</option>
</select>

多行文本输入

<textarea name="content"></textarea>
<textarea name="content" cols="30" rows="10"></textarea>

按钮

<!--提交按钮-->
<input type="submit" value="提交">
<button>提交</button>
<button type="submit">提交</button>

<!--重置按钮-->
<input type="reset" value="重置">
<button type="reset">重置</button>

<!--普通按钮-->
<input type="button" value="按钮">
<button type="button">按钮</button>

6.3 表单中其他标签

field/legend

<form>
  <fieldset>
    <legend>health information</legend>
    height: <input type="text" />
    weight: <input type="text" />
  </fieldset>
</form>

datalist(新增)

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

6.4 表单输入内容的智能验证(H5新增)

required 必填

给所有可输入的控件 添加 required属性，表示必填

指定类型验证

Input:email 、input:url、input:number 会自动验证类型

pattern 正则

<input type="text" pattern="\w{4,6}">
<input type="text" pattern="\d{4,6}" title="必须是4~6位数字">

6.5 表单控件相关属性

7 音频/视频 (HTML5新增)

7.1 HTML标签

7.2 视频

支持的视频类型

浏览器MP4WebMOgg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES 从 Firefox 21 版本开始 Linux 系统从 Firefox 30 开始 YES YES
Safari YES NO NO
Opera YES 从 Opera 25 版本开始 YES YES

视频格式的MIME类型

格式MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型。是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开

7.3 音频

支持的音频格式

浏览器MP3WavOgg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES

音频格式MIME类型

格式MIME-type
MP3 audio/mp3
Wav audio/wav
Ogg audio/ogg
评论（0）
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码！