HTML学习笔记 day two
HTML学习笔记
day two
Charter three网站中的文本样式标签
3.1设置标题字体
语法结构:<h#>标题文字</h#>
注:其中的#可以为1,2,3,4,5,6,不同的数字代表标题的大小,数字越大字体越小。
3.2设置网页文字样式
语法结构:<font size="#" face="想要的字体“>文本内容</font>
注:其中的#可以是1,2,3,4,5,6,7,不同的数字代表标题的大小,数字越大字体越大。
3.3文本布局标签
文本缩进标签:
语法结构:<blockquote>文本内容</blockquote>
作用:它是对整段的内容进行缩进而不是对首行进行缩进,所以他常用于引用。
保留格式标签: 语法结构:<pre>文本内容</pre>
作用:用来保留文本中的空格和换行
内联行标签
语法结构:<span>文本内容</span>
作用:它本身是没有意义的,他要和CSS结合起来使用
3.4基于物理样式的文本标签
加粗标签
语法结构:<b>加粗文字</b>
斜体标签
语法结构:<i>斜体文字</i>
下划线标签
语法结构:<u>文字</u>
文字标记标签
语法结构:<ins cite=”链接“ datetime=”时间“>文字</ins>
属性:cite和datetime,前者指出文档的链接或者修改原来的链接,总之就是一个链接,后者指出的是修改的时间
删除线标签
语法结构:<del>文字</del>或者<s>文字</s>
上标标签
语法结构:<sup>斜体文字</sup>
下标标签
语法结构:<sub>斜体文字</sub>
3.5基于逻辑样式的文本标签
逻辑样式标签指的是浏览器根据自己对标签的理解然后显示出效果
<big>文字</big>
<small>文字</small>
前一个标签是让文字大一号,后一个标签是让文字小一号
特注:在HTML5中已经没有font,big,small,u标签,在你写的时候会有横线,但是可以执行,效果也可以显示出来,原因应该是浏览器还能够读出标签的含义
Chapter four 超链接
4.1创建超链接
语法结构:<a href="链接的地址”>显示出的名称</a>
4.2href属性
链接到同一页面的其他位置
语法结构:
<a name=”n”>显示出的名称</a>
<a href=”#n”>显示出的名称</a>
这两个谁在前谁在后没有关系关键是name属性的值和href属性中值要对应,常用于页面太长的情况
本地相对路径 1,同级链接: 直接写上链接的HTML的名字就可以
2.下级链接:
“文件名/链接的HTML的名字"
3.上级链接
”../链接的HTML的名字"
空间网址绝对路径 URL
“http://www.Baidu.com/"
为了规范一般要在最后的位置加上 / ;不能够少了http://这样的头
4.3target属性
作用:用来控制链接目标的打开方式
方式: _blank:在新窗口打开
_parent:在父窗口打开,原来的页面会被覆盖 _self:在当前窗口打开,不考虑框架的情况下和前者是一样的 _top:打开的链接会出现在最顶层的窗体,不考虑框架的情况下和前者是一样的
Chapter five 图像的使用
5.2设置背景图像
语法结构
<body background="#"> </body> 注:其中#填的是图片的路径名
5.3图像标签
语法结构:<img src="图片路径” alt="替换的文本" width="数字px" height="数字px " align=" 方位" border=" 数字px" hspace="数字px " vspace="数字px "/>
图片路径的写法:
<img src="./meishaonv1.jpg" alt="这里是图片"/>
用来链接当前和HTML同级的图片
<img src="../myimage/baobao.jpg" alt="这里是图片"/>
用来链接在同一目录下两个不同的文件夹,图片在myimage文件夹,而HTML在Myhtml文件夹
它的路径名和超链接的是一样的用法
属性:
Alt:写上当图片不显示的时候所代替它显示的文本,在goole chorm不会显示,在IE会显示
Width:设置图片的宽度,不改变图片本身的内容
Height:设置图片的高度,不改变图片本身的内容
Align:在图片进行排版,有五个方向:bottom,left,right,Middle,top,用来设置文字在图片的那个位置
Border:默认的边框颜色是黑色
Hspace:水平间距
Vspace:垂直间距//这两者都是为了来设置图片和文字的距离
5.4图像超链接
语法结构: <a href=”链接的路径名 “><img src=”图片的路径名 “/> </a>
创建热点区域:
<img src=”图片的路径名 “ usemap=”#图片名称“/>
<map name=”图片名称”>
<area shape=”确定热点图形” cords=” 坐标“ href=”被连接的地址”>
</map>
注:
热点图形有:rect:它的坐标要用四个值表示,前两个值表示起始的一个角x,y ;后两个值表示与之成对角线的角的x,y
Circle:它的坐标只要三个值,前面两个值表示圆心坐标,最后一个表示半径
Poly:这是多边形,他有2n个数字,每对数字都表示出了一个转折点
5.5插入视频文件
语法结构: <img dynsrc=”视频地址” loop=“数字” start=”开始的方式“/>
Loop:表示循环的次数,当等于-1时表示无限循环
Start:表示开始的方式,fileopen 表示一打开就会播放mouseover 当鼠标点击的时候才会播放
Chapter six表格的使用
6.1表格的基本构成
语法结构: <table>
<tr>//行标签
<th>标题内容</th>//标题标签 <td>文本内容</td>//列标签
</tr>
</table>
注意: 每一个文本内容都要添加在<td>标签之中,只有添加到这个标签之中才能够被正确的读取
标题标签的特殊之处在于它能够使得文字加粗并且居中,这是它与列标签的不同之处
6.3表格属性
Width:表格宽度设置,td,table都可以用
Height:表格高度设置,td,table,tr都可以用
Background:设置背景图片,在IE里面tr不能用,在goole chorm可以用,另外在table,td中两者都可以用
Cellspacing:表格间距,制表格中列与列之间的间距,方在table中
注意:想要切出来的图显示不变形,然后可以很好的对齐,可以设cellspcing=0 border=0
Cellpadding:设置单元格的内容和边框的距离
6.4表格边框
属性:
Border:设置边框的宽度
Bordercolor:设置边框的颜色
Bordercolorlight:亮色边框颜色,指的是左边框和上边框的颜色
Bordercolordark:暗色边框颜色,指的是右边框和下边框的颜色
Frame:四周边框显不显示,它的值有 void,hsides,vsides,above,below,lhs,rhs
Void:不显示外边框【,只显示内边框,
Hsides:只显示上下边框
Vsides:只显示左右边框
above,below,lhs,rhs:分别显示上下左右的一个边框
6.5对齐方式
适用于行,即<tr>标签
Align=”center/left/right" 这是进行水平对齐方式
VAlign=”top/middle/bottom" 这是进行竖直对齐方式
注意:在写标签属性的时候一定要特别注意他们的顺序,如果顺序错了就会读不出来,想要知道他的顺序,只要查查笔记中各个属性提到的时间的前后就是他们的顺序。
6.6行和列的合并
行的合并 语法结构
<table>
<tr>
<td rowspan="n"></td>
</tr>
</table>
列的合并 语法结构
<table>
<tr>
<td colspan="n"></td>
</tr>
</table>
注其中的n都表示要合并的
6.7表格标题标签
语法结构:
<table>
<caption>表格标题内容</caption>
<tr>
<td ></td>
</tr>
</table>
作用:通常被居中显示在表格的正上方,必须紧随table标签,并且每个表格只能定义一个标题
Chapter seven多媒体元素
7.1活动字幕
语法结构: <marquee>文本或图片</marquee>
属性: behavior:值有scroll,slide,alternate
其中scroll表示循环滚动,slide表示只滚动一次,alternate表示来回滚动
Bgcolor:表示背景色
Direction:值有left,right,up,dowm,表示滚动的方向
Scrollamount:表示滚动的速度,数值从1开始,数值越大的滚动的速度越快
Scrolldelay:滚动字幕停顿的时间,填的数字,默认单位是毫秒,所以数字越大停顿的时间越长
Hspace,vspace:用来设置内容和滚动框的水平和竖直的距离
Loop:用来设置循环的次数
onmouseOver:用来设置鼠标的滑动(用法如下
<marquee onmouseout="this.Start()" onmouseover="this.Stop(_)">文本内容</marquee>
作用:前面一个来设置鼠标移出该区域时继续滚动,后者设置鼠标移入该区域时停止滚动
HTML学习笔记 day two的更多相关文章
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- 2014年暑假c#学习笔记目录
2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
- JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...
- seaJs学习笔记2 – seaJs组建库的使用
原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML学习笔记
HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...
- DirectX Graphics Infrastructure(DXGI):最佳范例 学习笔记
今天要学习的这篇文章写的算是比较早的了,大概在DX11时代就写好了,当时龙书11版看得很潦草,并没有注意这篇文章,现在看12,觉得是跳不过去的一篇文章,地址如下: https://msdn.micro ...
- ucos实时操作系统学习笔记——任务间通信(消息)
ucos另一种任务间通信的机制是消息(mbox),个人感觉是它是queue中只有一个信息的特殊情况,从代码中可以很清楚的看到,因为之前有关于queue的学习笔记,所以一并讲一下mbox.为什么有了qu ...
随机推荐
- 【翻译】将Ext JS Grid转换为Excel表格
原文:Converting an Ext 5 Grid to Excel Spreadsheet 稍微迟来的礼物--Ext JS Grid转为Excel代码,现在支持Ext JS 5! 功能包括: - ...
- Java进阶(二十七)使用Dom4j解析XML文件
使用Dom4j解析XML文件 写在前面的话 由于论文实验要求,需要实现操作XML文档,为此想到了dom4j这个工具,使用之后深感受益.在此分享给大家,以此共勉. 注:本文转载自http://blog. ...
- 手把手带你做一个超炫酷loading成功动画view Android自定义view
写在前面: 本篇可能是手把手自定义view系列最后一篇了,实际上我也是一周前才开始真正接触自定义view,通过这一周的练习,基本上已经熟练自定义view,能够应对一般的view需要,那么就以本篇来结尾 ...
- UE4 Hello World 创建第一个UE4工程
首先先熟悉几个UE4常用的类 AGameMode(控制整个项目的逻辑) The GameMode defines the game being played. It governs thegame r ...
- 《java入门第一季》之面向对象面试题
1:方法重写和方法重载的区别?方法重载能改变返回值类型吗? 方法重写: 在子类中,出现和父类中一模一样的方法声明的现象. 方法重载: 同一个类中,出现的方法名相同,参数列表不同的现象. 方法重载能改变 ...
- ViewPager切换动画PageTransformer的使用
Android从3.0开始添加了属性动画后,诸多难以实现的动画都可以轻松解决了,v4包下的ViewPager控件当然也不例外,相对于非常平庸的默认切换动画,Google官方给我们展示了两个动画例子:D ...
- adb shell后出现error解决方案
解决办法: 解决办法: 1.adb kill-server 2.adb start-server 3.adb remount 4.adb shell 一般情况下都可以在此启动adb相关
- 加载SpriteBuilder中的scene为何不能带后缀
我们在Xcode中切换SpriteBuilder中的scene时,一般使用的是如下代码: -(void)exitButtonPressed:(CCControl*)sender{ CCLOG(@&qu ...
- Xcode两种调试小技巧
1."全局"断点 正常情况下如果代码有错误,会直接触发SIGXXXX信号,然后中断在main函数里. 但是我们还是不知道到底是什么引发了异常信号.我们可以在断点导航器中添加一个全局 ...
- 安卓TV开发(九) Android模拟事件 遥控器变身成鼠标来操作TV
本文出处:http://blog.csdn.net/sk719887916/article/details/40348853,作者:skay 阅读此文建议先阅读 安卓Tv开发(二)移动智能电 ...