HTML培训教程

1. HTML概述

1.1. 什么是 HTML 文件？

n HTML(Hyper Text Markup Language)指超文本标签语言。

n 这些标签告诉 WEB 浏览器如何显示页面.

n HTML 文件必须使用 htm 或者 html 作为文件扩展名.

n HTML 文件可以通过简单的文本编辑器或集成工具来创建.

n 我们一般称它为静态页面

first.html

<html>

<head>

<title>第一个HTML标题</title>

</head>

<body>

这是内容部分, 去<a href="http://www.atguigu.com">尚硅谷官网</a>

</body>

</html>

1.2. 为什么要用HTML?

n HTML最初被设计出来, 就是用来设计网页的一门语言, 它不依赖于任何语言, 它其中很重要的东西就是可以包含超链接,图片,音频与视频等数据

n 为什么不用TXT?

n txt不能包含超链接.

n 为什么不用word?

n 太重了.

n 为什么不用XML?

n XML是在HTML的基础上进一步抽象的产物. 但不是为了要替换HTML

1.3. Web2.0简述

n Web2.0是目前主流的Web页面开发标准

n Web2.0对Web页面构成的描述：

n 结构：数据的组织形式，实现方式：HTML 超文本标记语言

n 表现：数据的表现形式，实现方式：CSS 层叠样式表

n 行为：用户交互动作，实现方式： JavaScript 脚本文件

n 遵守Web2.0标准的好处：

n 根据不同的功能将HTML、CSS、JavaScript代码分开，使代码更加优雅简洁，可读性更高，更易于维护，特别是让开发工程师和UI设计师能够更好的分工合作

2.  HTML的语法

2.1. HTML 标签(元素Element)

n HTML 文档是由 HTML 元素构成的文本文件。

n HTML 元素是通过使用 HTML 标签进行定义的。

n HTML 标签是用来标记 HTML 元素的。

n HTML 标签被 < 和 > 符号包围。

n 这些包围的符号叫作尖括号。

n HTML 标签是成对出现的。例如 <b> 和 </b>。

n 位于起始标签和终止标签之间的文本是元素的内容。

n HTML 标签对大小写不敏感，<b> 和 <B> 的作用的相同的

2.2. HTML 标签的属性(Attribute)

n HTML 标签拥有属性。属性为 HTML 元素提供附加信息。

n 属性总是以名称/值对的形式出现，

n 如：name="value"或 name=’value’

2.3. HTML文本标签体(Text)

2.4. HTML文档(D)

2.5. HTML节点(Node)

2.6. HTML特殊字符与转义字符(理解)

n 特殊字符: 一些字符在 HTML 中拥有特殊的含义, 如: <, &. 如果要显示不能直接使用

n 转义字符: 每个特殊字符都对应一个固定的字符序列.

3.  HTML的常用标签

3.1. 基本标签

基本的标签

描述

<html>

定义 html 文档

<body>

定义 body 元素

<h1> to <h6>

定义标题 1 到标题 6

<p>

定义段落

<br>

插入一个换行

<!--...-->

定义注释

3.2. 字符格式化标签

<font>

定义文字的字体、尺寸和颜色

 

3.3. 链接

<a>

定义超链接

<link>

定义CSS文件的引用

3.4. 输入

<form>

定义提交请求的表单

 

 

 

 

<input>

type属性

text

文本框

password

密码框

submit

提交按钮

reset

重置按钮

radio

单选按钮

checkbox

多选框

button

普通按钮

file

文件上传框

hidden

表单隐藏域

<button>

定义按钮

<select>

定义下拉式菜单

<option>

定义下拉列表中的可选项

 

3.5. 图像

<img>

定义图像

 

3.6. 表格

<table>

定义表格

<tr>

表格的行

<td>

定义表格列

3.7. 样式

<style>

定义样式

<div>

定义文档中的块分区

<span>

用来组合文档中的行内元素

 

3.8. 元信息

<head>

定义关于文档的信息

<title>

