DIV+CSS培训（一）

最新推荐文章于 2024-07-23 14:07:14 发布

mamaly_dut

最新推荐文章于 2024-07-23 14:07:14 发布

阅读量1.4k

点赞数

分类专栏： DIV+CSS(HTML) 文章标签： css div html 浏览器 xhtml 文档

本文链接：https://blog.csdn.net/mamaly_dut/article/details/3175687

版权

DIV+CSS(HTML) 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

主题一 HTML基础知识培训

一、什么是HTML
HTML是Hypertext Markup Language的英文缩写,即超文本标记语言,是一种用来制作网页的标记语言（它不需要编译,可以直接由浏览器执行，属于浏览器解释型语言）
超文本置标语言(第一版)—在1993年6月发为互联网工程工作小组 (IETF)工作草案发布（并非标准）.
HTML 2.0—1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时
HTML 3.2—1996年1月14日，W3C推荐标准
HTML 4.0—1997年12月18日，W3C推荐标准
HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准
ISO/IEC 15445:2000（“ISO HTML”）——2000年5月15日发布，基于严格的HTML 4.01语法，是国际标准化组织和国际电工委员会的标准
XHTML 1.0—发布于00年1月26日，是W3C推荐标准，后来经过修订于2002年8月1日重新发布
XHTML 1.1, 于2001年5月31日发布

W3C成立于1994年10月的W3C(World Wide Web Consortium，万维网联盟)
指定一系列的标准集合：结构、表现和行为

二、什么叫标准网页设计
每个网页都是由“内容”与“表现”组织起来。

内容：就是我要显示什么(使用HTML)；

表现：怎么显示的更好(使用CSS)；

作为一个负责的网页设计者要牢记标准网页设计中,HTML只是负责显示内容的,具体怎么显示,怎么排版是CSS的事。

三、HTML 文件结构
   <html>...</html>
   <head>...</head>（<title>, <base>, <link>, <meta>）
   <body>...</body>

四、什么是DOCTYPE
DOCTYPE是document type(文档类型)的简写，在web设计中用来说明你用的XHTML或者HTML是什么版本。
   * DOCTYPE声明必须放在每一个XHTML文档最顶部，在所有代码和标识之上
   * 浏览器的呈现模式
     Standards（标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页
     Quirks（包容）模式（松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页

五、HTML常用标签
*标记写法
　　·任何标记皆由"<"及">"所围住，如 <P>
　　·标记名与小于号之间不能留有空白字元。
　　·有些标记需要加上参数，有些不要。如 <font size="+2">Hello</font>
　　·参数只可加于起始标记中。
　　·在起始标记的标记名前加上符号"/"便是终结标记，如 </font>
　　·标记字母大小写皆可。建议小写
    新版本中所有标签都必须有结束符号！
1、文件标记
■<html>...<html/>宣告这是 HTML 文件：
  整份文件处于标记<HTML>与</HTML>之间。 <HTML>用以宣告这是 HTML 文件，让浏览器认出并正确处理此 HTML 文件
■ <head>...</head>定义文件头（用来说明这是文档的标题，并包含了向用户和搜索引擎提供信息的其他元素）：
  标题、编码、作者、开发工具、引入外部样式文件等等
■ <title>...</title>指明Web页面的名字、浏览器标题：
  这个元素放在HEAD元素之中，显示在浏览器窗口的标题栏中
  每个文档只允许有一个标题
■ <link />用于引入样式文件，设置媒介
■ <base />为网页中的相对URL定义一个基础URL，属性有两个“href、target”
■ <meta />
   * name属性主要用于描述网页（说明生成工具、关键词、描述、制作作者、能否被搜索引擎检索和查询）
   * http-equiv属性主要是用于设置网页（设置字符集、跳转页面、设置缓存、设置删除COOKIE、网页等级评定、强制窗口显示、设置进入和离开特效）
2、排版标记
■ 用来插入一些在浏览器中不显示的注释和解释性语言：
  其内容长度不用被限制在一行内，可以为任意长度。结束标识和开始标识可以不在一行上。
■ <p align=right|left|center(默认值：align="left")>…</p>定义一个段落：
■ <br />强迫一行文本断开：
  clear=设置在一个浮动对象之后的下一段起始位置(none,left,right,all)
■ <hr />是一个水平分割线，用来把页面分成几个部分：
  align="..."被反对。控制对齐方式(left, right, center, justify)
　noshade="..."显示一个实心的分界线
　size="..."被反对。控制分界线的尺寸大小
　width="..."被反对。控制分界线的宽度
■ <pre>…</pre>显示预先被格式化后的文本：
3、字体标记
----实体标记：
   <b>粗体字，<i>斜体字，<tt>打字机字体，<sup>上标字，<sub>下标字，<u?>文字加底线，<s?>，<strik?>
----逻辑标记：
  <em>、<strong>、<code>用于列出一段程序代码

⑴实体标记有固定的显示效果，逻辑标记标记则依不同浏览器而不同
■<h1-6></h1-6>标题标记：
  由<H1>到<H6>逐渐变小。每个标题标记所标示的字句将独占一行且上下留一空白行
■<font>…</font>用以改变字体大小和颜：
  属性：size="文本字体大小(从1到7，或者相近的数字)
        color="..."文本字体颜色
        face="..."文本字体类型
■<span>…</span>标签被用来组合文档中的内联元素：
  <span>是内联元素，以便通过样式来格式化它们
  可设置事件、ID、CLASS
4、列表标记
■ <ol> <li>创建有序列表：
     排序列表中，每个列表项前标有数字，表示顺序。
     排序列表由<ol>开始，每个列表项由<li>开始
