博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
day44-页面组件
阅读量:6694 次
发布时间:2019-06-25

本文共 7716 字,大约阅读时间需要 25 分钟。

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

1.1 css尺寸相关属性

  • height 高度
  • min-height 最小高度
  • max-height 最大高度
  • width 宽度
  • min-width 最小宽度
  • max-width 最大宽度

1.2 css内边距

  • padding 内边距
  • padding-left 左内边距
  • padding-right 右内边距
  • padding-top 上内边距
  • padding-bottom 下内边距

1.3 边框

  • border border-left|border-right|border-top|border-bottom

    border: 边框宽度  边框样式  边框颜色
  • border-style border-top-style | border-right-style | * border-bottom-style | border-left-style
    dotted     点线dashed     虚线solid      实线double     双实线groove     槽状线ridge      脊线inset      内嵌效果outset     外凸效果
  • border-color 边框颜色 border-left-color | border-right-color | border-top-color | border-bottom-color
  • border-width 边框宽度 border-left-width | border-right-width | border-top-width | border-bottom-width

1.4 背景

  • background

    background:
    <背景颜色>
    |
    <背景图像>
    |
    <背景重复>
    |
    <背景附件>
    |
    <背景位置>
    例:background:red url('./123.png') no-repeat 100px 10px;
  • background-color 设置背景色,或设置为transparent(透明)
  • background-image 背景图片 url 或者 none
  • background-repeat 背景重复 repeat | repeat-x | repeat-y | no-repeat
  • background-attachment 背景附件 scroll | fixed
  • background-position 背景位置

    background-position: 水平方向 垂直方向background-position:left top;background-position:100px 100px;left | center | right (横向) top | center | bottom (纵向) 或者使用百分比或者数值

2 超链接和锚点

2.1 超链接

超链接文字

a标签的属性

  • href -- 代表一个url链接源(就是链接到什么地方)

    url除了是网页外,还可以是其它的文件(如文本文件,pdf文件等)。 url还可以是指向HTML文件中的一个位置。 url还可以是Email地址。
  • target -- 用来指出哪个窗口或框架应该被此链接打开

    target=_blank: 将链接内容在新的浏览窗口中打开。 target=_self:  将链接的内容,显示在目前的窗口中。 target=_parent:将链接的内容,当成文件的上一个画面。 target=_top:这个参数可以解决新内容被旧框窗包围的困扰,使用这参数,会将整个画面重新显示成链接的画面内容。
  • title -- 代表链接的附加提示信息

  • download HTML5新添加属性 表示下载

超链接范例

网站链接:     Python专家 电子邮件链接: 写信给我 电话 10086 短信 发短息给我

