一周学会HTML----Day02常用标签(上)
扩展
在开始第二天的课程之前,我们先来拓展两个概念。
第一个是前台和后台:前台是指用户看到的界面,而后台是指相关具有前线的人操作的界面
第二个是前端和后端:前端是值用户看到的界面和界布的操作(安卓、ios、网页);后端的主要是业务逻辑、整体架构
img 标签 图片 单标签
属性:
width: 宽
height:高
border:边宽
title:标题 形同功能的alt在新的浏览器里面不再支持了
src:source源
注意:如果只设定宽或者只设定高,是按照等比例进行缩放的,如果设置了宽和高,按照设置的值进行实际变化
video 标签 视频播放器 对标签
video src="movie.ogg" controls="controls" autoplay loop width="300px">
属性:
src:来源
controls:显示控制面板
autoplay:自动播放
width:宽
height:高度
loop:循环次数
preload:预加载
注意:如果不设置他的相关属性,他是不会显示控制播放的界面的,而且,只要出现controls属性就会显示面板,赋值的时候是controls=‘controls’或者直接不赋值,相同属性的有autoplay=’autoplay‘,loop=’loop‘,给loop设置循环次数是不起作用的
audio标签 音频播放器 对标签
属性:
coontrols:显示控制面板,各个浏览器不同
autoplay:是否自动播放
src:资源地址
loop:是否循环
preload:预加载
map标签 :带有可点击区域的图像映射
属性:
name:标识
area标签
属性:
shape:圆形 circle 矩形 rect 不规则图形poly
1、 circle coords( 圆心,半径)(x,y,r)
2、rect coords(左上角坐标,右下角坐标)(x1,y1,x2,y2)
3、 poly coords(第一个点坐标,....,第n个点坐标)(x1,y1,x2,y2...xn,yn)
map标签和area标签配和使用
<img src="image.jpg" border="0" usemap="#planetmap" />
<map name="planetmap" id="planetmap">
//在图片画出一个区域当做热区,当点击该区域的时候跳转到指定页面
<area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
<area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
<area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>
a标签(超链接)
在介绍a标签之前先介绍几个概念
__url:__统一资源定位符
__协议:__http、tcp、ip ftp、thunder、magnet、edk
__地址:__服务器地址,可能是域名,也可能是ip
__端口:__http : 80
ftp: 20
https : 443
端口0~65535 0~1023是系统用的
__文件:__yunf/archive/2011/04/12/2013448.html
参数:?后的部分,以键值对方式出现,多个参数之间以&链接
属性:
href: 跳转页面地址,本地文件可以使用相对地址或绝对地址
__title :__提示
__target :__打开方式
- _self 当前窗口打开
- _blank 新窗口打开
__mailto/tel:__发送邮件/拨打电话
锚点: 跳转到锚点 定义锚点 页内锚点 跨页面锚点
其中map标签和a标签比较其他标签用法比较繁琐也比较常用,是重点掌握的知识
颜色表示方式
RGB红绿蓝
0123456789ABCDEF (16进制)
‘ #FF0000 红色’
‘#00FF00 绿色’
‘#0000FF 蓝色’
__重点:__知道颜色的组成。会使用取色器把颜色给吸出来。吸管工具。Fireworks,photoshop,取色精灵.....
fonts属性
Color 颜色
Size 尺寸
Face 字体(我们在网络上不使用特殊字体,因为传输速度,我们如果有特殊字体使用图片来代替)
table标签 对标签 表格
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
属性:
Border 没有加边框不显示边框
Width 表格宽度
tr行标签
Bgcolor 写上对应的颜色(大家在做项目的时候,要做出隔行变色效果。避免我们的用户,看错行。)
__Align 值:__center|left|right 控制水平位置
__Valign 值:__top|middle|bottom 上中下
Td 列标签
Colspan 列
Rowspan 行
最新文章
- 大熊君学习html5系列之------History API(SPA单页应用的必备)
- CentOS7之VMware安装
- oracle学习 四(持续更新中)无法为表空间 MAXDATA 中的段创建 INITIAL 区
- Qwt的编译与配置
- HW4.32
- FindBugs的Bug类型及分析
- 手动调整导航控制器中的viewcontroller
- C#实现网页表单自动提交
- Codility上的问题 (16) Omicron 2012
- 猎豹移动(金山网络)2015校园招聘(c++project师)
- IdentityServer(14)- 使用EntityFramework Core配置和操作数据
- 【PAT】反转链表
- LVS简单介绍
- ASP.NET Core MVC 源码学习:详解 Action 的匹配
- 用面向对象重写thread 实现多次调用一个线程
- Linux 磁盘告警分析
- 一个相对通用的JSON响应结构,其中包含两部分:元数据与返回值
- c#与C++类型转换网摘
- HMM与分词、词性标注、命名实体识别
- http://www.rabbitmq.com/
热门文章
- React-Native 常用组件学习资料链接
- CentOS 7 安装各个桌面版本
- Mysql数据库导出sql脚本
- 并发-AtomicInteger源码分析—基于CAS的乐观锁实现
- Codeforces Round #315 (Div. 2) C. Primes or Palindromes? 暴力
- 详解Django自定义过滤器
- 构造函数=default表示什么?
- scrapy框架解读--深入理解爬虫原理
- javascript 对象简单介绍(二)
- 分享知识-快乐自己:MYSQL之內链接 左链接 右链接 区别