H5常用标签及其属性:

<a>标签做超链接;

<p>段落标签,自带段间距和换行样式;

<div>块标签,表示一块内容,没有具体语意,区别与p标签,块与块间没有间距;

<h1>标题标签,从大到小一共六级标题;

<img>引用图片,使用相对路径,方便项目移植;

<table>创建表格,tr行,td列;

<iframe>内嵌框架;

<span>标签截取一小截文字,方便配合css添加特定样式,没有具体语意;

<i>标签自带倾斜样式,加强语意,表示用于专业词汇;

<em>标签自带倾斜样式,强调语气;

<br>标签用于换行;

<b>某个关键词或产品名的加粗强调时使用;

<strong>标签大面积加粗;

空格:nbsp;

字符转义(>、<、/);

三种列表:

一对标签是一个有序列表;

一对标签是一个无序列表;

列表内部一对<li></li>是一条列表内容。

六级标题:

用户注册表单:

file控件选择文件,

text控件是文本编辑框,

password控件是密码输入框,

radio是单项框,多个时设置不同id,

checkbox是多选框,

select是下拉列表,

  option是列表内容。

textarea是多行文本编辑框。

button是按钮,submit是提交按钮,reset是重置按钮,image是图片按钮。

  
   

表格设置:

一对table标签是一个表格。

一对th标签是一列字段名内容的表格,默认加粗居中。

一对tr标签是一行普通内容的表格,默认左对齐,不加粗。

一对td标签是一列普通内容的表格。

border设置边框线粗细,width设置单元格宽度,height设置单元格高度,bgcolor是背景色。

cellpadding设置内容与单元格内边距,cellspacing设置单元格与单元格的间距。

colspan合并列单元格,align单元格内容水平对齐,valign单元格内容垂直方式对齐。

 

内嵌框架:

target指定显示位置,

frameborder内嵌框架的边框粗细,

scrolling是内嵌框架的滚动条设置,

<body>
<a href="http://www.baidu.com" target="myfram">百度</a>
<a href="https://www.taobao.com" target="myfram">阿里巴巴</a>
<a href="http://www.qq.com" target="myfram">腾讯网</a><br />
<iframe src="http://www.baidu.com"
width="900" height="500" frameborder="0" scrolling="no" name="myfram">
</iframe>
</body>

使用锚点进行页内跳转:

给指定标签设置id,给指定内容用id做a标签链接至标签Id。

<h1 id="biaoti1">标题1</h1>
<a href="#biaoti1">标题1</a>
<a href="#biaoti2">标题2</a>
<a href="#biaoti3">标题3</a>
<a href="#biaoti4">标题4</a>

点击指定标题后,跳转↓

链接引用:

  链接网络地址要加http写完整地址:<a href="http:www.baidu.com"  target=“_blank”>有不懂?找度娘!</a>

  链接本地图片:<img src="./images/baidu.png" alt="百度logo">

  引用本地资源时,使用相对路径,方便项目移植。

转义字符:

  &gt;转义为>

  &lt;转义为<

  &nbsp;转义为空格,连续多个空格时浏览器渲染为一个空格,多个空格用样式实现。

前端学习笔记-H5的更多相关文章

  1. 【前端】Web前端学习笔记【2】

    [2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...

  2. 【前端】Web前端学习笔记【1】

    ... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...

  3. Web前端学习笔记(001)

    ....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记         ...

  4. web前端学习笔记

    web前端学习笔记(CSS盒子的定位) 相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准 ...

  5. 前端学习笔记汇总(之merge方法)

    学习笔记 关于Jquery的merge方法 话不多说,先上图 使用jquery时,其智能提示如上,大概意思就是合并first和second两个数组,得到的结果是first+(second去重后的结果) ...

  6. 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案

    概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...

  7. 前端学习笔记——移动前端UI选择

    一.jQuery Mobile jQuery Mobile 是jQuery在移动设备上的版本,做为主要针对移动设备的框架来说,它提供一个移动设备平台统一的接口来兼容不同的移动平台,其特性包括: 1.简 ...

  8. web前端学习笔记:文本属性

    今天的web前端笔记主要讲述文本属性,希望能帮助到正在学习web前端开发的初学者们,废话不多说了,一起来看看文本属性的相关内容吧. 文本属性 文本缩进 将Web页面上的一个段落第一行缩进,这是一种最常 ...

  9. Web前端学习笔记:Bootstrap框架

    很久之前就有很多人给我推荐twitter的Bootstrap框架,但是直到前几天我才真正学习了下Bootstrap,的确是相当棒的框架,至少从视觉体验上超越了很多以前碰到了前端UI框架.今天我要聊聊B ...

随机推荐

  1. python set() leetcode 签到820. 单词的压缩编码

    题目 给定一个单词列表,我们将这个列表编码成一个索引字符串 S 与一个索引列表 A. 例如,如果这个列表是 ["time", "me", "bell& ...

  2. VS2015 Visual Assist X 破解版安装教程

    前言 此方法适合VS2010~VS2015版本. 安装包下载方法:公众号[视觉IMAX]后台回复「VA助手」,即可得到安装包下载链接. 工作以来,一直在使用VS2015,之前一直根据的网上飘云阁的破解 ...

  3. Java系列之泛型

    自从 JDK 1.5 提供了泛型概念,泛型使得开发者可以定义较为安全的类型,不至于强制类型转化时出现类型转化异常,在没有反省之前,可以通过 Object 来完成不同类型数据之间的操作,但是强制类型转换 ...

  4. Android 数据库框架 DBFlow 的使用

    原文首发于微信公众号:jzman-blog,欢迎关注交流! DBFlow 是一个基于注解处理器开发的使用方便的 ORM Android 数据库,该库简化了很多多余的代码,并且提供了好用的 API 来处 ...

  5. Spinner的简单实用

    1.Spinner的功能 Spinner在Android中主要实现的是一个下拉列表,这个下拉列表相当于弹出一个弹出一个菜单供用户选择.即Spinner提供一个快速的方法从一组中选择一个值,默认状态下S ...

  6. Netty为什么不直接用AtomicXXX,而要用AtomicXXXFieldUpdater去更新变量呢?

    更多技术分享可关注我 前言 如果仔细阅读过Netty的线程调度模型的源码,或者NIO线程对象及其线程池的创建源码,那么肯定会遇到类似“AtomicIntegerFieldUpdater”的身影,不禁想 ...

  7. 【swagger】C# 中 swagger 的使用及避坑

    @ 目录 1 安装 2 修改名称和版本号 3 显示说明 4 显示控制器注释及汉化 5 路由相同,查询参数不同的方法 6 忽略 Model 中的某些字段 7 传递 header 8 出错时的 HTTP ...

  8. B 火车

    时间限制 : 10000 MS   空间限制 : 565536 KB 评测说明 : 1.5s,512m 问题描述 A 国有n 个城市,城市之间有一些双向道路相连,并且城市两两之间有唯一路径.现在有火车 ...

  9. 【Net】ABP框架学习之它并不那么好用

    前言 上一篇文章介绍了ABP的Web API,本文在继续介绍ABP的其他内容. 在ABP中,WEBAPI是一个值得用的东西.但其他东西,就不一定是那么好用了. 下面我们看一下ABP的Controlle ...

  10. 第一次将本地项目push到github

    问题:github有一个空项目,将本地项目上传到github空项目时,报错如下 $ git push --set-upstream git@github.com:dslu7733/promise.gi ...