一.Html简介

全写： HyperText Mark-up Language 
译名： 超文本标识语言 
简释：一种为普通文件中某些字句加上标示的语言，其目的在于运用标签（tag）使文件 达到预期的显示效果。由文字（字母，数字、标点符号）及标签组合而成。任何文字编辑器都可以，这里推荐用：Dreamweaver，submit,webstrom。
  1. Html特点：

► 描述性语言，结构语言，用于决定网页内容以什么样的形式显示；

► 通过标签来控制网页的文档、字符和段落等的格式，以及对脚本语言等的调用；

► 纯文本文件，可以使用各种文本编辑器编写； (submit,webstrom是首选)

► 文件扩展名： .htm 或 .html；

► html文件必须在Web浏览器上运行；（运行环境）

► 具有跨平台性。

1. HTML语法结构：

► HTML文件是由一系列的元素和标签（tag）组成的；

► 元素：网页中的内容；

► 标签：用于规定元素的属性和它在文件中的位置；

► 格式：<元素名称 属性="值"...>元素资料</元素名称>,<元素名称 属性="值"...>

► 不区分大小写。

2. HTML文件结构：

► 起始标记：<html>　</html>　表示HTML网页的起始；

► 文件头部：<head>　</head>　设置初始化文档信息和文档管理标注；

► 文件主体：<body>　</body>　设置格式化的浏览器显示的文档（内容）；

► 注释部分：<!--　　　　-->　可以放在任何位置；

► <!　　　　　　>

※  例:
<html> 
<head> 
<title>Html简介</title> 
<meta http-equiv="Content-Type" content="text/html;charset=gb2312"> 
</head> 
<body bgcolor="#FFFFFF" text="#000000"> 
<!--网页内容--> 
</body> 
</html>

1. 成对标签 
   顾名思义，它以起始标签及终结标签将文字围住，令其达到预期显示效果。
   例如 HTML 源码 ： <b>我愿意和大家显示成：我愿意和大家一起学好html/css!大家有信心吗？</b>
其中 <b> </b> 便称为成对标签。 
它以起始标签 <b> 及结尾标签 </b> 标示文字我愿意和大家一起学好html/css!令它显示成粗体，两者失其一都会发生错误显示。

2. 单标签 
是指标签单独出现，只有起始标签没有终结标签。

※  例如 HTML 源码： 
I love my hometown. <br> It's a beautiful place. 
显示成： 
I love my hometown.
It's a beautiful place.

其中换行标签<br>便属单标签。 
它的作用便是将标签后所有东西显示于下一行，可见结尾标签对于它是没意义的， 但有些人会为空标签加上终结标签，如果加上结尾标签，对 HTML没有影响。 便于记忆。

二.文件标记

<HTML> ； <HEAD> ； <TITLE> ； <BODY>；<meta>；<base>；<link>；-文件头部标签

HTML 基本架构：

1. 以下 HTML Source Code(源代码) 便是一份 HTML 文件的基本架构 ：
<HTML> 
<HEAD> 
<title>HTML超文本标记语言在线教程</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="author" content="合肥世杰"> 
<meta name="keywords" content="html,css,asp,jsp,php">
<meta name="description" content="世杰教育网站！"> 
<meta http-equiv="refresh" content="10"> 
<meta http-equiv="refresh" content="2;url=http://www.163.com"> 
<meta http-equiv="Expires" content="01 Jan 2008 00:00:00">
<base href="http://www.sje.com.cn" target="_blank">
<link href="../css.css" rel="stylesheet" type="text/css"> 
<link rel="fontdef" src="Amelia.pfr">
</HEAD> 
<BODY> 网页的内容，很多标记都作用于此 
</BODY> 
</HTML>

2. 特点解说：

► 整个文件处于标记<HTML>与</HTML>之间。<HTML>用以声明这是HTML文件，让浏览器认出并正确处理此HTML文件。

► 文件分两部分，由<HEAD>至</HEAD>称为开头 ，<BODY>至</BODY>称主体（或者称之为正文）。 
基本上两者各有适用的标记，如<TITLE>只可出现于开头部分。

► 开头部分用以保存重要信息，而只有主体部分会被显示。所以大部分标记会运用于主体部分。

