常用属性:

Width=宽度

Height=高度

Size=大小

Color=颜色

Align=布局方向,值包括(top,bottom,left,right,center)上,下,左,右,中。

Border=边框大小

Title=提示文字

Href=连接路径

Src=资源路径

Bgcolor=背景颜色



常用标签: 

1. <br> 换行标签  

2. <p>  段落标签  

3. <b>粗体显示</b>  

4. <i>斜体显示</i>  

5. <u>删除线</u>  

6. 超连接标签,href=连接地址,Target=是否新建页面打开,title=提示文字 

7. 滚动标签,scrollamount=滚动速度,align=滚动方向,值包括(top,bottom,left,right,)上下左右 

例:<marquee scrollamount="20" align="left">公告通知:开始正式运营</marquee>  

8. 水平线标签,size=线条粗细,color=线条颜色,width=100%:表示浏览器满屏显

示,100px:表示浏览器100个像素显示 

例:<hr size="1" color="red"  width="100%"/>  

<!-- 提示:以下重复的属性不在一一做解释,属性说明见文档顶部 -->  

9. body标签有且只能有一对,此标签属性一改,整个页面都会改变.bgcolor=背景颜

色,background=背景图片 

例:<body bgcolor="#990000" background="123.jpg">  

10. 表格标签,以下表格为三行三列,table表格标签,tr行标签,td列标签,这些标签都是成对出现的,有开始就必须有结束.border=表格边框大小,cellspacing=表格间距大小,cellpadding=表格填充大小

例:<table width="300" border="1" cellspacing="0" cellpadding="0">

    <tr> 

    <td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

    </tr>

    <tr> 

    <td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

    </tr>

    <tr> 

    <td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

    </tr>

</table>  

11. 表格跨行跨列,此例依旧是三行三列:

第一行的第1列跟第2列合并,colspan=2为跨2列;

第二行第3列跟第三行第3列合并,rowspan=2为向下跨2行;

例:<table width="300" border="1" cellspacing="0" cellpadding="1">

<tr> 

<!--这里的colspan就是向右跨列-->

<td colspan="2">&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr> 

<td>&nbsp;</td> 

<td>&nbsp;</td> 

<!--这里的rowspan就是向下跨行-->

<td rowspan="2">&nbsp;</td>

</tr>

<tr> 

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

</table>  

12. 字体标签,size=字体大小,color=字体颜色

例:<font size="+2" color="#990000">红色5号字体</font> 

 

13. CSS样式,以下代码就是一个定义样式的模版,<style type="text/css">但凡定义的样式都要写在这对标签里面才会生效,而style标签必须在<head>标签里面写。这里定义的Td样式前面是没有加点的,这表示网页内所有td标签都会用此样式, 而且不需要经过class调用.这里自定义了Cs1,注意前面是加点的,那么说明这个样式必须用class调用

例:<style type="text/css"> 

