学会HTML基础

2011-01-29 18:00:56 css5教程系列之一、必知HTML基础教程-CSS教程系列

一、必知HTML基础-CSS教程系列

在学习CSS制作知识之前,我们必须需要认识的HTML什么基础知识。

目录
  1. 搞清浏览器作用
  2. 搞清什么是HTML
  3. html作用
  4. html我们涉及哪些基础知识
  5. 常见html单词及单词功能作用有哪些
  6. html结构
  7. html与CSS关系

1、搞清浏览器作用

浏览器主要作用是浏览网页作用,在DIV+CSS制作开发时候仍然是浏览我们制作开发重构网页作用。浏览器可测试我们开发的CSS网页兼容性、网页效果、因开发疏忽导致错误等作用。

在CSS测试(CSS工具)里常用浏览器包括IE6、IE7、IE8、火狐(FF)、谷歌(chrome)、苹果Safari、Opera主流浏览器。至于傲游、360浏览器因为他们使用你系统自带的IE内核,所以不必考虑,只要支持你浏览器版本即支持类似这2款浏览器。

需要兼容浏览器有哪些?//www.html8.com.cn/css/86.shtml

2、搞清什么是HTML

html是hypertext markup language的缩写,即超文本标记语言。可以这样理解,HTML文件是一定规则规律以html\htm等命名后缀名的文本文件。

与我们记事本区别,html文件里源代码有一定规则语法的英文代码。
了解什么是html//www.html8.com.cn/html/5.shtml

3、html作用

HTML作用,通过一定html自身语法结构(html结构),显示文字、图片、动画(flash)、视频或音频音乐。而CSS则是配合html实现漂亮的各式各样的页面内容。

4、html我们涉及哪些基础知识

Html扩展名html源代码DOCTYPEhtml结构head标签charset

5、常见html单词及单词功能作用有哪些

a、B(strong):加粗
实例:<b>我被加粗</b>或<strong>我也被加粗</strong> 两个加粗属性相同、用法相同
CSS 加粗//www.html8.com.cn/css/882.shtml

b、P:换行
实例:<p>我是第一段内容</p><p>我是第二段内容</p>

c、Br:提行
实例:我是第一排<br />我是第二排内容

P与br区别用法://www.html8.com.cn/html/78.shtml

d、px:像素、长度宽度单位
实例:width:30px; 宽度30像素
了解像素单位//www.html8.com.cn/html/89.shtml

e、ul、ol、li列表标签
实例:

  1. <ul> 
  2. <li>列表一</li> 
  3. <li>列表二</li> 
  4. <li>列表三</li> 
  5. </ul> 
  6. <ol> 
  7. <li>列表一</li> 
  8. <li>列表二</li> 
  9. <li>列表三</li> 
  10. </ol> 

两个都是列表组,区别是ul为无序列表\OL为有序列表
更详细css li介绍://www.html8.com.cn/css/31.shtml

f、div与span:都是html标签
实例:<div>我占一行</div><span>我多长占多长位置</span>
两者区别:DIV占用1整排,而SPAN所占位置是内容多少占用多长长度
DIV span区别//www.html8.com.cn/css/79.shtml

g、img:图片引用标签
<img src="/css-images/css-logo.gif" />图片标签
详细html img//www.html8.com.cn/css/242.shtml

h、dl dt dd:CSS的另类表格组合
实例:

 <dl>
<dt>我是标题</dt>
<dd>列表一</dd>
<dd>列表二</dd>
</dl>
dl dt dd详解://www.html8.com.cn/html/88.shtml

j、title:标题标签
实例:<title>标题</title>
特点,在一个网页内只能使用一次(只能出现一次)
Title标签//www.html8.com.cn/html/124.shtml
以上为常见的html标签及单词,更多HTML标签://www.html8.com.cn/html/110.shtml

6、html结构

这里Html结构可用于每次新建制作网页模板使用。
旧html结构:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML8标题</title>
</head>
<body>
具体网页呈现内容
</body>
</html>
经过CSS教程网的HTML8优化后的HTML结构(可用于每次新建HTML模板):
 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>标题</title>
<meta name="keywords" content="关键字" />
<meta name="description" content="网页描述" />
<link href="这里CSS文件引入地址" rel="stylesheet" type="text/css" />
</head>
<body>
内容html8.com.cn提供
</body>
</html>

HTML网页结构//www.html8.com.cn/html/2.shtml

7、html与CSS关系

搞清楚html与CSS关系很重要,也是认识CSS基础。
html与CSS关系解释:HTML内放置显示网页要显示的具体内容(图片、文字、动画等)而CSS是控制HTML内这些具体内容的怎么显示、怎么排版、颜色、大小、宽度、高度、左右布局等显示样式。

以上7点是学习CSS的html基础,可能还不完善,但是在以后运用的时候HTML8会给大家详细、本简单CSS教程分为15节,此节DIV CSS教程以文字内容为主,以后会穿插更多实例和图例、跟我做的内容希望对大家能有帮助。

更新