定义文档的标题

<meta>

定义元信息

 

3.9. Programming

<script>

定义js脚本

3.10. 框架

<frame>

定义框架的子窗口

<frameset>

定义框架结构

<iframe>

定义内联框架

4. 其它

4.1. HTML事件属性

1). 窗口事件 (Window Events)

属性

值

描述

onload

脚本

在页面或图像加载完成后执行脚本

onunload

脚本

当文档被卸下时执行脚本

2). 表单元素事件 (Form Element Events)

属性

值

描述

onchange

脚本

当元素改变时执行脚本

onsubmit

脚本

当表单被提交时执行脚本

onreset

脚本

当表单被重置时执行脚本

onselect

脚本

当元素被选取时执行脚本

onblur

脚本

当元素失去焦点时执行脚本

onfocus

脚本

当元素获得焦点时执行脚本

3). 键盘事件 (Keyboard Events)

属性

值

描述

onkeydown

脚本

当键盘被按下时执行脚本

onkeypress

脚本

当键盘被按下后又松开时执行脚本

onkeyup

脚本

当键盘被松开时执行脚本

4). 鼠标事件 (Mouse Events)

属性

值

描述

onclick

脚本

当鼠标被单击时执行脚本

ondblclick

脚本

当鼠标被双击时执行脚本

onmousedown

脚本

当鼠标按钮被按下时执行脚本

onmousemove

脚本

当鼠标指针移动时执行脚本

onmouseout

脚本

当鼠标指针移出某元素时执行脚本

onmouseover

脚本

当鼠标指针悬停于某元素之上时执行脚本

onmouseup

脚本

当鼠标按钮被松开时执行脚本

4.2. HTML 颜色

颜色由红色、绿色、蓝色三个色相混合而成 RGB

1). 颜色值

用一个以#开头的十六进制数据来表示.

每个色相的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。

其表示一般是: #00 00 00到#FFFFFF

1). 颜色名称

一些常见的颜色被定义了一对应的名称, 可以通过其名称来表示. 如: red, blue等

4.3. HTML相关概念(了解)

1) XHTML:

l EXtensible HyperText Markup Language可扩展超文本标记语言

l 表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。

l XHTML是HTML向XML的一个过渡语言

2) DHTML:

l DHTML是Dynamic HTML的简称，就是动态的html

l 其实并不是一门新的语言，它只是HTML、CSS和JavaScript的一种集成

HTML 培训教程的更多相关文章

  1. 通达OA 小飞鱼工作流在线培训教程文件夹及意见征集

    最近通达OA技术交流群有不少朋友反映说表单设计这块 改动样式的问题,这块须要html和css的改动.本来最近正好要在工作流这块准备做一个系列的课程,都是基础的设置主要是给刚接触工作流的朋友用的,大家有 ...

  2. SOA体系结构基础培训教程-规范标准篇

    引子:本文是<SOA体系结构基础培训教程>第3章<SOA标准与规范>课件,版权所有,转载请注明出处. 随着SOA在业界的应用日益广泛,SOA的标准化问题也成为各界日益关注的焦点 ...

  3. SOA体系结构基础培训教程

    SOA体系结构基础培训教程-规范标准篇 引子:本文是<SOA体系结构基础培训教程>第3章<SOA标准与规范>课件,版权所有,转载请注明出处. 随着SOA在业界的应用日益广泛,S ...

  4. Linux视频培训教程

    很详尽的Linux培训教程,既包含日常工作常常要用到的实践及技巧,又包含Linux认证及系统管理及架构,讲的很不错.最关键的.这么具体,完整的教程还是免费的.花了点时间拿它整理了下. 第一部分: Li ...

  5. Oracle数据库入门到高薪培训教程（从Oracle 11g 到 Oracle 19c）

    一.Oracle数据库入门到高薪培训视频教程(从 Oracle11g 到 Oracle19c) 本套Oracle视频教程学习地址: https://edu.51cto.com/course/18034 ...

  6. MySQL数据库入门到高薪培训教程（从MySQL 5.7 到 MySQL 8.0）

    一.MySQL数据库入门到高薪培训视频教程(从MySQL5.7到MySQL8.0) 本套MySQL学习教程地址: https://edu.51cto.com/course/18034.html 为满足 ...

  7. Linux培训教程 linux磁盘分区详解

    在学习 Linux 的过程中,安装 Linux 是每一个初学者的第一个门槛.在这个过程中间,最大的困惑莫过于给硬盘进行分区.虽然,现在各种发行版本的 Linux 已经提供了友好的图形交互界面,但是很多 ...

  8. Linux培训教程　linux系统下分割大文件的方法

    在linux中分割大文件,比如一个5gb日志文件,需要把它分成多个小文件,分割后以利于普通的文本编辑器读取. 有时,需要传输20gb的大文件,Linux培训 教程件到另一台服务器,也需要把它分割成多个 ...

  9. Linux培训教程 Git在linux下的使用

       *初始化git仓库,使用gitinit命令 *添加文件到git仓库分两步: 1.使用git add filename ;可分多次使用,添加多个文件到暂存区 2.使用git commit -m “ ...