路径

  • 文档相对路径(例如 adver/contents.html)
  • 绝对路径(例如 
  • 站点根目录相对路径(例如 /support/app/customer.html,其中“/”表示根目录)

鼠标光标设置 (CSS属性)

  • cursort

    text  文字选择器crosshair   十字架wait  等待help  帮助pointer 小手

2.2 锚点

定义,例如:第一部分, 使用跳转到第一部分超链接就可以定位到网页中的“第一部分”这个位置。
锚点的跳转使用#  跳转 跳转到指定页面指定锚点 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
  • protocol 协议,常用的协议是http
  • hostname 主机地址,可以是域名,也可以是IP地址
  • port 端口 http协议默认端口是:80端口,如果不写默认就是:80端口
  • path 路径 网络资源在服务器中的指定路径
  • query 查询字符串 如果需要从服务器那里查询内容,在这里编辑
  • hash 锚点部分,指向页面中的某个位置

3 图片

3.1 img 标签

属性

  • alt -- 代表图像的替代文字
  • src -- 代表一个图像源(就是图像的位置)
  • title 提示信息
  • border – 代表图片边框的宽度
  • height -- 代表一个图像的高度
  • width -- 代表一个图像的宽度
  • usemap 将图像定义为客户器端图像映射。

常见图片格式

  • GIF -- 最多支持256色,支持透明,支持多帧动画显示效果.
  • JPEG -- 支持多种颜色,可以有很高的压缩比,使用了有损压缩,不支持透明,不支持动画效果.
  • PNG -- 是一种新的图片技术,可以表现品质比较高的图片,使用了无损压缩,支持透明,不支持动画.

3.2 图像映射

Planets  Sun Mercury Venus 

map标签

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

area标签

  • alt 规定区域的替代文本。如果使用 href 属性,则该属性是必需的。
  • href URL 规定区域的目标 URL。
  • coords 规定区域的坐标。
  • shape 规定区域的形状

    rect  矩形circle 圆形poly  多边形
  • target -- 用来指出哪个窗口或框架应该被此链接打开

4 列表

4.1 HTML列表标签

  • <ul></ul> 代表HTML无序列表 ,里面每一列表项使用<li>标签定义

  • <ol></ol> 代表HTML有序列表 ,里面每一列表项使用<li>标签定义

    属性start 规定有序列表的起始值。type   规定在列表中使用的标记类型。(1 a A  i  I)reversed  H5新添加 降序
  • <li></li> 代表HTML列表项目,每个列表项使用一对<li></li>标记

  • <dl></dl> 定义了定义列表(definition list)

  • <dt></dt> 标签定义了定义列表中的项目(即术语部分)

  • <dd></dd> 在定义列表中定义条目的定义部分。

4.2 CSS列表属性

  • list-style-type

    disc         实心点circle       圆圈square       小方框decimal      数字lower-roman  小写罗马字upper-roman  大写罗马字lower-alpha  小写字母upper-alpha  大写字母
  • list-style-position 位置

    inside   标示在li里面outside  标示在li外面
  • list-style-image 使用图片 url(./123.gif)

  • list-style 复合属性
    list-style: type position imagelist-style: none

5 表格

5.1 HTML列表标签

  • <table></table>
  • <caption></caption> 定义表格标题
  • <thead></thead>
  • <tfoot></tfoot>
  • <tbody></tbody>
  • <tr></tr> 行
  • <th></th> 表头单元格
  • <td></td> 单元格

5.2 CSS列表属性

  • table-layout 表格布局方式

    auto(默认)  布局将基于各单元格的内容,换言之,可能你给某个单元格定义宽度为100px,但结果可能并不是100px。表格在每一单元格读取计算之后才会显示出来,速度很慢 fixed       平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关。也就是说,内容可能被裁切
  • border-collapse 表格的行和单元格的边是合并还是独立

    separate (默认)  独立collapse  合并
  • border-spacing 当表格边框独立时,行和单元格的边框在横向和纵向上的间距

  • caption-side caption 在table上面还是下面

    top    bottom
  • empty-cells 没有内容的单元格隐藏还是显示

    show (默认)hide

5.3 合并单元格

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

rowspan  合并行colspan  合并列

6 表单

6.1 表单相关标签

  • <form></from> 定义一个 HTML 表单,用于用户输入。

    属性actionmethod      get       postenctype    multipart/form-data(有文件表单时候,必须使用这个)    application/x-www-form-urlencodedtarget
  • <input> 定义一个输入控件

    属性name  必须有,否则数据无法传递type  text、password、radio、hidden、checkbox、submit、image、file、reset、button、submit、email、number、color等
  • <button></button> 定义按钮

    属性type  submit、reset、submitname
  • <select></select> 定义选择列表(下拉列表)

    属性disabled  禁用name      必须有multiple  多选,默认会显示所有,名字要使用数组like[]size      显示几个下拉
  • <option></option> 定义选择列表中的选项。

    属性value   提交的值,若没有,则提交内容selected  定义选中项disabled  选项禁用
  • <optgroup></optgroup> 把相关的选项组合在一起

    属性disabled  规定禁用该选项组。label    为选项组规定描述。
  • <textarea></textarea>

    属性cols  可见宽度rows  可见行数readonly  文本区只读name  必须有disabled  禁用
  • <label> 定义 fieldset 元素的标题。

  • <fieldset></fidldset> 定义围绕表单中元素的边框

  • <legend></legend> 定义 fieldset 元素的标题。

6.2 表单组成控件

文本输入框

   

密码框

  

单选按钮

复选框

 篮球  足球  乒乓球  棒球

文件选择框

  

规定类型的文本输入框(HTML5新增)

范围选择框(HTML5新增)

  

颜色选择框(HTML5新增)

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

     

下拉选项

 

多行文本输入

 

按钮

6.3 表单中其他标签

field/legend

health information height:
weight:

datalist(新增)

  

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

required 必填

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

指定类型验证

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

pattern 正则

 

6.5 表单控件相关属性

  • disabled 表示不可用 用于所有的表单控件

  • enabled 表示可用 用于所有的表单控件

  • readable 表示只读 用于可输入的表单控件

  • autofocus 自动获取焦点 所有表单控件

  • autocomplete 值on/off 用于可输入的控件 是否自动填充内容

  • pattern 正则验证 可输入的控件

  • required 必填

7 音频/视频 (HTML5新增)

7.1 HTML标签

  • <video></video> 定义视频

    | 属性 | 值 | 描述 | | -------- | ------------------ | ------------------------------------------------------------ | | autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放。 | | controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 | | height | pixels | 设置视频播放器的高度。 | | loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 | | muted | muted | 如果出现该属性,视频的音频输出为静音。 | | poster | URL | 规定视频正在下载时显示的图像,直到用户点击播放按钮。 | | preload | auto metadata none | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。 | | src | URL | 要播放的视频的 URL。 | | width | pixels | 设置视频播放器的宽度。 |

  • <audio></audio> 定义音频

    | 属性 | 值 | 描述 | | -------- | ------------------ | ----------------------------------------------------------- | | autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放。 | | controls | controls | 如果出现该属性,则向用户显示音频控件(比如播放/暂停按钮)。 | | loop | loop | 如果出现该属性,则每当音频结束时重新开始播放。 | | muted | muted | 如果出现该属性,则音频输出为静音。 | | preload | auto metadata none | 规定当网页加载时,音频是否默认被加载以及如何被加载。 | | src | URL | 规定音频文件的 URL。 |

  • <source></source>为媒体元素(比如 <video> 和 <audio>)定义媒体资源

    | 属性 | 值 | 描述 | | ----- | ------------- | ------------------------------------------ | | media | media_query | 规定媒体资源的类型,供浏览器决定是否下载。 | | src | URL | 规定媒体文件的 URL。 | | type | MIME_type | 规定媒体资源的 MIME 类型。 |

7.2 视频

支持的视频类型

浏览器 MP4 WebM Ogg
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
  • MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
  • WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
  • Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

视频格式的MIME类型

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

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

7.3 音频

支持的音频格式

浏览器 MP3 Wav Ogg
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

转载于:https://www.cnblogs.com/wcl0517/p/9390342.html

你可能感兴趣的文章
sql中的下划线不作为通配符的做法
查看>>
AIX查看网卡实时流量
查看>>
PLC如何和手机通信
查看>>
Spring之AOP的实现
查看>>
Linux下rz,sz与ssh的配合使用
查看>>
KVM虚拟化学习总结之简介
查看>>
php如何用window.open实现excel数据导出
查看>>
使用代理服务器环境下的XP自动更新
查看>>
我的友情链接
查看>>
apache虚拟主机的搭建
查看>>
【Linux系统安装】磁盘与分区的命名规则
查看>>
关于Android手势类GestureDetector类
查看>>
hadoop相关要点
查看>>
Cubieboard官方 GPIO驱动使用总结
查看>>
rman恢复数据库
查看>>
Struts2学习笔记(一)初步了解Struts2以及配置
查看>>
我的友情链接
查看>>
presto Resource Groups
查看>>
我的友情链接
查看>>
慢工出细活,Facebook点赞按钮设计中的门道
查看>>