Web百科系列培训 之 HTML基础教程 01
- 格式:pptx
- 大小:345.87 KB
- 文档页数:13
HTML语言入门教程(一)▪什么是HTML语言HTML(HyperText MarkUp Language)是使用特殊标记来描述文档结构和表现形式的一种语言,由W3C(World Wide Web Consortium)所制定和更新。
我们可以用任何一种文本编译起来编辑HTML文件,因为它就是一总纯文本文件。
▪HTML语言的基本结构下面我们来看一小段HTML语言的代码,来了解HTML语言的基本结构:<html><head><title>HTML语言的基本结构</title></head><body>HTML(HyperText MarkUp Language)是使用特殊标记来描述文档结构和表现形式的一种语言。
</body></html>将这一小段代码粘贴至文本文件中,然后选择“另存为”,将文件的后缀名改为.htm或者.html即可,然后再所在的目录下就可看到一个IE的图标,名字就是你所存的文件名称。
<html>…… ……</html>这是声明HTML文件的语法格式。
每一个HTML文件,都必须以<HTML>开头,以</HTML>结束<head>…… ……</head>这是文件头声明的语法格式。
在这之内的所有文字都属于文件的文件头,并不属于文件本体。
<title>…… ……</title>这是声明文件标题的语法格式。
在这之中写下的所有内容,都将写在网页最上面的标题栏中。
<body>…… ……</body>这是声明文件主体的语法格式。
在者之间写下的内容都是文件的主体,也就是说将会被显示在客户区之中。
注意:几乎每一种HTML语言的语法都是以<>开头,以</>结束。
在编辑HTML语言过程中,也可以使用注释。
Javaweb基础知识介绍---HTML、CSS、JavaScript HTML部分HTML是最基础的⽹页开发语⾔。
全称是Hyper Text Markup Language(超⽂本标记语⾔)超⽂本使⽤超链接的⽅法,将个找那个不同空间的⽂字信息1组织在⼀起的⽹状⽂本。
HTML是⼀种标记语⾔,由标签构成的语⾔。
<标签名>如html,xml等标记语⾔不是编程语⾔。
HTML语⾔语法:在HTML⽂档的后缀名为“.html”或“.htm”标签分为围堵标签和⾃闭合标签。
围堵标签:有开始标签和结束标签,如<html></html>⾃闭合标签:开始标签和结束标签在⼀起。
如<br/>在标签中是可以嵌套的,但是需要正确嵌套,不能“你中有我,我中有你”错误嵌套格式:<a><b></a></b>正确嵌套格式:<a><b></b></a>在开始标签中可以定义属性,属性是由键值对构成,值需要⽤引号(单双都可以)引起来。
在HTML中,是不区分⼤⼩写的,但是建议使⽤⼩写。
在HTML中标签分为⽂件标签,⽂本标签,图⽚标签,列表标签,链接标签,表格标签。
⽂件标签:是构成HTML的最基本的标签。
HTML:是HTML⽂档的根标签。
head:头标签。
⽤于指定HTML⽂档的⼀些属性。
引⼊外部的资源。
title:标题标签。
body:体标签。
<! DOCTYPE HTML>:HTML5中定义该⽂档是HTML⽂档。
⽂本标签:和⽂本有关的标签。
注释:<! -- 注释内容--> <h1>-<h6>:标题标签。
h1-h6的字体⼤⼩逐渐递减。
<p>:段落标签。
<br>:换⾏标签。
<hr>:展⽰⼀条⽔平线。
属性: color:颜⾊。
HTML 基础知识培训一、HTML入门HTML英语意思是:Hypertext Marked Language,即超文本标记语言,是一种用来制作超文本文档的简单标记语言。
用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台(如UNIX,WINDOWS等)。
自1990年以来HTML就一直被用作World Wide Web 的信息表示语言,用于描述Homepage的格式设计和它与WWW上其它Homepage 的连结信息。
使用HTML语言描述的文件,需要通过WWW浏览器显示出效果。
所谓超文本,因为它可以加入图片、声音、动画、影视等内容,因为它可以从一个文件跳转到另一个文件,与世界各地主机的文件连接。
过HTML可以表现出丰富多彩的设计风格图片调用:<img src="路径/文件名">文字格式:<font size="+5 " color="00FFFF">文字</font>通过HTML可以实现页面之间的跳转页面跳转:<a href="" title="" target="_blank">超级链接</a>通过HTML可以展现多媒体的效果音频、视频、动画上面我们在示例超文本特征的同时,采用了一些我们在制作超文本文件时需要用到的一些标签。
所谓标签,就是它采用了一系列的指令符号来控制输出的效果,这些指令符号用“<标签名属性=”值”></标签名>”来表示。
二、HTML的基本结构超文本文档分文档头和文档体两部分,在文档头里,对这个文档进行了一些必要的定义,文档体中才是要显示的各种文档信息。
<html><head>头部信息</head><body>文档主体,正文部分</body></html>其中<HTML>在最外层,表示这对标记间的内容是HTML文档。
一、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 文件?∙HTML 指超文本标签语言。
∙HTML 文件是包含一些标签的文本文件。
∙这些标签告诉WEB 浏览器如何显示页面。
∙HTML 文件必须使用htm 或者html 作为文件扩展名。
∙HTML 文件可以通过简单的文本编辑器来创建。
做个实验如何?准备工作:第一步:如果您使用Windows,请启动记事本。
第二步:键入以下文本:1.2.<html>3.<head>4.<title>页面的标题</title>5.</head>6.<body>7.<p>这是我的第一个页面。
<b>这是粗体文本。
</b></p>8.</body>9.</html>复制代码第三步:将这个文件存为"mypage.html"。
第四步:直接双击你做好的这个文件(网页),浏览器就会显示这个页面。
或者启动您的浏览器。
在浏览器的文件菜单中选择“打开”或者“打开页面”。
这时会弹出一个对话框。
单击“浏览”或者“选择文件”,找到您刚才创建的文件- "mypage.html",选定它然后打开,现在您会看到对话框中有一行地址,比如:"D:\mypage.html"。
单击确定按钮,浏览器就会显示这个页面。
这就是我们做好的第一个网页。
例子解释:HTML 文件中的第一个标签是<html>。
这个标签告诉浏览器这个HTML 文件的开始点。
文件中最后一个标签是</html>。
这个标签告诉您的浏览器,这是HTML 文件的结束点。
位于<head> 标签和</head> 标签之间的文本是头信息。
头信息不会显示在浏览器窗口中。
<title> 标签中的文本是文件的标题。
标题会显示在浏览器的标题栏。
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文件是一个包含标记的文本文件。
第1章HTML基础HTML(超文本标记语言)是制作网页的基础。
HTML标记是HTML的核心与基础,用于修饰、设置HTML文件的内容及格式。
一个HTML文件中包含了所有将显示在网页上的文字信息。
其中也包括对浏览器的一些指示,如文字应放置在何处,显示模式如何等。
如果还有一些图片、动画、声音或是任何其他形式的资源,HTML文件也会告诉浏览器到哪里去查找它们,以及它们将放置在网页中的什么位置。
教学目标通过对本章的学习,读者应了解和掌握HTML的各种标记和语法,并能够使用HTML 设计简单的静态网页。
教学重点与难点●使用HTML设计静态网页●编辑网页文本格式●创建超链接●使用表格●使用列表1.1 网页基础知识Internet是从Interconnected Networks延伸而来的,是跨国界的网络。
Internet把世界各地数以千万计的计算机和传输线路连接在一起构成一个网络。
通过它可以交换信息、共享资源,并以此为基础实现各种计算机通信应用项目。
在Internet中,网页是它的重要组成部分,本节首先介绍一些与网页相关的名词和概念。
1.1.1 万维网——WWWWWW(World Wide Web)即环球信息网,也可以称为Web,中文名字为“万维网”。
用户在使用浏览器来访问Web的过程中,无须关心一些技术性的细节即可得到丰富的信息资料。
WWW 是Internet上发展最快和目前使用最广泛的一种服务。
ASP动态网站开发教程• 2 •简单的说,WWW是漫游Internet网的工具,它把Internet上不同地点的相关信息聚集起来,通过WWW浏览器(比如IE,Internet Explorer)检索,无论用户所需的信息在什么地方,只要浏览器为用户检索到之后,就可以将这些信息(文字、图片、动画、声音等)“提取”到用户的计算机屏幕上。
1.1.2 超文本传输协议——HTTPHTTP(HyperText Transfer Protocol)即超文本传输协议,它是WWW服务器上使用的最主要协议。