一：

html标签&html书写规则

Html 的标签分为如下这两种 :

单标签: 单标签一般用于特殊的含义, 例如 : 表示换行, <hr/> 水平线

双标签: 双标签一般用来封装数据 , 展示特定的样式 , 例如 : 欢迎学习HTML

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 标签 : 双标签

<!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/>&reg;   己注册&copy;   版权™  商标 半方大的空白 全方大的空白 </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 trtdtr: 代表 行,写一个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

HTML入门笔记案例展示(1)相关推荐

Python数据分析入门笔记9——数据预处理案例综合练习（男篮女篮运动员）
系列文章目录 Python数据分析入门笔记1--学习前的准备 Python数据分析入门笔记2--pandas数据读取 Python数据分析入门笔记3--数据预处理之缺失值 Python数据分析入门笔记 ...
嵌入式OS入门笔记-以RTX为案例：四.简单的时间管理
嵌入式OS入门笔记-以RTX为案例:四.简单的时间管理上一节简单记录了进程task.有了进程以后,我们需要关心怎么样分配CPU资源(或者运行时间)给每个进程.那么就要引入排程(scheduling) ...
嵌入式OS入门笔记-以RTX为案例：三.初探进程
嵌入式OS入门笔记-以RTX为案例:三.初探进程 1.理论进程,英文称呼很多Process, Task 等等,一般通用操作系统称Process的比较多,各种称呼涵义稍微有不一样.一般而言,进 ...
嵌入式OS入门笔记-以RTX为案例：二.快速移植到RTX
嵌入式OS入门笔记-以RTX为案例:二.快速移植到RTX 本篇笔记将简单介绍RTX,包括基本架构,如何在Keil中配置.需要安装ARM-MDK和一块硬件板,笔记以STM32F4Discovery为例子 ...
嵌入式OS入门笔记-以RTX为案例：一.简介
嵌入式OS入门笔记-以RTX为案例:一.简介最近在做OS相关的项目,一方面涉及到大量(通用)操作系统的概念和理解,另一方面要深入到一个小实时操作系统的源代码中,并在此操作系统上开发应用.虽然说内容上 ...
Python数据分析入门笔记10——简单案例练习（学生信息分析）
系列文章目录 Python数据分析入门笔记1--学习前的准备 Python数据分析入门笔记2--pandas数据读取 Python数据分析入门笔记3--数据预处理之缺失值 Python数据分析入门笔记 ...
Python数据分析入门笔记6——数据清理案例练习
系列文章目录 Python数据分析入门笔记1--学习前的准备 Python数据分析入门笔记2--pandas数据读取 Python数据分析入门笔记3--数据预处理之缺失值 Python数据分析入门笔记 ...
尚硅谷大数据技术Spark教程-笔记09【SparkStreaming（概念、入门、DStream入门、案例实操、总结）】
尚硅谷大数据技术-教程-学习路线-笔记汇总表[课程资料下载] 视频地址:尚硅谷大数据Spark教程从入门到精通_哔哩哔哩_bilibili 尚硅谷大数据技术Spark教程-笔记01[SparkCore ...
【Unity VFX】VFX特效入门笔记-火花制作
[Unity VFX]VFX特效入门笔记目录: 一.布局初识二.制作-环节-思路-概述三.具体实现步骤四.案例下载链接效果展示一.布局初识 VFX创建的初始节界面,分为 4 大块. 1.显 ...

HTML入门笔记案例展示(1)