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. Laravel 5.3 auth中间件底层实现详解(转)

    1. 注册认证中间件, 在文件 app/Http/Kernel.php 内完成: protected $routeMiddleware = [ 'auth' => \Illuminate\Aut ...

  2. Professional C# 6 and .NET Core 1.0 - Chapter 37 ADO.NET

    本文内容为转载,供学习研究.如有侵权,请联系作者删除. 转载请注明本文出处:Professional C# 6 and .NET Core 1.0 - 37 ADO.NET 译文:C# 6 与 .NE ...

  3. 安装gdb insight(6.8.1)

    如果之前安装过6.8或其它版本,请先删除以下目录 rm -rf /usr/local/insight rm -rf /usr/share/tcltk 如果之前设置过环境变量,也请删除 unset TC ...

  4. Zend Studio 10汉化方法

    选择Help菜单->Install New Software...在Work with框中复制此地址:http://download.eclipse.org/technology/babel/u ...

  5. cocos2D-x demo 的源码分析 #define ..##.. 的妙用.

    最近在看cocos2d-x 但不知道如何下手,于是先看一下他编译的完成的testcpp的源码.发现了下面一段程序 typedef CCLayer* (*NEWTESTFUNC)(); #define ...

  6. Yii2验证登录得User类

    Yii2中的  Class yii\web\User 是如果进行验证登录,如果我们使用User类验证登录会给我们减少很多麻烦.在此就拿Yii2中自带的登录功能进行说明. 配置.在应用配置文件compo ...

  7. VS2013中全局属性与局部属性的设置

    为了更好的体现程序与库的独立性,vc++2013 中库路径设置不再采用全局设置,就是说在每个工程中都可以有自己独立的库路径设置,当然你如果不设置,那默认就是vs2013自己的库路径.但是如果你需要用到 ...

  8. javascrip总结12:逻辑运算符与等号运算符

    1 逻辑运算符 逻辑运算的结果只有true 或者 false. 1.1 与&&: 两个表达式为true的时候,结果为true. 1.2 或|| 只要有一个表达式为true,结果为tru ...

  9. Python htmlTestRunner生成测试报告Demo

    #该代码段是ReadTxt_demo.py 的代码,用户读取txt 文件中的用户信息. #ReadTxt_demo.py def readTxt(filePath): fo = open(filePa ...

  10. MongoDB整理笔记の管理Replica Sets

    一.读写分离 从库能进行查询,这样可以分担主库的大量的查询请求.   1.先向主库中插入一条测试数据 [root@localhost bin]# ./mongo --port 28010 MongoD ...