► <TITLE>所标示的是文件的标题。会出现于窗口标题及别人加入收藏时显示的名称，所以每页有不同而明确的标题是有必要的。

上述标记中只有<BODY>具有参数设定。

3. <META>标签相关属性

► 文档标题标签：<title>HTML超文本标记语言在线教程</title>

► <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

► 作者：<meta name="author" content="合肥世杰">

► 关键字：<meta name="keywords" content="html,css,asp,jsp,php">

► 描述信息：<meta name="description" content="世杰教育网站！">

► 刷新：<meta http-equiv="refresh" content="10">

► 跳转：<meta http-equiv="refresh" content="2;url=http://www.163.com">

► 文档过期：<meta http-equiv="Expires" content="01 Jan 2008 00:00:00">

► 基础地址：<base href="http://www.sje.com.cn" target="_blank"> 为当前文档提供了完整的URL

► 链接文件：<link href="../css.css" rel="stylesheet" type="text/css"> 
　　　　　 <link rel="fontdef" src="Amelia.pfr"> 
　　　　　 定义在当前文档和其它文档之间的关系

属性 描述：

href

提供被链接的文档的Internet地址。

rel

提供向前链接的类型。

rev

指明反向链接。

title

提供一个建议的标题。

type

指明连接的style sheet媒体类型。

► 页面过渡效果： 
<meta HTTP-EQUIV="page-enter" CONTENT="revealtrans(duration=5,transition=23)">

<meta HTTP-EQUIV="page-exit" CONTENT="revealtrans(duration=5,transition=23)">

n <BODY> 之参数设定：

※ 例:
<BODY text ="#000000" link ="#0000FF" alink ="#FF0000" vlink ="#0000FF" background ="bg1.gif" bgcolor ="#FFFFFF" leftmargin =2 topmargin =2 bgproperties ="fixed">

► text ="#000000" 
用以设定文字颜色。 #000000 代表黑色，亦可以采用颜色的名称，即 text=" black " 。各种颜色的值及名称可参考【调色原理】一节。

► link ="#0000FF" 
设定一般文字链接颜色。（默认为蓝色）

► alink ="#FF0000" 
设定鼠标刚按下时文字颜色。

► vlink ="#0000FF" 
设定链接访问后的颜色。（被点击过）。

► background ="bg1.gif" 
设定背景图片。GIF 或 JPEG 皆可，可以是绝对途径或相对途径。

► bgcolor ="#FFFFFF" 
设定背景颜色。当己设定背景图片时会失去作用，除非图片有透明部分。

► leftmargin =2 
设置网页的左边距，单位为像素。 『只适用于IE』

► topmargin =2 
设置网页的上边距。 『只适用于IE』

► bgproperties ="fixed" 
固定背景图片，当滚动条拖动时背景图片不会跟着滚动。 『只适用于IE』

注：标记及参数之字母大小都可以。

HTML语言剖析

字体标记-目录

<STRONG> <B>
<I> <EM> <VAR> <CITE> <DFN> <ADDRESS>
<TT> <SAMP> <CODE> <KBD> <U> <STRIKE> <BIG> <SMALL> <SUP> <SUB>
<H1> <H2> <H3> <H4> <H5> <H6>
<FONT> <BASEFONT>

n 实体标记与逻辑标记 ：

实体标记与逻辑标记的区别：

1. 实体标记有固定的显示效果，逻辑标记则依不同浏览器而不同。 
例如逻辑标记的 <EM> 由于浏览器的不同它所标示的文字不一定出现斜体效果， 它可能是加下划线、粗体或反白等，所以这一节是以它们在IE和NC中的效果作介绍。

2. 多个实体标记也可有效标示同一语句，逻辑标记则通常于旧浏览器不能有效显示多重的标示。
例如两个逻辑标记<EM>及<STRONG>同时标示一字句于旧浏览器常失去作用。

► 实体标记有： 
<I> <B> <U>

► 逻辑标记有： 
<STRONG> <EM> <VAR> <CITE> <DFN> <ADDRESS> <CODE> <KBO> <SAMP> <TT>

注：若要求真确的效果当然以实体标记为佳。

n  <STRONG> <B> ：

