扩展

在开始第二天的课程之前,我们先来拓展两个概念。

第一个是前台和后台:前台是指用户看到的界面,而后台是指相关具有前线的人操作的界面

第二个是前端和后端:前端是值用户看到的界面和界布的操作(安卓、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 行

一周学会HTML----Day02常用标签(上)的更多相关文章

  1. HTML常用标签(上)

    HTML常用标签 1. web标准 1.1 web标准的构成 主要包括结构.表现和行为三个方面. 标准 说明 结构 用于对网页元素进行整理和分类(HTML) 表现 用于设置网页元素的外观样式(CSS) ...

  2. HTML之一天学会html(常用标签+网页架构)

    1.  网页文件的创建 新建一个文本文件,将其命名为xxx.html或者xxx.htm(注意后缀名) 2.  简单的html页面的编写 在网页中都是通过标签来指定相应的显示内容,所有的页面内容都必须在 ...

  3. 一周学会go语言并应用 by王奇疏

    <一周学会go语言并应用> by王奇疏 ( 欢迎加入go语言群: 218160862 , 群内有实践) 点击加入 零.安装go语言,配置环境及IDE 这部分内容不多,请参考我的这篇安装环境 ...

  4. html常用标签及属性,常用英语单词

    目录 html常用标签 html常用标签属性 前端常用英语单词表(未完待续) 欢迎评论点赞交流,转发请添加原博客连接谢谢! Ctrl键+F 可以查找你想要的内容哦! html常用标签 htmi结构 & ...

  5. 范仁义html+css课程---2、html常用标签

    范仁义html+css课程---2.html常用标签 一.总结 一句话总结: html常用的标签有 标题标签.div.span.p.hr.br标签 等 1.html中的标题标签有哪些? <h1& ...

  6. html常用标签详解

    html常用标签详解 一.总结 一句话总结: 这些资料没必要自己总结,可以直接网上找,简单方便,再根据需求改一下 二.HTML常用标签详解 转自或参考:HTML常用标签详解https://blog.c ...

  7. HTML常用标签

    HTML常用标签: HTML文档格式: 首先,HTML是一种超文本标签语言,它是制作网页的基础. 其次,HTML文档中至少包含基本的和成对的<html> </html>.< ...

  8. html常用标签介绍

    常用标签介绍 文本 最常用的标签可能是<font>了,它用于改变字体,字号,文字颜色. 点击查看效果 <font size="6">6</font&g ...

  9. HTML常用标签总结

    HTML 的常用标签总结 <font size="字体大小1-7" color="red或0xff00ff" face="字体类型(楷体等)&q ...

  10. CSS常用标签

    CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; / ...

随机推荐

  1. 判断一个对象是否有new

    C++语言中,对象没有空和不空的概念,只有对象指针才有空和不空的概念 判断对象指针是否为空只需要和NULL常量进行比较即可 如果相等,则为空,否则不为空 另外对象虽然没有空和不空的概念,但是有有效和无 ...

  2. Linux系统基本的内存管理知识讲解

    内存是Linux内核所管理的最重要的资源之一.内存管理系统是操作系统中最为重要的部分,因为系统的物理内存总是少于系统所需要的内存数量.虚拟内存就是为了克服这个矛盾而采用的策略.系统的虚拟内存通过在各个 ...

  3. idea开启springboot的devtools自动热部署功能

    1.先在pom文件中添加下面代码段 <!-- 热部署 --> <dependency> <groupId>org.springframework.boot</ ...

  4. jvm-java内存模型与锁优化

    java内存模型与锁优化 参考: https://blog.csdn.net/xiaoxiaoyusheng2012/article/details/53143355 https://blog.csd ...

  5. Pyspider爬虫教程

    Pyspider爬虫教程 一.安装 1. 安装pip (1)准备工作 yum install –y make gcc-c++ python-devel libxml2-devel libxslt-de ...

  6. RQN 273 马棚问题 dp

    PID273 / 马棚问题  2016-07-29 18:21:55 运行耗时:1624 ms 运行内存:16248 KB 题目描述 每天,小明和他的马外出,然后他们一边跑一边玩耍.当他们结束的时候, ...

  7. root run-parts

    crontab的文件格式 分 时 日 月 星期 要运行的命令 第1列分钟0-59 第2列小时0-23(0表示子夜) 第3列日1-31 第4列月1-12 第5列星期0-7(0和7表示星期天) 第6列要运 ...

  8. 进入root权限操作

    su:authentication failure的解决办法 $ su - rootPassword:su: Authentication failureSorry. 这时候输入 $ sudo pas ...

  9. css文本(教程)

    1.text-transform --文本转换 定义文本的大小写状态,此属性对中文无意义 取值:capitalize | uppercase | lowercase | none | inherit ...

  10. python学习笔记(excel中处理日期格式)

    涉及到处理excel文件中日期格式数据 这里自己整理下 两种方法 代码如下: @classmethod def get_time(cls, table, nrows): testtime = [] f ...