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. 4-3 线程安全性-原子性-synchronized

    原子性它提供了互斥访问,同一时刻只能有一个线程来对它进行操作.能保证同一时刻只有一个线程来对其进行操作的,除了Atomic包之外,还有锁.JDK提供锁主要分两种,synchronized是一个Java ...

  2. google/dense_hash_map

    这个库使用时需要注意的地方: 1.在插入数据之前,需要先调用set_empty_key()设置一个空Key,Key的值可以为任意符合类型的.但请注意之后插入的Key不能和空Key相同,否则会abort ...

  3. codeforce 459 DIV2 D题

    题意   在一个DAG上面有N个点M条边,每一条边上都有一个小写字母.两个人Max and Lucas 每个人一颗棋子,两个人轮流行棋,当前这一步选择的路上面的字母必须大于等于上一步路上面的字母,当轮 ...

  4. JS事件冒泡和事件捕获的详解

    在学校,听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样,只依稀记得IE使用的是事件冒泡,其他浏览器则是事件捕获.当时的我,把它当成IE浏览器兼容问题,所以没有深究(IE8以下版本的浏览器已基本退出 ...

  5. orcad找不到dll

    如果运行Capture.exe找不到cdn_sfl401as.dll,如果运行allegro.exe找不到cnlib.dll,(上面俩个库文件都在C:/Cadence/SPB_16.3/tools/b ...

  6. （转）菜鸟去重复之Sql

    原文地址:http://www.cnblogs.com/fatbird/p/Sql-Remove-duplicate.html 前言 本文主要是总结平时工作学习中遇到的使用Sql Server的去除重 ...

  7. wc.exe C++实现

    目录 Github项目地址 PSP表格 解题思路 设计实现过程 测试运行 项目小结 Github项目地址 wc-project PSP表格 PSP2.1 Personal Software Proce ...

  8. JAVA自动装箱拆箱与常量池

    java 自动装箱与拆箱 这个是jdk1.5以后才引入的新的内容,作为秉承发表是最好的记忆,毅然决定还是用一篇博客来代替我的记忆: java语言规范中说道:在许多情况下包装与解包装是由编译器自行完成的 ...

  9. div高度自适应窗口高度布局

    给body和html都设置height:100%:然后子元素用百分比设置高度

  10. DDD模式

    http://www.cnblogs.com/landeanfen/p/4816706.html https://www.cnblogs.com/malaoko/p/8732552.html