<!--border为边框样式,自带三个属性,颜色、线性、粗细大小--> Td{ border:#0000FF solid 1px;} 

<!--这个样式是针对字体的,跟前面font差不多--> 

.Cs1{ font-size:14px; font-family:"宋体"; color:#FF0000} </srtpe>  

<!--这里我们对字体调用了Cs1样式--> 

<span class="Cs1">学习编程,美好未来</span> 

<!--这是一行一列的表格,此处没有对class调用样式,但是效果却跟上面Td定义的一样,这说明Td样式前面没有加点,网页凡是<td>的标签将自动引用该样式--> <table> <tr> 

<td>123456</td> </tr> </table>  

14. 内嵌样式定义,简单的样式我们可以通过标签内style属性定义,效果跟13例子一样 例:<span style=" color:#990000; font-size=:18px">红色18号字体</span>  

15. 图片,src=图片路径,width=图片宽度,height=图片高度,高宽不写为默认大小 <!--这里的src为本地电脑image文件下的text.jpg图片--> 

例1:<img src="data:image/text.jpg" width="120" height="80" /> <!--这里的src为网络图片路径-->

HTML初级入门内容的更多相关文章

  1. 响应式Web初级入门

    本文来自我的前端博客,原文地址:http://www.hacke2.cn/about-responsive/ 跨终端时代的到来 当你乘坐各种交通工具(公交.地铁.轻轨.火车)时你会发现,人们都个个低下 ...

  2. Sping AOP初级——入门及简单应用

    在上一篇<关于日志打印的几点建议以及非最佳实践>的末尾提到了日志打印更为高级的一种方式——利用Spring AOP.在打印日志时,通常都会在业务逻辑代码中插入日志打印的语句,这实际上是和业 ...

  3. Spring AOP初级——入门及简单应用

      在上一篇<关于日志打印的几点建议以及非最佳实践>的末尾提到了日志打印更为高级的一种方式——利用Spring AOP.在打印日志时,通常都会在业务逻辑代码中插入日志打印的语句,这实际上是 ...

  4. hadoop入门手册5:Hadoop【2.7.1】初级入门之命令:文件系统shell2

    问题导读 1.改变hdfs文件的权限,需要修改哪个配置文件?2.获取一个文件的或则目录的权限,哪个命令可以实现?3.哪个命令可以实现设置访问控制列表(ACL)的文件和目录? 接上篇:Hadoop[2. ...

  5. hadoop入门手册4:Hadoop【2.7.1】初级入门之命令:文件系统shell1

    问题导读1.Hadoop文件系统shell与Linux shell有哪些相似之处?2.如何改变文件所属组?3.如何改变hdfs的文件权限?4.如何查找hdfs文件,并且不区分大小写? 概述文件系统 ( ...

  6. hadoop入门手册3:Hadoop【2.7.1】初级入门之命令指南

    问题导读1.hadoop daemonlog管理员命令的作用是什么?2.hadoop如何运行一个类,如何运行一个jar包?3.hadoop archive的作用是什么? 概述 hadoop命令被bin ...

  7. Spring Cloud实战之初级入门(四)— 利用Hystrix实现服务熔断与服务监控

    目录 1.环境介绍 2.服务监控 2.1 加入依赖 2.2 修改配置文件 2.3 修改启动文件 2.4 监控服务 2.5 小结 3. 利用hystrix实现消费服务熔断 3.1 加入服务熔断 3.2 ...

  8. SpringCloud实战之初级入门(三)— spring cloud config搭建git配置中心

    目录 1.环境介绍 2.配置中心 2.1 创建工程 2.2 修改配置文件 2.3 在github中加入配置文件 2.3 修改启动文件 3. 访问配置中心 1.环境介绍 上一篇文章中,我们介绍了如何利用 ...

  9. mui初级入门教程(六)— 模板页面实现原理及多端适配指南

    文章来源:小青年原创发布时间:2016-07-26关键词:mui,webview,template,os,多端适配转载需标注本文原始地址: http://zhaomenghuan.github.io. ...

随机推荐

  1. C#自定义工业控件开发

    由于工作需要,调研过一段时间的工业控制方面的“组态软件”(SCADA)的开发,组态软件常用于自动化工业控制领域,其中包括实时数据采集.数据储存.设备控制和数据展现等功能.其中工控组件的界面展现的实现类 ...

  2. POJ 3294 Life Forms 后缀数组+二分 求至少k个字符串中包含的最长子串

    Life Forms   Description You may have wondered why most extraterrestrial life forms resemble humans, ...

  3. [工作中的设计模式]迭代子模式Iterator

    一.模式解析 迭代子模式又叫游标(Cursor)模式,是对象的行为模式.迭代子模式可以顺序地访问一个聚集中的元素而不必暴露聚集的内部表象 1.迭代子模式一般用于对集合框架的访问,常用的集合框架为lis ...

  4. 【MongoDB初识】-增删改

    1.切换数据库 admin数据库:use admin test数据库:use test 2.新增: 方法一(首选) c} db.class.save(c) 或者db.class.insert(c) 方 ...

  5. BZOJ2087 : [Poi2010]Sheep

    一条边能连上当且仅当它没有经过任何点,并且两边的点都是偶数个. 枚举原点,通过极角排序求出哪些边是合法的,然后区间DP即可. 时间复杂度$O(nm\log m+n^3)$. #include<c ...

  6. 【NOI2016】优秀的拆分 题解(95分)

    题目大意: 求一个字符串中形如AABB的子串个数. 思路: 用哈希做到O(1)判断字符串是否相同,O($n^2$)预处理,ans[i]为开头位置为i的形如AA的子串个数.再用O($n^2$)枚举出AA ...

  7. PHP两个文件的相对路径

    /** * relativePath 计算两个文件的相对路径 * @param file1 参作为考路径 * @param file2 相对于$file1的路径 */ function relativ ...

  8. android开发中fragment获取context

    在用到fragment时无法使用.this来指定当前context内容,android开发中fragment获取context,可以使用getActivity().getApplicationCont ...

  9. gitlab 创建SSH Keys 报500错

    gitlab 创建SSH Keys 报500错 看了一下日志 root@322323:/home/git/gitlab/log# cat production.log Errno::ENOMEM (C ...

  10. ZeroMQ接口函数之 :zmq_curve – 安全的认证方式和保密方式

    ZeroMQ 官方地址 :http://api.zeromq.org/4-0:zmq_curve zmq_curve(7) ØMQ Manual - ØMQ/4.1.0 Name zmq_curve  ...