两者皆能产生字体加粗的效果，但必须注意的是当文件被设为 gb2312 Encoding 时，两者所标示的中文字不会于 Netscape Netvigator 显示粗体效果。

n  <I> <EM> <VAR> <CITE> <DFN> <ADDRESS>：

这些标记于 Internet Explorer 都产生斜体效果，而只
有</DFN> 于 Netscape Netvigator 失去作用。这些标记中只有 <ADDRESS>较为特别，因为它
自身具备换行效果所以不需要在它前面加上<BR>标记。

n <TT> <SAMP> <CODE> <KBD> <U> <STRIKE> <BIG> <SMALL> <SUP> <SUB>

► <TT> <SAMP> <CODE> <KBD> 可令每字母有相等宽度且每字母之间的距离稍为加宽。但于 NC 不见得如此。

► <U> 是加底线的标记，一些特别的浏览器并不支援，因顾虑到与连结混淆。

► <STRIKE> 加上删除线的标记。

► <BIG> 令字体加大。

► <SMALL> 令字体变细。

► <SUB> 为下标字， <SUP> 则为上标字，仅剩的数学标记

n <H1> <H2> <H3> <H4> <H5> <H6>：

这些是标题标记，由 <H1> 至 <H6> 变粗变大加宽的程度逐渐减小。每个标题标记所标示 的字句将独占一行且上下留一空白行。

n <FONT> <BASEFONT>：

► <BASEFONT> 可以 用于文件的开头部分，即 <HEAD> 与 </HEAD> 之间的位置，将 影响全文字句，是一个空标记，用以改变字体显示的内定值。 
<FONT> 是应用于文件的内文部分，即 <BODY> 与 </BODY> 之间的位置，只影响 所标示的字句，是一个围堵标记。

► 两标记可同时存在，唯没被 <FONT> 所标示的字句才直接受 <BASEFONT> 所影 响，而 <FONT> 本身亦受 <BASEFONT> 的影响。

<FONT>的参数设定： 
※例：
<font face ="Arial" size ="+2" color ="#008000">我把青春献给你</font>

► face ="Arial" 
设定文字的字形。Arial 是常用的一种，请不要使用 Window 内建字 形以外的字形。于没有设定为 Gb2312 Encoding 的中文网页，Netscape Netvigator 不会显示此标记 所指明的任何中文字形。

► size ="+2" 
设定文字的大小。其值可以是 绝对 或 相对 ， 
绝对的意思便是标记自己决定文字的大小，不受 <BASEFONT> 的影响，如 
size=" 5 " 表示其大小便是 5 ， 而html内定值为 3，即 size=" 3 "和没有设定是一样的。 
相对的意思便是在内定值 3 的基础上增加或减少大小级数，
如 size=" +2 " 便等同绝 对表示法的 size=" 5 "，但若已设定 <BASEFONT size=" n "> 则其
实际大小便是 n+2 不 再是 3+2 了。<BASEFONT>只有绝对表示法。

► color ="#008000" 
设定文字的颜色。 #008000 表示绿色.........

