网页设计-从零开始学网页设计正藏版绝对让菜鸟沸腾的教程html
- 格式:doc
- 大小:576.00 KB
- 文档页数:39
一、HTML简介1.1 HTML的定义HTML(HyperText Markup Language,超文本标记语言)是用于创建网页的标准标记语言。
1.2 HTML的作用HTML用于描述网页的结构和内容,使得浏览器能够展示具有特定格式的文本、、图片等。
1.3 HTML的发展历程HTML 1.0(1993年)HTML 2.0(1995年)HTML 4.01(1997年)XHTML 1.0(2000年)HTML5(2014年)二、HTML文档结构2.1 基本结构<!DOCTYPE ><><head><meta charset="UTF-8"><>文档</></head><body><h1>一级</h1><p>段落内容</p><!-更多的标签和内容 --></body></>2.2 标签分类语义化标签:`<header>`、`<nav>`、`<section>`、`<article>`、`<footer>`等功能性标签:`<div>`、`<span>`等三、文本格式与排版3.1 标签`<h1>`~`<h6>`:依次表示一级到六级3.2 段落标签`<p>`:表示一个段落3.3 换行与清除浮动`<br>`:表示换行`<wbr>`:表示单词换行`<clear>`:清除浮动3.4 字符实体`<>&"`:分别表示小于号、大于号、引号四、图片与4.1 图片标签`<img>`:表示图片<img src="图片地址" alt="图片描述" width="宽度" height="高度"> 4.2 标签`<a>`:表示<a href="地址" target="_blank">文本</a>4.3 锚点`<a name="锚点名称">`:表示锚点`<a href="锚点名称">`:到锚点五、列表与表格5.1 无序列表`<ul>`:无序列表`<li>`:列表项5.2 有序列表`<ol>`:有序列表`<li>`:列表项5.3 定义列表`<dl>`:定义列表`<dt>`:定义`<dd>`:定义描述5.4 表格`<table>`:表格`<tr>`:表格行`<td>`:单元格`<th>`:表头单元格六、表单与数据验证6.1 表单标签`<form>`:表单`<input>`:输入框`<textarea>`:文本域`<select>`:下拉菜单`<option>`:下拉菜单选项6.2 数据验证`required`:必填字段`pattern`:正则表达式验证`minlength`、`maxlength`:字符长度限制`type="e"、type="number"、type="":输入类型限制七、CSS样式7.1 内联样式在HTML标签内使用`style`属性添加样式7.2 内部样式表在`<head>`标签内使用`<style>`标签添加样式7.3 外部样式表使用`.css`文件作为样式表,通过`<link>`标签引入7.4 CSS选择器标签选择器:`h1 { }`类选择器:`.classname { }`ID选择器:`idname { }`属性选择器:`[attribute="value"] { }`八、盒子模型与布局8.1 盒子模型`margin`:外边距`border`:边框`padding`:内边距`width`、`height`:宽度和高度8.2 布局方式标准流布局浮动布局:`float`属性定位布局:`position`属性弹性盒模型(Flexbox):`display: flex;`九、响应式设计9.1 媒体查询使用`media`查询不同设备屏幕大小时的样式9.2 移动端布局使用百分比、视口单位(vw、vh)、rem等实现响应式布局9.3 图片响应式使用`<picture>`标签或`srcset`属性实现图片响应式十、HTML5新特性10.1 视频与音频`<video>`:视频`<audio>`:音频10.2 画布(Canvas)`<canvas>`:绘制图形、动画等10.3 Web存储`localStorage`:本地存储`sessionStorage`:会话存储10.4 离线应用与缓存使用`manifest`文件实现离线应用10.5 其他新特性`<nav>`、`<section>`、`<article>`等语义化标签`<input type="e">`、`<input type="number">`等新输入类型`<dialog>`:对话框重点和难点解析HTML的基本结构和标签分类文本格式与排版,如、段落、换行等图片与的使用,包括图片标签和锚点列表与表格的创建和应用表单与数据验证,如必填字段、正则表达式验证等CSS样式的基础知识,包括内联样式、内部样式表和外部样式表盒子模型、布局方式以及响应式设计的基本概念HTML5的新特性,如视频与音频、画布、Web存储等HTML5的新特性,如离线应用、Web存储等,这些内容需要一定的实践和理解CSS的高级应用,如伪类、过渡、动画等,这些内容需要对CSS 有深入的了解表单的数据验证,如何使用JavaScript进行复杂的验证,需要对JavaScript有一定的了解。
HTML教程课程内容第1章HTML简介 (3)1.1 什么是HTML (3)1.2 为什么学习HTML (3)1.3 HTML的发展史 (4)第2章第一个HTML文档 (4)2.1 HTML结构 (4)2.2 我的第一个网页 (5)第3章HTML元素 (5)3.1 HTML标签 (5)3.2 标签属性 (6)练习: (6)第4章使用Dreamweaver Mx开发网页 (7)第5章HTML基本标签 (7)5.1 段落 (7)5.2 标题元素 (8)5.3 换行 (8)5.4 水平线 (8)5.5 HTML中的注释 (9)5.6 嵌入元素 (9)练习: (9)第6章HTML格式化标签 (10)6.1 HTML的<font>标签 (10)6.2 格式化文字: (11)6.3 删除和插入文字: (12)6.4 预格式化文本 (12)6.5 其他参考: (13)6.5.1 “计算机输出”标签: (13)6.5.2 地址: (14)6.5.3 缩写和首字母缩略法: (14)6.5.4 文字方向: (14)6.5.5 块引用: (15)第7章HTML链接 (15)7.1 连接 (15)7.2 锚标签和href属性 (16)7.3 邮件链接: (17)7.4 target属性 (18)练习: (18)第8章HTML表格 (18) 8.1表格头使用<th>标签指定.................................................................................19 8.2有标题的表格:.................................................................................................19 8.3美化表格.............................................................................................................20 8.4frame 属性...........................................................................................................20 练习:.............................................................................................................................23 第9章 HTML 列表.. (23)9.1无序列表.............................................................................................................23 9.2有序列表.............................................................................................................24 9.3 自定义列表.........................................................................................................24 练习:.............................................................................................................................25 第10章HTML 图像.................................................................................................................25 10.1alt 属性.................................................................................................................25 10.2对齐图像:.....................................................................................................25 10.3图像导航:.....................................................................................................26 10.4图像地图:.....................................................................................................27 练习:.............................................................................................................................27 第11章颜色表示.....................................................................................................................27 第12章HTML 特殊字符/实体................................................................................................28 第13章HTML 表单.................................................................................................................29 第14章 HTML 框架.................................................................................................................32 14.1垂直分栏:.....................................................................................................32 14.2水平分栏:.....................................................................................................32 14.3混合框架:.....................................................................................................33 14.4导航框架.........................................................................................................33 14.5<noframes>标签:.............................................................................................33 练习:.............................................................................................................................34 14.6内嵌框架.........................................................................................................34 第15章HTML 样式................................................................................................................34 15.1内部样式表.....................................................................................................35 15.2行内样式.........................................................................................................35 15.3连接外部样式表.............................................................................................35 15.4 样式标签.........................................................................................................36 第16章HTML 文件头............................................................................................................36 例1:给所有连接添加一个目标..................................................................................36 例2:背景音乐..............................................................................................................37 16.1HTML Meta........................................................................................................37 16.1.1name 属性........................................................................................................37 16.1.2http-equiv 属性................................................................................................38 第17章HTML 脚本................................................................................................................40 第18章HTML4.0 事件属性..................................................................................................41 第19章 HTML 属性. (42)Created by YYM Page 2 of 42标准资料收藏家 易启标准网免费提供十万标准书籍资料下载参考信息//w3/相关技术手册/imagesnew/software/html/index.html微软提供的在线帮助/library/chs/default.asp?url=/library/CHS/vbcon/html/vblrf HTMLDivControls.asp第1章 HTML简介1.1什么是HTML9HTML文件是一个包含标记的文本文件。
介绍 - 免费的 HTML 教程人们常常以为制作一个网站很难,但其实并非如此!人人都能学会如何制作网站 人人都能学会如何制作网站 人人都能学会如何制作网站。
而且,假如你继续 阅读本教程的话,你将能在一小时内制成一个网站。
有些人觉得制作网站需要昂贵的、高级的工具——当然这是错误的。
的确有许多软件声称它们可以为 你创建网站, 它们有的比较好用, 有的就差些。
但如果你要制作符合 W3C 规范并令你满意的网页的话, 你必须自己动手做。
好在这不难,而且你已具备所需的全部软件了。
好在这不难,而且你已具备所需的全部软件了 好在这不难 本教程的目的就是:通过简单、全面和正确的介绍,教会你如何创建网站。
本教程将从基础讲起,不 本教程将从基础讲起, 本教程将从基础讲起 要求你具备任何编程知识。
要求你具备任何编程知识。
当然,本教程无法遍及所有知识,所以你要自己多做实验。
不过别担心,学习制作网站是件充满乐趣 的事,而且一旦掌握它,你便会感到无比满足。
你可以自由选择如何使用本教程,但我们建议你每天学习 2 到 3 课,然后花点时间来实验你所学到的 新知识。
好的,不多说,我们现在就开始吧! 从零开始学 HTML第 1 课:开始学习在这第一课中,我们简要介绍制作网站所需的工具。
需要哪些工具? 需要哪些工具?十之八九,你已经拥有所需的全部工具了。
“浏览器(browser)”你有了,它是用于浏览网站的程序。
你现在就是通过浏览器在观看本页面的。
游览器有很多可供选择,最普及的浏览器当属微软(Microsoft)公司的 Internet Explorer(俗称 “IE”),其他的一些浏览器包括 Opera、Mozilla Firefox(俗称“火狐狸”或“火狐”)等。
这 些浏览器的基本功能都是浏览网页,因此具体使用哪个浏览器是无所谓的。
也许你听说过、甚至用过一些网页制作工具,比如 Microsoft FrontPage、Macromedia Dreamweaver、 Microsoft Word 等。
现在可以忘掉这些程序了!它们对你学习网页制作没有什么帮助。
相反,你需要的是一个简易的文本编辑器。
如果你正在使用 Windows(微软视窗)操作系统的话,你 可以使用它自带的记事本(Notepad)程序。
你可以依次点击“开始菜单→程序→附件”找到该程序。
如果你用的是其他操作系统, 那么也有类似的简易文本编辑器可以使用, 比如 Linux 上的 Pico 或 Mac (苹果机)上的 Simple Text。
记事本是一个非常简单的文本编辑程序, 用它编写程序非常好, 因为它不会干涉你所输入的任何内容, 给予你完全的控制权。
而许多网页制作工具的问题在于,它们提供了许多标准功能供你选择。
这样的 缺点是, 你只能按照这些标准功能来制作网页。
所以, 这类工具常常不能创建正合你意的网页。
或者,更令人讨厌的是,它们会修改你手工编写的代码。
而使用记事本(Notepad)或其他简易文本编辑器 的话,全部代码均由你自己编写。
浏览器和记事本程序(或类似的简易文本编辑器)便是你所需的全部工具,有了它们,你就可以完成 本教程,并制作自己的网站了。
我需要连上因特网么? 我需要连上因特网么?你无需连上因特网(Internet),浏览本教程和制作网站都可以离线完成。
如果你想要离线阅读本教程,你可以将它打印出来,或者在阅读教程期间断开与因特网的连接。
你可 以先在自己的计算机上制作网站,待网站制作完毕再上传到因特网上。
接下来学习什么? 接下来学习什么?下一课将介绍 HTML 是什么,然后从第三课开始学习有趣的 HTML。
是什么? 第 2 课:HTML 是什么?这一课将为你简要介绍你的新朋友——HTML。
是什么? HTML 是什么?是浏览器的“母语” HTML 是浏览器的“母语”。
长话短说,HTML 是由一名叫 Tim Berners-Lee 的科学家发明的。
他发明 HTML 的目的,是为了方便不 同大学的科学家们可以更容易地获取彼此的研究文档。
HTML 取得了的巨大成功,大大超出了 Tim Berners-Lee 的原本预计。
通过发明 HTML,他为我们今天所认识的万维网奠定了基础。
HTML 是一门语言,它令我们可以在因特网上展示信息(例如科学研究信息)。
你所看到的网页,是 浏览器对 HTML 进行解释的结果。
要查看一个网页的 HTML 代码, 只需在浏览器菜单栏上点击“查看”, 然后选择“源文件”即可。
对于生手来说,HTML 代码看似很复杂,不过本教程将帮助你弄清楚它们的含义。
能用来做什么? HTML 能用来做什么?如果你要制作网站的话,学习 HTML 是不可避免的。
即使你用 Dreamweaver 等工具来制作网站,了解 基本的 HTML 知识也会令你在网站制作过程中倍感轻松,并有利于制作出更好的网站。
好在 HTML 容易 被学会和使用。
通过下面两课的学习,你将学会如何制作自己的第一个网站。
是用来制作网站的。
就这么简单! HTML 是用来制作网站的。
就这么简单!这四个字母代表什么呢? 好,明白了,那 HTML 这四个字母代表什么呢? 明白了,HTML 是“HyperText Mark-up Language(超文本标记语言)”的缩写——其实目前你不必了解这些, 不过,为了迁就学习次序,我们就详细解释一下吧。
•超(Hyper)是相对于线性(linear)来说的。
在很久以前,那时计算机程序还是线形运行 Hyper) 的:当计算机程序执行完一个动作以后,转向下一行,这行结束后,继续下移,依次类推。
但 HTML 则不同,你可以在任何时候跳转到任何地方。
比方说,你在浏览 之前,不 必先去浏览 。
• • •文本(Text) 文本(Text)意味着它是自解释的(self-explanatory)。
标记(Markup) 标记(Markup)指的是你怎么处理文本。
对文本作标记的方式,跟你在文本编辑程序里将文 本加粗、或者将一行话设为标题或列表项目类似。
语言(Language) 语言(Language)。
HTML 就是一种语言,它使用了许多英文单词。
在本教程中,你将会学习到 XHTML(可扩展超文本标记语言)。
简单地说,它是一种新的、更加结构 良好的 HTML。
现在,你知道了 HTML(和 XHTML)代表什么意思,下面我们将开始有关网站制作的学习。
第 3 课:元素与标签现在你要学习的是 HTML 的重要成分——元素(element)。
元素用于结构化 HTML 文档,并告知浏览器如何呈现网页。
一般来说,元素由首标签(start tag)、 内容(content)和尾标签(end tag)构成。
“标签”是什么? 标签”是什么?标签(tag)指示元素的起始与结束。
所有标签都具有相同的格式:以小于号“<”开头,以大于号“>”结尾。
一般说来,有两种标签——首标签(start tag)(如<html>)和尾标签(end tag)(如</html>)。
它们唯一的区别在于,尾标签多一条斜杠“/。
你通过把内容放在首标签和尾标签之间来对内容进行 标记。
HTML 主要就是各种各样的元素,所以,学习 HTML,就是学习使用各种元素。
可以举些例子么? 可以举些例子么?没问题。
比如,b 元素的作用是,告诉浏览器介于标签<b>和</b>之间的文本应以粗体显示。
(这 里的“b”是“粗体(bold)”的意思。
) 例 1:<b>这句话应显示为粗体。
</b>该例在浏览器中将显示如下: 这句话应显示为粗体。
这句话应显示为粗体。
h1、h2、h3、h4、h5 及 h6 元素的作用是显示标题(这里的 h 是“标题(heading)”的意思)。
其中 h1 是一级标题,字体最大;h2 是二级标题,字体比一级标题略小;而 h6 是六级标题,它是最后一级标题,字体也最小。
例 2:<h1>这是标题</h1> <h2>这是子标题</h2>该例在浏览器中将显示如下:这是标题这是子标题 首标签和尾标签总是必须的吗? 首标签和尾标签总是必须的吗?常言道,凡事均有例外。
在 HTML 中,也有例外的情况,即有些元素没有尾标签。
这些没有尾标签的 元素被称作空元素 (empty element) 它们与具体文本内容无关, , 比如像下面这个换行标签: <br/>。
标签中的字母应该大写还是小写? 标签中的字母应该大写还是小写?大多数浏览器不介意标签是大写还是小写,或者混合大小写。
所以<HTML>、<html>或<HtMl>在浏览器 上的显示效果都一样。
但是,正确的 正确的写法是采用小写字母来书写标签。
所以,要养成用小写字母书写 正确的 用小写字母书写 标签的习惯。
标签把标签放在哪里? 把标签放在哪里?你应该在 HTML 文档里书写标签。
一个网站可能包含多个 HTML 文档。
上网的过程,其实就是打开不同 HTML 文档的过程。
这一课就到这里。
如果花 10 分钟时间继续学习下一课的话,你将能够制作自己的第一个网站。
第 4 课:制作自己的第一个网站有了从前面几课的基础,现在只需再花几分钟时间,你就能学会如何制作自己的第一个网站了。
如何做呢? 如何做呢?通过第一课,我们知道制作一个网页需要有浏览器和记事本程序(或者类似的文本编辑器)。
既然你 现在已经在用浏览器阅读本教程了,那么请再打开一个窗口——这样你就可以一边阅读本教程,一边 欣赏你的新网页了。
另外,请打开记事本程序(Notepad):依次选择“开始菜单→程序→附件→记事本”即可。
现在一切就绪了!然后呢? 然后呢?我们先从简单的做起吧。
先试着做一个显示如下内容的网页:“哇!这是我的第一个网站。
”继续学 习,就你就知道这是多么容易了。
HTML 简单易学。
浏览器读 HTML 就跟你读书一样,也是从上往下,从左到右进行的 就跟你读书一样,也是从上往下,从左到右进行的。
所以,HTML 文档 浏览器读 的开始和结束便对应于网页的头和尾。
你首先要做的是告诉浏览器,你们将采用 HTML 语言来“对话”。
这是通过<html>标签来实现的(这 是容易理解的)。
所以,在做所有其他事之前,先在记事本的第一行敲入“<html>”。
也许你记得前面课程中我们说过,这里的<html>是首标签,在 HTML 文档结尾处必须有相应的尾标 签与之对应。
好的, 为了防止最后忘记写这个尾标签, 我们现在就输入“</html>”, 然后在<html> 和</html>之间留些空行,用于书写其余代码。