随机推荐

  1. Java多线程-线程的同步(同步代码块)

    对于同步,除了同步方法外,还可以使用同步代码块,有时候同步代码块会带来比同步方法更好的效果. 追其同步的根本的目的,是控制竞争资源的正确的访问,因此只要在访问竞争资源的时候保证同一时刻只能一个线程访问 ...

  2. mac下怎样删除冗余的环境变量？echo $PATH

    记下$PATH变量中冗余路径所处顺序,例如: /Users/zhang/.rvm/gems/ruby-2.1.2/bin:/Users/zhang/.rvm/gems/ruby-2.1.2@globa ...

  3. objc变量的获取

    [objc变量的获取] C++成员变量通过偏移来寻找,速度极快.But Objc中的变量通过方法调用来寻找,方法首先根据变量名,找到ivar_t,然后在ivar_t对象中取出偏移,再用此偏移来取值(这 ...

  4. libevent源码深度剖析十二

    libevent源码深度剖析十二 ——让libevent支持多线程 张亮 Libevent本身不是多线程安全的,在多核的时代,如何能充分利用CPU的能力呢,这一节来说说如何在多线程环境中使用libev ...

  5. Ionic01 简单介绍、环境搭建、创建项目、项目结构、创建组件、创建页面、子页面跳转

    1 Ionic 基本介绍 Ionic 是一款基于 Angular.Cordova 的强大的 HTML5 移动应用开发框架 , 可以快速创建一个跨平台的移动应用.可以快速开发移动 App.移动端 WEB ...

  6. Win10 pip安装pycocotools报错解决方法(cl: 命令行 error D8021 :无效的数值参数“/Wno-cpp”)

    参考: https://blog.csdn.net/chixia1785/article/details/80040172 https://blog.csdn.net/gxiaoyaya/articl ...

  7. 通过event事件来控制红绿灯通行车辆

    事件的初始值为False,所以最开始就是红灯,先模拟红绿灯的规律,设定为每两秒变换一次灯,然后再模拟车辆通行,通过事件来将两者的事件结合起来, 当事件为False时,为红灯,车辆处于等待状态,一直wa ...

  8. float在内存中的存取方法

    今天做了一些题目,想到float数据如何在内存中的形式.不知道一个浮点数是如何存成32位01字符串的.下面是查找的一些资料. 我们先通过java获取这些数的二进制表示. public class De ...

  9. Session.Abandon-Session.Clear-Session.RemoveAll

    System.Web.UI.Page.Session属性和System.Web.HttpContext.Session属性 都是System.Web.SessionState.HttpSessionS ...

  10. javascript总结16:数组array12

    1 Array 对象 作用:Array 对象用于在变量中存储多个值. 1.1 数组定义 var ary = new Array();//通过创建对象的方式创建数组 var ary1 = [];// 直 ...