关于一些学习html和css的笔记的更多相关文章

  1. 前端学习(二）css样式笔记（笔记）

    background-image:url(img/xiaofeiji.jpg)背景图:url(图片路径):(背景图默认平铺) background-repeat:repeat-x/repeat-y/n ...

  2. css笔记 - 张鑫旭css课程笔记之 float 篇

    https://www.imooc.com/t/197450float float的设计初衷/原本作用-是为了实现文字环绕效果如,一个图片和一段文字垂直放置,给图片加上浮动,文字就环绕图片展示了. 浮 ...

  3. 我给女朋友讲编程总结建议篇，怎么学习html和css

    总共写了11篇博客了,7篇讲html的,4篇讲网络的.不敢说写的多么好吧,最起码的是我迈出了写作的第一步,写作的过程中了解了一些其他的知识,比如SEO.几种重定向等,由于个人能力和见识有限,写出来的东 ...

  4. 我们应当怎样学习HTML和CSS

    目标读者:web前端小白.大神请绕路 学习一门新技术,应当找一本经典入门书,在两三天之内快速翻阅完毕,了解其概貌. 然后再制定一个学习路线图(这个路线图绝大多数情况下非书本目录的顺序),接着遵循学习路 ...

  5. Gulp学习指南之CSS合并、压缩与MD5命名及路径替换(转载)

    本文转载自: Gulp学习指南之CSS合并.压缩与MD5命名及路径替换

  6. 9大理由告诉你为什么应该学习HTML跟CSS

    你是不是听过太多人告诉你:「人人都应该要会 coding!」都快要不耐烦了对吧? 究竟为什么身为一个行销专业者.作家.金融巨擘--,整个世界还要你学会 coding? 事实上仅仅要对 HTML.CSS ...

  7. 转:CSS选择器笔记

    作者: 阮一峰 日期: 2009年3月12日 去年我学jQuery的时候,曾经做过一点选择器(selector)的笔记. 这几天拿出来看了一下,发现很多都忘记了.所以,我决定把它们贴在这里,方便以后查 ...

  8. HTML、CSS(小笔记)

    这是我自己在学习html.css时觉得要记的东西太多总结一些较为常用的标签. HTML <p></p>段落标签 <hn></hn>标题标签n数值为1~6 ...

  9. 前端学习之路-CSS介绍，Html介绍，JavaScript介绍

    CSS介绍 学前端必备掌握CSS样式,css为层叠样式表,用来定义页面的显示效果,加强用户的体验乐趣,那么如何用css到html中呢? style属性方式 利用标签中的style属性来改变显示样式 & ...

随机推荐

  1. 解决连接VPN后无法上网问题

    解决连接VPN后无法上网问题 VPN的英文全称是“Virtual Private Network”,翻译过来就是“虚拟专用网络”.顾名思义,虚拟专用网络可以把它理解成是虚拟出来的企业内部专线. 在公司 ...

  2. phpcms V9 数据模型基类

    在学习<phpcms V9首页模板文件解析>的第七步,我们看到content_model类,文件路径:phpcms/model/content_model.class.php 从代码中,可 ...

  3. HtmlHelper的扩展

    HtmlHelper的扩展: 注意点:扩展方法必须是静态方法,所在的类必须是静态类,所在的命名空间改成System.Web.MVC则能省略页面中必须添加命名空间的约束. //主要就是输出分页的超级链接 ...

  4. Css Study - Top Menu in Header 横向间隔的菜单

    .shortcut ul li { display: inline; } CSS <style> ol, ul { list-style: none; } html, body, ul, ...

  5. Python之通过IP地址库获取IP地理信息

    利用第三方的IP地址库,各个公司可以根据自己的业务情况打造自己的IP地址采集分析系统.例如游戏公司可以采集玩家地区信息,进行有针对性的运营策略,还可能帮助分析玩家网络故障分布等等. #!/usr/bi ...

  6. 自定义分词器Analyzer

    Analyzer,或者说文本分析的过程,实质上是将输入文本转化为文本特征向量的过程.这里所说的文本特征,可以是词或者是短语.它主要包括以下四个步骤: 1.分词,将文本解析为单词或短语 2.归一化,将文 ...

  7. gfortran、g77等编译器中使用多个文件

    gfortran aaaa.f90 bbbb.f90 -o cccc (生成cccc可执行文件,cccc名称可自由设定) 又可以分成两步,因为gfortran先把程序文件编译成*.o文件,再把*.o文 ...

  8. android录像增加时间记录（源码里修改）

    需要做一个功能,录像和播放时都显示录时的时间,参考文章链接找不到了,不好意思,这里记录一下,防止下次找不到了.另一篇关于源码录像的流程请参考 http://www.verydemo.com/demo_ ...

  9. php入门

    最近公司招了几个应届毕业生,他们对前端的了解还挺多,但是对后端的技术一无所知,我觉得,作为一个前端攻城狮,如果你有远大的抱负,就应该雨露均沾... 今天我就跟大家讲一讲PHP最基本的入门,至少别人问起 ...

  10. LabVIEW有限状态机

    顺序模式是我们最先接触,也是最基本的一种编程模式, 程序按照固定的顺序依次执行,结束(如图1) 但在很多情况下,静态的顺序模式并不能满足我们编程的要求,我们需要更有效地动态结构来实时改变程序的执行顺序 ...