前端学习笔记-H5
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">
引用本地资源时，使用相对路径，方便项目移植。
转义字符：
>转义为>
<转义为<
转义为空格，连续多个空格时浏览器渲染为一个空格，多个空格用样式实现。
前端学习笔记-H5的更多相关文章
- 【前端】Web前端学习笔记【2】
[2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...
- 【前端】Web前端学习笔记【1】
... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...
- Web前端学习笔记(001)
....编号 ........类别 ............条目 ................明细....................时间 一.Web前端学习笔记 ...
- web前端学习笔记
web前端学习笔记(CSS盒子的定位) 相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准 ...
- 前端学习笔记汇总（之merge方法）
学习笔记 关于Jquery的merge方法 话不多说,先上图 使用jquery时,其智能提示如上,大概意思就是合并first和second两个数组,得到的结果是first+(second去重后的结果) ...
- 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案
概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...
- 前端学习笔记——移动前端UI选择
一.jQuery Mobile jQuery Mobile 是jQuery在移动设备上的版本,做为主要针对移动设备的框架来说,它提供一个移动设备平台统一的接口来兼容不同的移动平台,其特性包括: 1．简 ...
- web前端学习笔记：文本属性
今天的web前端笔记主要讲述文本属性,希望能帮助到正在学习web前端开发的初学者们,废话不多说了,一起来看看文本属性的相关内容吧. 文本属性 文本缩进 将Web页面上的一个段落第一行缩进,这是一种最常 ...
- Web前端学习笔记：Bootstrap框架
很久之前就有很多人给我推荐twitter的Bootstrap框架,但是直到前几天我才真正学习了下Bootstrap,的确是相当棒的框架,至少从视觉体验上超越了很多以前碰到了前端UI框架.今天我要聊聊B ...
随机推荐
- 搭建SQL server AwaysOn集群
1.环境 系统:windows server 2012 R2 数据库版本:SQL server 2012 三台服务器,IP分别是:10.10.10.111,10.10.10.112,10.10.10. ...
- 使用Python+OpenCV进行图像处理（二）| 视觉入门
[前言]图像预处理对于整个图像处理任务来讲特别重要.如果我们没有进行恰当的预处理,无论我们有多么好的数据也很难得到理想的结果. 本篇是视觉入门系列教程的第二篇.整个视觉入门系列内容如下: 理解颜色模型 ...
- Sublimeの虚拟环境（Venv）设置
这里主要介绍,在使用 Python 虚拟环境(Venv)时,SublimeText 该怎么设置 为什么使用虚拟环境(Venv) 因为,我有洁癖! 我就是喜欢看到,pip list 命令下什么 Pack ...
- 基于zookeeper实现分布式锁和基于redis实现分布所的区别
1,实现方式不同 zookeeper实现分布式锁:通过创建一个临时节点,创建的成功节点的服务则抢占到分布式锁,可做业务逻辑.当业务逻辑完成,连接中断,节点消失,继续下一轮的锁的抢占. redis实现分 ...
- kerberos系列之flink认证配置
大数据安全系列的其它文章 https://www.cnblogs.com/bainianminguo/p/12548076.html-----------安装kerberos https://www. ...
- HTML 基础（六）
一.脚本 JavaScript 是 HTML 页面具有更强的动态和交互性 <script> 标签 <script> 标签用于定义客户端脚本,<script> 元素既 ...
- Java中的get()方法和set()方法
在Java中,为了数据的安全,换句话说就是为了隐藏你的代码的一些实现细节,我们会用private来修饰属性,使用private修饰的属性就不能被其他类直接访问了,想要访问就需要通过set.get方法: ...
- jq日历一周为单位轮播
简单效果图: 代码如下: <!doctype html> <html lang="en"> <head> <meta charset=&q ...
- 1067 Sort with Swap(0, i) (25分)
Given any permutation of the numbers {0, 1, 2,..., N−1}, it is easy to sort them in increasing order ...
- Scheme语言实例入门--怎样写一个“新型冠状病毒感染风险检测程序”
小学生都能用的编程语言 2020的春季中小学受疫情影响,一直还没有开学,孩子宅在家说想做一个学校要求的研究项目,我就说你做一个怎么样通过编程来学习数学的小项目吧,用最简单的计算机语言来解决小学数学问题 ...