前端学习笔记-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 ...
随机推荐
- [单调栈]小A的柱状图
链接:https://ac.nowcoder.com/acm/problem/23619来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言52428 ...
- Django 模型笔记
关于模型: 1:一个模型类对应一个表,模型类中的属性对应表中的一个字段 2:字段类型(数据库支持的类型) 模型属性 字符串 1:CharField(Maxlength=长度) models.CharF ...
- 从ISTIO熔断说起-轻舟网关熔断
最近大家经常被熔断洗脑,股市的动荡,让熔断再次出现在大家眼前.微服务中的熔断即服务提供方在一定时间内,因为访问压力太大或依赖异常等原因,而出现异常返回或慢响应,熔断即停止该服务的访问,防止发生雪崩效应 ...
- OpenCV-Python 理解特征 | 三十六
目标 在本章中,我们将尝试理解什么是特征,为什么拐角重要等等 解释 你们大多数人都会玩拼图游戏.你会得到很多小图像,需要正确组装它们以形成大的真实图像.问题是,你怎么做?将相同的理论投影到计算机程序上 ...
- OpenCV-Python系列教程介绍
写在前面的话 OpenCV是计算机视觉中经典的专用库,其支持多语言.跨平台,功能强大. OpenCV-Python为OpenCV提供了Python接口,使得使用者在Python中能够调用C/C ,在保 ...
- tensorflow 控制流操作,条件判断和循环操作
Control flow operations: conditionals and loops When building complex models such as recurrent neura ...
- CSS3+CSS+HTML实现网页
效果图: 代码实现: 样式部分style.css: *{ margin:; padding:; } body{ background-color: #673929; font-size: 16px; ...
- 如何将MagicaVoxel模型导入UE4中(2)
前言 当可以把MagicaVoxel的静态模型导入到UE4后,我又开始不满足了.默认第三人称蓝图的"汽车碰撞人偶(雾)"与场景中的体素画风格格不入,于是,我便想着用自己建造的体素画 ...
- STM32F103ZET6 GPIO的使用
1.GPIO简介 STM32F103ZET6有多个GPIO组,如GPIOA.GPIOB.GPIOC...等等.每个GPIO组具有16个IO口. GPIO组的寄存器都是类似的,每个GPIO组都有2个32 ...
- 使用vant的时候,报错:component has been registered but not used以及vant的使用方法总结
使用vant的时候,报错:component has been registered but not used以及vant的使用方法总结 在使用vant的时候. 想按需引入,于是安装了babel-pl ...