一.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. 配置jsp开发环境

    一.安装jdk(http://pan.baidu.com/s/1sjk9a2p) 二.配置java环境变量 安装好后,配置环境变量:计算机——右击——属性——高级系统设置设置——环境变量 系统变量(没 ...

  2. [转] ubuntu开启SSH服务

    点击阅读原文 SSH分客户端openssh-client和openssh-server如果你只是想登陆别的机器的SSH只需要安装openssh-client(ubuntu有默认安装,如果没有则sudo ...

  3. [转] 关于ubuntu的sources.list总结

    点击阅读原文 一.作用 文件/etc/apt/sources.list是一个普通可编辑的文本文件,保存了ubuntu软件更新的源服务器的地址.和sources.list功能一样的是/etc/apt/s ...

  4. 五、Standard Controllers

    1.standardController:标准的controller 是同页面的standard Object的界面button的功能和逻辑是一样的<apex:page standardCont ...

  5. 小梅哥FPGA数字逻辑设计教程——基于线性序列机的TLC5620型DAC驱动设计

    基于线性序列机的TLC5620型DAC驱动设计 目录 TLC5620型DAC芯片概述:    2 TLC5620型DAC芯片引脚说明:    2 TLC5620型DAC芯片详细介绍:    3 TLC ...

  6. 解决secureCRT数据库里没有找到防火墙 '无'问题

    中文版的secureCRT由于汉化的问题(把null翻译成无了),导致每次打开都会有个防火墙的错误提示:数据库里没有找到防火墙 '无' 此会话将尝试不通过防火墙进行连接.出现这个错误的原因是在secu ...

  7. Prime Query (ZOJ 3911 线段树)

    Prime Query Time Limit: 1 Second Memory Limit: 196608 KB You are given a simple task. Given a sequen ...

  8. iOS - CocoaPods 第三方开源框架管理

    1.CocoaPods CocoaPods 是一个负责管理 iOS 项目中第三方开源库的工具.CocoaPods 的项目源码在 Github 上管理.该项目开始于 2011 年 8 月 12 日,在这 ...

  9. iOS 推送通知处理

    //这是程序杀死后再通过点击通知进入时调用的方法 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOpti ...

  10. table插件实现

    选择.取消.全选.全部取消.获取行ids /** * Created by lizongqiong on 2016/1/8. */ var $ = require('jquery'); var tab ...