html (hyper text markup language)超文本标记语言
历史还是很重要的:十多年前电脑还没怎么普及,一帮科学家觉得互相查看资料的时候文字的排版太挫了,所以其中的一个科学家提出了一个想法,用标签来约定文字的排版,什么意思?比如<title>我是标题</title>,浏览器先生在看到<title>这个标签的时候就知道"哦,里面的东西是标题,得把它放到浏览器的标签栏上去",所以可以说学html就是在学标签。
你的第一个html网页:让浏览器显示出Hello World!
准备工作:一个记事本
一个最基本的html网页包含了几个最基本的标签,它们是:
<html>告诉浏览器我是一个html网页,写在开头和结尾
<head>用于放一些预加载的信息,比如css样式,js代码,缓存信息等
<meta>放一些网页的特征信息,比如关键词,描述,编码格式等
<body>正文信息
下面这几个标签就可以让浏览器显示出Hello World!(在记事本中输入这些标签,然后保存,将扩展名改为html,再打开)
----------------------------------------------------
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
Hello World!
</body>
</html>
----------------------------------------------------
Tip1:<meta>标签之所以说它是必须的是因为如果没有编码格式,那么在很多情况下浏览器会出现乱码。
Tip2:html的标签都是成对出现的比如<html></html>,但并非所有标签都是严格的,比如<br>换行标签就可以不闭合,但刚开始最好都写成闭合的。
好了,刚刚牛刀小试了一下有没有成就感,可不要骄傲,除非你幼儿园刚毕业。
几个最基本的标签能干什么事?所以在那位有爱科学家的不断完善之下,html的标签逐渐丰富了起来,预警:一大拨标签砸袭来!
<HTML> | ● | 文件声明 | 让浏览器知道这是 HTML 文件 | |
<HEAD> | ● | 开头 | 提供文件整体资讯 | |
<TITLE> | ● | 标题 | 定义文件标题,将显示于浏览顶端 | |
<BODY> | ● | 本文 | 设计文件格式及内文所在 | |
排版标记 | ||||
<!--注解--> | ○ | 说明标记 | 为文件加上说明,但不被显示 | |
<P> | ○ | 段落标记 | 为字、画、表格等之间留一空白行 | |
<BR> | ○ | 换行标记 | 令字、画、表格等显示于下一行 | |
<HR> | ○ | 水平线 | 插入一条水平线 | |
<CENTER> | ● | 居中 | 令字、画、表格等显示于中间 | 反对 |
<PRE> | ● | 预设格式 | 令文件按照原始码的排列方式显示 | |
<DIV> | ● | 区隔标记 | 设定字、画、表格等的摆放位置 | |
<NOBR> | ● | 不折行 | 令文字不因太长而绕行 | |
<WBR> | ● | 建议折行 | 预设折行部位 | |
字体标记 | ||||
<STRONG> | ● | 加重语气 | 产生字体加粗 Bold 的效果 | |
<B> | ● | 粗体标记 | 产生字体加粗的效果 | |
<EM> | ● | 强调标记 | 字体出现斜体效果 | |
<I> | ● | 斜体标记 | 字体出现斜体效果 | |
<TT> | ● | 打字字体 | Courier字体,字母宽度相同 | |
<U> | ● | 加上底线 | 加上底线 | 反对 |
<H1> | ● | 一级标题标记 | 变粗变大加宽,程度与级数反比 | |
<H2> | ● | 二级标题标记 | 将字体变粗变大加宽 | |
<H3> | ● | 三级标题标记 | 将字体变粗变大加宽 | |
<H4> | ● | 四级标题标记 | 将字体变粗变大加宽 | |
<H5> | ● | 五级标题标记 | 将字体变粗变大加宽 | |
<H6> | ● | 六级标题标记 | 将字体变粗变大加宽 | |
<FONT> | ● | 字形标记 | 设定字形、大小、颜色 | 反对 |
<BASEFONT> | ○ | 基准字形标记 | 设定所有字形、大小、颜色 | 反对 |
<BIG> | ● | 字体加大 | 令字体稍为加大 | |
<SMALL> | ● | 字体缩细 | 令字体稍为缩细 | |
<STRIKE> | ● | 画线删除 | 为字体加一删除线 | 反对 |
<CODE> | ● | 程式码 | 字体稍为加宽如<TT> | |
<KBD> | ● | 键盘字 | 字体稍为加宽,单一空白 | |
<SAMP> | ● | 范例 | 字体稍为加宽如<TT> | |
<VAR> | ● | 变数 | 斜体效果 | |
<CITE> | ● | 传记引述 | 斜体效果 | |
<BLOCKQUOTE> | ● | 引述文字区块 | 缩排字体 | |
<DFN> | ● | 述语定义 | 斜体效果 | |
<ADDRESS> | ● | 地址标记 | 斜体效果 | |
<SUB> | ● | 下标字 | 指数 | |
<SUP> | ● | 下标字 | 下标字 | |
清单标记 | ||||
<OL> | ● | 顺序清单 | 清单项目将以数字、字母顺序排列 | |
<UL> | ● | 无序清单 | 清单项目将以圆点排列 | |
<LI> | ○ | 清单项目 | 每一标记标示一项清单项目 | |
<MENU> | ● | 选单清单 | 清单项目将以圆点排列,如<UL> | 反对 |
<DIR> | ● | 目录清单 | 清单项目将以圆点排列,如<UL> | 反对 |
<DL> | ● | 定义清单 | 清单分两层出现 | |
<DT> | ○ | 定义条目 | 标示该项定义的标题 | |
<DD> | ○ | 定义内容 | 标示定义内容 | |
表格标记 | ||||
<TABLE> | ● | 表格标记 | 设定该表格的各项参数 | |
<CAPTION> | ● | 表格标题 | 做成一打通列以填入表格标题 | |
<TR> | ● | 表格列 | 设定该表格的列 | |
<TD> | ● | 表格栏 | 设定该表格的栏 | |
<TH> | ● | 表格标头 | 相等于<TD>,但其内之字体会变粗 | |
表单标记 | ||||
<FORM> | ● | 表单标记 | 决定单一表单的运作模式 | |
<TEXTAREA> | ● | 文字区块 | 提供文字方盒以输入较大量文字 | |
<INPUT> | ○ | 输入标记 | 决定输入形式 | |
<SELECT> | ● | 选择标记 | 建立 pop-up 卷动清单 | |
<OPTION> | ○ | 选项 | 每一标记标示一个选项 | |
图形标记 | ||||
<IMG> | ○ | 图形标记 | 用以插入图形及设定图形属性 | |
连结标记 | ||||
<A> | ● | 连结标记 | 加入连结 | |
<BASE> | ○ | 基准标记 | 可将相对 URL 转绝对及指定连结目标 | |
框架标记 | ||||
<FRAMESET> | ● | 框架设定 | 设定框架 | |
<FRAME> | ○ | 框窗设定 | 设定框窗 | |
<IFRAME> | ○ | 页内框架 | 于网页中间插入框架 | IE |
<NOFRAMES> | ● | 不支援框架 | 设定当浏览器不支援框架时的提示 | |
影像地图 | ||||
<MAP> | ● | 影像地图名称 | 设定影像地图名称 | |
<AREA> | ○ | 连结区域 | 设定各连结区域 | |
多媒体 | ||||
<BGSOUND> | ○ | 背景声音 | 于背景播放声音或音乐 | IE |
<EMBED> | ○ | 多媒体 | 加入声音、音乐或影像 | |
其他标记 | ||||
<MARQUEE> | ● | 走动文字 | 令文字左右走动 | IE |
<BLINK> | ● | 闪烁文字 | 闪烁文字 | NC |
<ISINDEX> | ○ | 页内寻找器 | 可输入关键字寻找于该一页 | 反对 |
<META> | ○ | 开头定义 | 让浏览器知道这是 HTML 文件 | |
<LINK> | ○ | 关系定义 | 定义该文件与其他 URL 的关系 | |
StyleSheet | ||||
<STYLE> | ● | 样式表 | 控制网页版面 | |
<span> | ● | 自订标记 | 独立使用或与样式表同用 |
注:
- ● 表示该标记属围堵标记,即需要关闭标记如 </标记>。
- ○ 表示该标记属空标记,即不需要关闭标记。
- IE 表示该标记只适用于 Internet Explorer。
- NC 表示该标记只适用于 Netscape Communicator。
- 反对 表示该标记不为 W3C 所赞同,通常这标记是 IE 或 NC 自订,且己为众所支 持,只是 HTML 标准中有其它同功能或更好的选择。
- 弃用 表示该标记己为 W3C 所弃用,是过时的标记,但 HTML 具向下兼容的特 性,不用担心新浏览器不支援旧标记。
- 新 表示该标记是 HTML 4.0 中新增的。
突然看到这么多表格是不是有点蒙比,别担心,咱慢慢来,上面这张表有点旧了,凡是有IE,NC,反对,弃用注释的,大家都可以略过不看了,为什么?因为老旧的就应该灭亡!
好了,你是不是在准备等我一个标签一个标签的解说呢?或许我闲得蛋疼的时候会这么做,在这之前,你只需要好好看一下别人整理好的解说,然后一个个的练习就好了
w3cschool:http://www.w3school.com.cn/html/
html帮助文档:http://yunpan.cn/cdAIiM4MdI9NA 访问密码 75e7
TIP:说两个有用的特殊字符
空格的效果
" 引号
-----------------------------------------------------------
更新:
我本人的邮箱ymczxy@126.com,有我会的问题可以直接问我,做好的网页也可以发给我,要是人多的话,我可以弄个网站专门放作品,别怕挫,这是NX人生的开始。