HTML5相关知识一

html5现在框架

sencha-touch

phoneGap

jQuery mobile

bootStrap

HTML的全称是HyperText Markup Language,超文本标记语言

跟XML类似,HTML由N个标签组成

常见的HTML标签

标题 h1h2h3h4h5....

段落 p

换行 br

容器:divspan

表格  tabletrtd

列表 lulolli

图片 img

表单 input

链接 a

结构性标签

article  文章主体内容

header 标记头部区域内容

footer  标记脚部区域内容

section 区域章节表述

nav  菜单导航,链接导航

块级性标签 完成web页面区域的划分,确保内容的有效隔离

aside  注记,贴士,侧栏,摘要,插入的引用作为补充主体的内容

figure 对多个元素组合并展示的元素,常与figcaption联合使用

code    表示一段代码块

dialog 人与人之间对话,包含dtdd两个组合元素(dt用于表示说话者、dd用于表示说话者的内容)

行内语义性标签

meter  特定范围内的数值,如工资、数量、百分比

time      时间值

progress 进度条,可用maxminstep进行控制,完成对进度的表示和监听

video     视频元素,用于视频播放,支持缓冲预载和多种视频媒体格式

audio     音频元素用于音频播放,支持缓冲预载和多种音频媒体格式

交互性标签

details   表示一段具体的内容,默认不显示,通过某种方式(单击)与legend交互才会显示datagrid  控制客户端数据与显示,可用于动态脚本及时更新

menu      用于交互菜单

command   用来处理命令按钮

CSS的全称是Cascading Style Sheets,层叠样式表

CSS有3种样式

1 行内样式

<body style="color: red;">

2 页内样式

<style>

    body {

        color: red;

    }

</style>

3 外部样式

<link rel="stylesheet" href="index.css">

选择器

标签选择器

<div>标签</div>  div {color: red;}

类选择器

<p class="high">我是一个类选择器</p>

.high {color: red}

id 选择器

<p id="high">我是一个ID选择器</p>

#high {color: red}

并列选择器

 

复合选择器

 

后代选择器

 

 

直接后代选择器

 

 

 

属性选择器

 

 

 伪类

 选择器优先级排序

important > 内联 > id > > 标签 | 伪类 | 属性选择 > 元素 > 通配符 > 继承HTMLN多标签,根据显示的类型,主要可以分为3大类

p块级标签

独占一行的标签

能随时设置宽度和高度(比如divph1h2ulli

行内标签(内联标签)

多个行内标签能同时显示在一行宽度和高度取决于内容的尺寸(比如spanalabel

行内-块级标签(内联-块级标签)多个行内-块级标签可以显示在同一行

能随时设置宽度和高度(比如inputbutton

CSS 中有个 display 属性,能修改标签的显示类型
none 隐藏 标签
block :让标签变为 块级 标签
inline :让标签变为 行内 标签
inline-block :让标签变为 行内 - 块级 标签( 内联 - 块级 标签)
CSS N 多属性,根据继承性,主要可以分为 2 大类
可继承 属性
父标签的属性值会传递给子标签
一般是 文字控制 属性
不可继承 属性
父标签的属性值不能传递给子标签
一般是 区块控制 属性
所有标签可继承
visibility cursor
内联标签可继承
letter-spacing word-spacing white-space line-height color font font-family font-size font-style font-variant font-weight text-decoration text-transform direction
块级 标签 可继承
text-indent text-align
列表 标签 可继承
list-style list-style-type list-style-position list-style-image
所有标签可继承
visibility cursor
内联标签可继承
letter-spacing word-spacing white-space line-height color font font-family font-size font-style font-variant font-weight text-decoration text-transform direction
块级 标签 可继承
text-indent text-align
列表 标签 可继承
list-style list-style-type list-style-position list-style-image
不可继承属性
display margin border padding background
height min-height max-height width min-width max-width
overflow position left right top bottom z-index
float clear
table-layout vertical-align
page-break-after page-bread-before
unicode-bidi
RGBA 透明度

  RGB(红色R+绿色G+蓝色B),RGBA则在其基础上增加了Alpha通道,可用于设置透明值

默认情况下,所有的网页标签都在 标准流 布局中
从上到下,从左到右
脱离标准流的方法有
float 属性
position 属性 和 left right top bottom 属性
float 属性的常用取值有
left :脱离标准流,浮动在父标签的最左边
right :脱离标准流,浮动在父标签的最右边

 

l Node.js 的优势
可以作为 后台语言
单线程

   不新增额外线程的情况下,依然可以对任务进行并行处理(采用事件轮询)

JS 常见的书写方式有 2
p 页内 JS :在当前网页的 script 标签中编写

<script type="text/javascript">

</script>

外部JS

<script src="index.js"></script>

var canvas = document.getElementById('canvas');

   var context = canvas.getContext('2d');

    context是一个绘图的上下文环境

    2d是二维图形

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值