HTML入门笔记案例展示(1)
来源:互联网 发布:淘宝达人报名入口 编辑:程序博客网 时间:2024/05/29 00:31
一:
html标签&html书写规则
Html 的标签 分为如下 这两种 :
单标签: 单标签一般 用于特殊的含义, 例如 : <br/> 表示换行, <hr/> 水平线
双标签: 双标签一般用来 封装数据 , 展示特定的样式 , 例如 : <font>欢迎学习HTML</font>
l 标签的书写规则
在html 中 不管是单标签还是双标签, 都必须要 正确 关闭,
对于任何一个 html页面来说 , 都会有 一个 固定的 内容 :
Html 必须是以 html 做为 根标签, 然后 下面有 head 和 body 标签, 一般 head中 去写 标签 title 标签以及 meta 标签, 其中title 设置
Html页面的 标题内容. Meta 用于指定 html页面的 特定的属性信息.
扩展名: .html, .htm
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="refresh" content="5"><title>这是我的第一个html实例</title></head><body><font color="red" size="20">亲, 你 </font>今天 duang 了 吗 ?<br /><font color="black" size="20">亲, 欢迎学习html技术 </font><font color="blue" size="30">我是杨道龙,你好吗?</font><br /> xxx<!-- html 中的注释 --><!-- ctrl+shift + / : 注释 ctrl+shift + \ : 撤销注释 ctrl+z : 快速 反悔 --><!-- 李开复的撒娇路口附近的萨拉开发进度上来看 --></body></html>
二:
html中的常用标签
1、字体标签
Font 标签 : 双标签
<font></font>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body><!-- font 标签中 常用到的属性 :face: 设置 字形 size: 大写 , 默认大小是 3, 设置 5 表示 比3 大两个字号 , 还可以 设置 +2, 与 直接设置 5 是同一个效果color: 颜色值 , red , 还可以写 #十六进制的值 red, purple, gray, #rgb : #000000 --><font color="#FFFF00">xxxx</font><font color="#808000">yyyy</font><hr/>® 己注册© 版权™ 商标 半方大的空白 全方大的空白 </body></html>
2、html特殊字符
例如, 你现在有这种需求, 你就要在 页面 上 使用标签的时候 显示 一个 < > , 转义
3、列表标签:
就是清单标签 .
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>清单标签</title></head><body><!-- 有序清单 type用于 指定 序号的 样式 , 有5 种值 :1, a,A, i, I start 用于指定 从几开始, 就是阿拉伯数字 --><ol type="1" start="3"><li>小丽</li><li>小明</li><li>敏敏</li><li>二球</li><li>二蛋</li><li>二万</li><li>二货</li><li>二狗</li></ol><hr/><!-- 无序 清单 即没有序号排序,这是与ol有序清单的主要区别。使用 ul 声明是无序清单, li 表示 清单中 每一项type用于 设置清单项的显示样式, 有三种值disc: 实心圆circle: 空心圆square: 方块 --><ul type="circle"><li>java</li><li>javascript</li><li>c</li><li>c++</li><li>php</li><li>c#</li><li>o-c</li><li>python</li><li>luna</li><li>shell</li></ul><hr/><!-- 自定义 清单 :dl --- defined listdt: defined title ---- 用于 写 标题 dd: defiled document --用于写文档内容 --></body></html>
5、表格标签(重要)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body><!-- 表格 标签的使用 :table: 用于放置 tr, tdtable tr tdtr: 代表 行,写一个tr就代表一行td: 代表列 tr 中 每写 一个td 就表示 一个 列 ctrl+m ---- 全屏 给table 标签 添加 属性 :cellspacing:定义单元格内容(内容一般是内表格)与单元格边框之间的距离。单元格里面其实还是表格,这里代表内部表格与外表格边框的距离。cellpadding:单元格内文字与边框的间距。这时候的边框是内表格的边框。border:用于指定 表框的 大小。图片或者图表的边框厚度background="3.jpg"设置背景图片tr:td: colspan="5" ----- >> 指定 占用的 列 该一储存格向右打通的栏数。 rowspan="4" ----- >> 指定占用的行 该一储存格向下打通的列数。 --> <!-- 在<table border="2" width="50%" align="center" cellspacing="5" cellpadding="10">里面的algin的center属性是表总体位于浏览器的中间位置 --> <!-- width="50%,表示表格始终都占浏览器页面屏幕的50% --><table border="2" width="50%" align="center" cellspacing="5" cellpadding="10" background="3.jpg"> <tr align="center"><!-- 设置第一行的内容文字为居中 --> <td>1第一列</td> <td>1第二列</td> <td>1第三列</td> </tr> <tr align="right"> <td>2第一列</td> <td>2第二列</td> <td>2第三列</td> </tr> <tr> <td>3第一列</td> <td>3第二列</td> <td>3第三列</td> </tr> <tr> <td>4第一列</td> <td>4第二列</td> <td>4第三列</td> </tr> </table> <hr/> <!-- 实现 跨行跨列的 表格 都是在 td 里使用 colspan : 占 用的行 rowspan: 占用的列 colspan="2"---------》》 占用 2 列 rowspan="2"---------》》 占用 2行 在表格 中 , 有时候, 写 表格所占用的 宽度的 时候, 不会写 绝对的值 多宽 width="60%" ---》》 表示 表格的 宽度 为《相对值》, 随着表格的 宽度 变化而变化, 占用 整个 页面 宽度的 60% --> <table border="10" align="center" width="60%"> <tr align="center"> <td colspan="2">1第一列</td> <td>1第二列</td> </tr> <tr> <td rowspan="2">2第一列</td> <td>2第二列</td> <td>2第三列</td> </tr> <tr> <td>3第一列</td> <td>3第二列</td> </tr> <tr align="center"> <td>4第一列</td> <td>4第二列</td> <td>4第三列</td> </tr> </table> </body></html>
入门笔记(2)见下一篇:http://blog.csdn.net/qq_32059827/article/details/51399344
1 0
- HTML入门笔记案例展示(1)
- HTML入门笔记案例展示(2)
- 搬运自己的html学习笔记1-常用信息展示
- HTML入门学习笔记--认识HTML(1)
- HTML入门笔记1-HTML介绍
- 案例展示
- Mybatis学习笔记-入门案例
- JSON入门学习案例笔记
- Java学习笔记--入门案例
- HTML入门学习笔记--体验CSS(1)
- html-css案例1
- html-js案例1
- HTML入门笔记
- HTML入门笔记
- HTML入门笔记
- HTML入门笔记
- html 入门笔记
- HTML入门学习笔记
- django model的get和filter方法的区别
- 学习篇---自定义ZoomImageView
- 谈情--读《白马啸西风》有感
- POJ——4565So Easy!(矩阵快速幂)
- ViewConfiguration.getScaledTouchSlop () 用法
- HTML入门笔记案例展示(1)
- 使用并查集判断无向图是否连通
- 使用VS2010自定义C++模板
- Idea的插件
- 初探RxJava
- Qt(三)--- 实现QQ登陆界面头像状态栏的功能
- 算法笔记——【动态规划】最大子段和问题
- 多线程下载
- 2016百度之星热身赛 1003