■ <ul> <li>创建无序列表：
     不排序列表不用数字标记每个列表项，而采用一个符号标志每个列表项，比如圆黑点。
     不排序列表由<ul>开始，每个列表项由<li>开始
■ <dl><dt><dd>创建定义列表(项目列表)：
    定义列表由<dl>开始。术语由<dt>开始，英文意为Definition Term。
     术语的解释说明，由<dd>开始，<dd></dd>里的文字缩进显示
5、表格标记
■ <table> <tr> <td>
（width|border|align|cellpadding|cellspacing|bordercolor|background|bgcolor）
  table创建一个表格
  tr定义表格一行的单元格
  td定义一个单元格的内容
■ <th>定义表格页眉单元格的内容：
■ <caption>显示表格的标题：
   align="..."被反对。控制对齐方式(left,center,right,justify)
■ <thead>定义表格页眉：
■ <tfoot>定义表格页尾：
■ <tbody>定义表格具体内容：

6、图形标记、链接标记
■ <img>在文档中包含一个图像：
   例如 <img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif">
■ <a>用来定义链接和锚
   <a href=’’>sss</a>连接
   <a name=’sd’></a>锚

六、块级元素和内联级元素详解
  block（块）元素的特点：
  ①总是在新行上开始；
  ②高度，行高以及顶和底边距都可控制；
  ③宽度缺省是它的容器的100%，除非设定一个宽度。
   ④它可以容纳内联元素和其他块元素

  inline元素的特点：
  ①和其他元素都在一行上；
  ②高，行高及顶和底边距不可改变；
  ③宽度就是它的文字或图片的宽度，不可改变
  ④内联元素只能容纳文本或者其他内联元素
  （中文叫法有多种内联元素、内嵌元素、行内元素、直进式元素）。
块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素cite加上display:block这样的属性，让他也有每次都从新行开始的属性

  可变元素：
      是基于以上两者随环境而变化的，它的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制

块元素(block element)
◎ address - 地址
◎ blockquote - 块引用
◎ center - 举中对齐块
◎ dir - 目录列表
◎ div - 常用块级容易，也是css layout的主要标签
◎ dl - 定义列表
◎ fieldset - form控制组
◎ form - 交互表单
◎ h1 - 大标题
◎ h2 - 副标题
◎ h3 - 3级标题
◎ h4 - 4级标题
◎ h5 - 5级标题
◎ h6 - 6级标题
◎ hr - 水平分隔线
◎ isindex - input prompt
◎ menu - 菜单列表
◎ noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容）
◎ noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
◎ ol - 排序表单
◎ p - 段落
◎ pre - 格式化文本
◎ table - 表格
◎ ul - 非排序列表（无序列表）
内联元素(inline element)
◎ a - 锚点
◎ abbr - 缩写
◎ acronym - 首字
◎ b - 粗体(不推荐)
◎ bdo - bidi override
◎ big - 大字体
◎ br - 换行
◎ cite - 引用
◎ code - 计算机代码(在引用源码的时候需要)
◎ dfn - 定义字段
◎ em - 强调
◎ font - 字体设定(不推荐)
◎ i - 斜体
◎ img - 图片
◎ input - 输入框
◎ kbd - 定义键盘文本
◎ label - 表格标签
◎ q - 短引用
◎ s - 中划线(不推荐)
◎ samp - 定义范例计算机代码
◎ select - 项目选择
◎ small - 小字体文本
◎ span - 常用内联容器，定义文本内区块
◎ strike - 中划线
◎ strong - 粗体强调
◎ sub - 下标
◎ sup - 上标
◎ textarea - 多行文本输入框
◎ tt - 电传文本
◎ u - 下划线
◎ var - 定义变量

可变元素：可变元素为根据上下文语境决定该元素为块元素或者内联元素。
◎ applet - java applet
◎ button - 按钮
◎ del - 删除文本
◎ iframe - inline frame
◎ ins - 插入的文本
◎ map - 图片区块(map)
◎ object - object对象
◎ script - 客户端脚本

七、设计布局重点、技巧：

1. Doctype 定义HTML解析的模型以及版本

2. Meta头信息以及设置

3. 网页的描述、关键字（对搜索引擎的优化）

4. Html所有标签必须有结束符号（新版本定义规则）

5. 每个文件中html标签组只允许出现一次

6. 标准HTML文件的结构

7. 尽量将表现层与内容分离（通常所说的CSS控制布局）

8. 块元素与内联元素的区别

9. Float后引起的布局异常

10. 外部CSS、内部CSS、内嵌CSS的优先级

11. 实体标记与逻辑标记的区别

12. Base的另类使用

13. 连接、图片、媒介部分加以描述

14. 尽量少用pre或不用pre标签，

15. <!--à中不建议含有HTML标签，部分浏览器会解析出来

16. 建议使用CLASS定义样式，不要使用ID定义样式

17. Br清除两边（float属性）

18. 标签和属性必须小写

19. 所有属性值必须加引号

20. 标签不能重叠可嵌套

mamaly_dut

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DIV+CSS培训（一）

主题一 HTML基础知识培训一、什么是HTMLHTML是Hypertext Markup Language的英文缩写,即超文本标记语言,是一种用来制作网页的标记语言（它不需要编译,可以直接由浏览器执行，属于浏览器解释型语言）超文本置标语言(第一版)—在1993年6月发为互联网工程工作小组 (IETF)工作草案发布（并非标准）. HTML 2.0—1995年11月作为RFC 1866发布，在R
复制链接

扫一扫

专栏目录