一：

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/>

	&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 list

		dt: 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, td

		table

		   tr

		     td

		tr: 代表 行,写一个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)的更多相关文章

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

    结上一篇(1)http://blog.csdn.net/qq_32059827/article/details/51399288 6.超链接(重要): 超链接标签 就是 a 标签 <!-- 超链 ...

  2. 嵌入式OS入门笔记-以RTX为案例：六.RTX的任务调度

    嵌入式OS入门笔记-以RTX为案例:六.RTX的任务调度 上一篇笔记介绍了一些绕开排程器(或调度程序,scheduler)来进行时间管理的一些小方法.这一篇详细介绍RTX的任务调度原理. RTX主要有 ...

  3. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  4. MySQL入门笔记

    MySQL入门笔记 版本选择: 5.x.20 以上版本比较稳定 一．MySQL的三种安装方式: 安装MySQL的方式常见的有三种: ·          rpm包形式 ·          通用二进制 ...

  5. golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web

    micro web micro 功能非常强大,本文将详细阐述micro web 命令行的功能 阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go- ...

  6. Ruby小白入门笔记之 <Gemfile 文件>

    因为初学Ruby,四处查资料无果,才来的贴出亲自试过的操作,覆盖整个个人入门笔记博客中,故所有的操作,都以最明了的方式阐述,当你创建完一个新的Rails应用后,你发现JAVA中我们可以编写maven聚 ...

  7. Blazor入门笔记（6）-组件间通信

    1.环境 VS2019 16.5.1.NET Core SDK 3.1.200Blazor WebAssembly Templates 3.2.0-preview2.20160.5 2.简介 在使用B ...

  8. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  9. ES6入门笔记

    ES6入门笔记 02 Let&Const.md 增加了块级作用域. 常量 避免了变量提升 03 变量的解构赋值.md var [a, b, c] = [1, 2, 3]; var [[a,d] ...

随机推荐

  1. 条件语句，while循环语句：完整的温度转换程序

    while True: a = int(input('摄氏温度换为华氏温度请按 1\n华氏温度转为摄氏温度请按 2\n退出请按 3\n')) if a==1: c = float(input('请输入 ...

  2. Vue国际化处理 vue-i18n 以及项目自动切换中英文

    1. 环境搭建 命令进入项目目录,执行以下命令安装vue 国际化插件vue-i18n npm install vue-i18n --save 2. 项目增加国际化翻译文件 在项目的src下添加lang ...

  3. 论文答辩ppt要怎么写

    1.总体原则: 字大.字少.图多.要有重点 字体建议:正文要用黑体(如微软雅黑),标题可使用宋体或者黑体(如微软雅黑) 2. 主要分为两大部分: 2.1系统介绍 系统概述:概述自己系统主要是做了些什么 ...

  4. 在查询语句中使用 NOLOCK 和 READPAST

    对于非银行等严格要求事务的行业,搜索记录中出现或者不出现某条记录,都是在可容忍范围内,所以碰到死锁,应该首先考虑,我们业务逻辑是否能容忍出现或者不出现某些记录,而不是寻求对双方都加锁条件下如何解锁的问 ...

  5. webpack 命令行 传入自定义变量

    https://github.com/webpack/webpack/issues/2254 --env 变量 Yes this is intended. Custom argumens can be ...

  6. 如何找出Xcode中不同版本Swift的路径

    我们知道Xcode中可能包含不知一个Swift的版本,那么我们如何找到它们对应的路径呢? 熟悉unix shell命令的童鞋都知道有一个find指令,在我们已知Xcode路径时,我们可以在其中找到Sw ...

  7. SuperVideo，一款直播，点播，投屏并有的app

    应用名称:SuperVideo应用简介: 1.聚合海量视频,视频源来源于搜狐,乐视,优酷, 腾讯等主流视频网站的丰富视频内容,最新院线大片,热播剧随时看 2.基于百度云解码,享受云解码支持RMVB,M ...

  8. Retrofit2.0+RxJava+Dragger2实现不一样的Android网络架构搭建

    Tamic :csdn http://blog.csdn.net/sk719887916 众所周知,手机APP的核心就在于调用后台接口,展示相关信息,方便我们在手机上就能和外界交互.所以APP中网络框 ...

  9. EJB_开发消息驱动bean

    开发消息驱动bean Java消息服务(Java MessageService) Java 消息服务(Java Message Service,简称 JMS)是用于访问企业消息系统的开发商中立的API ...

  10. python 如何优雅地退出子进程

    python 如何优雅地退出子进程 主进程产生子进程,子进程进入永久循环模式.当主进程要求子进程退出时,如何能安全地退出子进程呢? 参考一些代码,我写了这个例子.运行之后,用kill pid试试.pi ...