今天开始系统回顾总结HTML,记录文章以后再选择性截取做课程ppt,计划时间为一周,当然以后会不断完善的。废话少说,直接上干货。。。
简介:
①超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。
②您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析
③HTML 不是一种编程语言,而是一种标记语言 (markup language),标记语言是一套标记标签 (markup tag),HTML 使用标记标签来描述网页
什么是标签?
HTMl是标记语言,也就是一套标记标签,标记标签通常也被称为HTML 标签 (HTML tag)
标签一般是成对出现的,包括开始标签和结束标签,也叫开放标签和闭合标签。(这里拓展下单标签和双标签)
双标签:
<html><head><title><body><table><tr><td><span><p><form><h1><h2><h3><h4><h5><h6><object><style><b><u><strong><i><div><a><script><center>
单标签:
<br><hr><img><input><param><meta><link>
【我在下一篇文章http://570109268.iteye.com/blog/2405542里总结了HTML标签】
HTML编辑器:
之前用过的代码编辑器有pycharm,webstorm,Sublime Text3(Windows),这里我推荐使用webstorm,优点不多说
HTML基础:
标题---通过 <h1> - <h6> 等标签进行定义
段落---通过 <p> 标签进行定义
链接---通过 <a> 标签进行定义
图像----通过 <img> 标签进行定义
<img src="w3school.jpg" width="104" height="142" />
注意:图像的名称和尺寸是以属性的形式提供的
HTML元素:
①大多数 HTML 元素可以嵌套(可以包含其他 HTML 元素)
②不要忘记结束标签,即使忘记了使用结束标签,大多数浏览器也会正确地显示 HTML。但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。而且未来的HTML版本不允许省略闭合标签
③空元素:空元素(没有内容的HTML元素)是在开始标签中关闭的,例<br> 标签定义换行,即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。
④小写标签:HTML 标签对大小写不敏感:<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。
因为万维网联盟(W3C)在 HTML 4 中推荐使用小写,并且在未来 (X)HTML 版本中强制使用小写。
HTML属性:
属性总是以名称 / 值对的形式出现的,并且在开始标签中规定
具体我在后面文章http://570109268.iteye.com/admin/blogs/2405543里做了详解
HTML颜色值:
具体我在后面文章http://570109268.iteye.com/admin/blogs/2409540里做了详解
HTML字符集:
具体我在后面文章http://570109268.iteye.com/blog/2409554里做了详解
HTML文本格式化:
具体我在后面文章http://570109268.iteye.com/blog/2409587里做了详解
HTML框架:
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。
【使用框架的坏处:】
①开发人员必须同时跟踪更多的HTML文档
②很难打印整张页面
【框架结构标签:】
①框架结构标签(<frameset>)定义如何将窗口分割为框架
②每个 frameset 定义了一系列行或列
③rows/columns 的值规定了每行或每列占据屏幕的面积
<frameset cols="120,*"> <frame src="http://www.w3school.com.cn/example/html/html_contents.html"> <frame src="http://www.w3school.com.cn/example/html/frame_a.html" name="showframe"> </frameset>
<iframe>内联框架:
用于在网页内显示网页
(1)Iframe - 设置高度和宽度
height 和 width 属性用于规定 iframe 的高度和宽度。
属性值的默认单位是像素,但也可以用百分比来设定(比如 "80%")
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
(2)Iframe - 删除边框
frameborder 属性规定是否显示 iframe 周围的边框。
设置属性值为 "0" 就可以移除边框:
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
(3)使用 iframe 作为链接的目标
iframe 可用作链接的目标(target)。
链接的 target 属性必须引用 iframe 的 name 属性:
<iframe src="http://www.w3school.com.cn/example/html/demo_iframe.html" name="iframe_a"> </iframe> <p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p> <p><b>注释:</b>由于链接的目标匹配 iframe 的名称,所以链接会在 iframe 中打开。</p>
HTML脚本:
①<script> 标签用于定义客户端脚本,比如 JavaScript
②<noscript> 标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。只有在浏览器不支持脚本或者禁用脚本时,才会显示 noscript 元素中的内容
【如何应付老式的浏览器】
如果浏览器压根没法识别 <script> 标签,那么 <script> 标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生,你应该将脚本隐藏在注释标签当中。那些老的浏览器(无法识别 <script> 标签的浏览器)将忽略这些注释,所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们,即使代码被嵌套在注释标签内。
例子:
<script type="text/javascript"> <!-- document.write("Hello World!") //--> </script>
<script type="text/vbscript"> <!-- document.write("Hello World!") '--> </script>
【拓展】
VBScript 是一种脚本语言,脚本语言是一种轻量级的编程语言
VBScript 是微软的编程语言 Visual Basic 的轻量级的版本,这个以后有机会再了解下
HTML头部元素:
(1)<head>元素:所有头部元素的容器
<head> 内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。
以下标签都可以添加到 head 部分:<title>、<base>、<link>、<meta>、<script> 以及 <style>
(2)<title>元素:定义文档的标题
title 元素在所有 HTML/XHTML 文档中都是必需的。
title 元素能够:定义浏览器工具栏中的标题;提供页面被添加到收藏夹时显示的标题;显示在搜索引擎结果中的页面标题
(3)<base> 元素:为页面上的所有链接规定默认地址或默认目标(target)
(4)<link> 元素:定义文档与外部资源之间的关系,常用于连接外部样式表
(5)<style> 元素:为 HTML 文档定义样式信息,常用于定义内部样式表
(6)<meta> 元素:不会显示在页面,机器可读性
提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。
典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<meta> 标签始终位于 head 元素中。
元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务
页面的描述:
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
页面的关键词:
<meta name="keywords" content="HTML, CSS, XML" />
【HTML 头部元素】
<head> | 定义关于文档的信息。 |
<title> | 定义文档标题。 |
<base> | 定义页面上所有链接的默认地址或默认目标。 |
<link> | 定义文档与外部资源之间的关系。 |
<meta> | 定义关于 HTML 文档的元数据。 |
<script> | 定义客户端脚本。 |
<style> | 定义文档的样式信息。 |
HTML实体字符:
在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)
【优缺点:】
优点:使用实体名而不是数字的好处是,名称易于记忆
缺点:浏览器也许并不支持所有实体名称(对实体数字的支持却很好)
具体详解我在后面文章里做了总结
HTML的URL:
URL 也被称为网址,可以由单词组成,比如 “w3school.com.cn”,或者是因特网协议(IP)地址:192.168.1.253。大多数人在网上冲浪时,会键入网址的域名,因为名称比数字容易记忆
网址,比如 http://www.w3school.com.cn/html/index.asp,遵守以下的语法规则:
scheme://host.domain:port/path/filename
解释:
scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机(http 的默认主机是 www)
domain - 定义因特网域名,比如 w3school.com.cn
:port - 定义主机上的端口号(http 的默认端口号是 80)
path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。
filename - 定义文档/资源的名称
【URL Schemes(格式)】
以下是其中一些最流行的 scheme(格式):
http | 超文本传输协议 | 以 http:// 开头的普通网页。不加密。 |
https | 安全超文本传输协议 | 安全网页。加密所有信息交换。 |
ftp | 文件传输协议 | 用于将文件下载或上传至网站。 |
file | 您计算机上的文件。 |
URL字符编码:
URL 编码会将字符转换为可通过因特网传输的格式。URL 只能使用 ASCII 字符集来通过因特网进行发送。
由于 URL 常常会包含 ASCII 集合之外的字符,URL 必须转换为有效的 ASCII 格式。
URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。
URL 不能包含空格。URL 编码通常使用 + 来替换空格。
具体详解我在后面文章http://570109268.iteye.com/blog/2409563里做了总结
HTML Web Server(网络服务器)
【1】托管网站,在自己的服务器上托管网站始终是一个选项。有几点需要考虑:
硬件支出
如果要运行“真正”的网站,您不得不购买强大的服务器硬件。不要指望低价的 PC 能够应付这些工作。您还需要稳定的(一天 24 小时)高速连接。
软件支出
请记住,服务器授权通常比客户端授权更昂贵。同时请注意,服务器授权也许有用户数量限制。
人工费
不要指望低廉的人工费用。您必须安装自己的硬件和软件。您同时要处理漏洞和病毒,以确保您的服务器时刻正常地运行于一个“任何事都可能发生”的环境中。
【2】使用因特网服务提供商(ISP)
从 ISP 租用服务器也很常见。
大多数小公司会把网站存放到由 ISP 提供的服务器上。其优势有以下几点:
①连接速度:大多数 ISP 都拥有连接因特网的高速连接。
②强大的硬件:ISP 的 web 服务器通常强大到能够由若干网站分享资源。您还要看一下 ISP 是否提供高效的负载平衡,以及必要的备份服务器。
③安全性和可靠性:ISP 是网站托管方面的专家。他们应该提供 99% 以上的在线时间,最新的软件补丁,以及最好的病毒防护
【3】选择 ISP 时的注意事项
①24 小时支持
②每日备份
③流量
④带宽或内容限制
⑤E-mail 功能
⑥数据库访问
具体我在后面文章http://570109268.iteye.com/blog/2409658里做了详解
HTML 颜色
①颜色值:颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)
每种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)
②颜色名:大多数的浏览器都支持颜色名集合
【提示】:仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是:aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。
如果需要使用其它的颜色,需要使用十六进制的颜色值
③Web安全色:数年以前,当大多数计算机仅支持 256 种颜色的时候,一系列 216 种 Web 安全色作为 Web 标准被建议使用
其中的原因是,微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色(双方大约各使用 20 种)
具体我在后面文章http://570109268.iteye.com/blog/2409540里做了总结
HTML文档类型:
<!DOCTYPE> 不是 HTML 标签
作用:为浏览器提供一项声明,即 HTML 是用什么版本编写的
HTML 版本
从 Web 诞生早期至今,已经发展出多个 HTML 版本:
HTML | 1991 |
HTML+ | 1993 |
HTML 2.0 | 1995 |
HTML 3.2 | 1997 |
HTML 4.01 | 1999 |
XHTML 1.0 | 2000 |
HTML5 | 2012 |
XHTML5 | 2013 |
【常用的声明】
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML详解:
通俗理解就是:以 XML 格式编写的 HTML,关于XML日后再做介绍
【官方解析】
XHTML是2001年发布的W3C推荐标准,指的是可扩展超文本标记语言;与 HTML 4.01 几乎是相同的;是更严格更纯净的 HTML 版本;以 XML 应用的方式定义的 HTML
【兼容】
目前得到所有主流浏览器的支持
【由来】
今日的科技界存在一些不同的浏览器技术。其中一些在计算机上运行,而另一些可能在移动电话或其他小型设备上运行。小型设备往往缺乏解释“糟糕”的标记语言的资源和能力。
所以 - 通过结合 XML 和 HTML 的长处,开发出了 XHTML。XHTML 是作为 XML 被重新设计的 HTML
【与HTML区别】
①文档结构
XHTML DOCTYPE 是强制性的;<html> 中的 XML namespace 属性是强制性的;<html>、<head>、<title> 以及 <body> 也是强制性的
②元素语法
元素必须正确嵌套;元素必须始终关闭;元素必须小写;文档必须有一个根元素
③属性语法
属性必须使用小写;属性值必须用引号包围;属性最小化也是禁止的
【如何从 HTML 转换到 XHTML】
向每张页面的第一行添加 XHTML <!DOCTYPE>;向每张页面的 html 元素添加 xmlns 属性;把所有元素名改为小写;关闭所有空元素;把所有属性名改为小写;为所有属性值加引号
【元素语法规则举例】
XHTML 元素必须小写
这是错误的:
<BODY> <P>This is a paragraph</P> </BODY>
这是正确的:
<body> <p>This is a paragraph</p> </body>
【属性语法规则举例】
禁止属性简写
这是错误的:
<input checked> <input readonly> <input disabled> <option selected>
这是正确的:
<input checked="checked" /> <input readonly="readonly" /> <input disabled="disabled" /> <option selected="selected" />
H5详解:
(具体我在后面文章http://570109268.iteye.com/admin/blogs/2409687里做了总结)
HTML5 是最新的 HTML 标准,拥有新的语义、图形以及多媒体元素
【优势】
①提供的新元素和新的 API 简化了 web 应用程序的搭建;
②跨平台,被设计为在不同类型的硬件(PC、平板、手机、电视机等等)之上运行
【注意】
①H5默认的字符编码是UTF-8;
【新特性】
HTML5 的一些最有趣的新特性:
①新的语义元素,比如 <header>, <footer>, <article>, and <section>;
②新的表单控件,比如数字、日期、时间、日历和滑块;
③强大的图像支持(借由 <canvas> 和 <svg>);
④强大的多媒体支持(借由 <video> 和 <audio>);
⑤强大的新 API,比如用本地存储取代 cookie
【H5被删元素】
以下 HTML 4.01 元素已从 HTML5 中删除:
<acronym>,<applet>,<basefont>,<big>,<center>,<dir>,<font>,<frame>,<frameset>,<noframes>,<strike>,<tt>
相关推荐
在IT行业中,尤其是在移动应用和Web开发领域,能够利用HTML来调用设备的后置摄像头进行二维码扫描是一项非常实用的技术。这项技术使得开发者无需依赖原生应用,即可为用户提供便捷的二维码识别服务,大大简化了跨...
众里寻即千百度、蓦然回首却在灯火阑珊处的QQ在线客服代码。把其中代码更换成你的代码就可以使用。请将其中的网址更换成:;=你的QQ号&site=qq&menu=yes">你的QQ号:51" alt="点击这里给我发消息" title="点击这里给我...
在HTML页面中,我们经常需要将表格数据导出为Excel文件,以便用户可以方便地存储和处理这些数据。传统的做法是使用`document.execCommand('saveAs')`方法,但这个方法在某些现代浏览器中已被废弃,因此需要寻找替代...
很早以前我就想过将一些常用的HTML Help帮助信息(也就是CHM文件)集成到MSDN库中,但一直都没有找到好的办法。...真是梦里寻她千百度,蓦然回首她就在网络某一处 ...... 关键字:help,chm,msdn,帮助
1. **HTML登录模板**:HTML(HyperText Markup Language)是网页开发的基础语言,用于构建网页结构。登录模板是预先设计好的HTML代码,包含登录表单、输入字段、提交按钮等元素,可以快速构建出一个标准的登录界面。...
回首页按钮 #### 代码示例 ```html 首页" onClick="HomeButton()"> <script>function HomeButton(){location.href='http://www.winliuxq.com';} ``` #### 解析 - **功能**:点击该按钮将用户重定向至指定的首页...
SmartSoftHelp 6.0 SmartSoftHelp 极简,极速,极致提高程序员内涵,改变编程习惯,智慧与效率的化身!...10.高复用功能代码DLL公共类库(常见功能经典收藏)蓦然回首魔法智能,智慧,效率,经验的产物!
淘宝.html
6. **回首页按钮**:这个按钮将用户重定向到首页,通常会设置为主页URL。 ```html ()" type="button" value="首页" /> function HomeButton(){location.href=http://} ``` 7. **弹出警告框**:使用`window.alert...
回首页按钮 - **功能**: 直接返回网站的首页。 - **示例代码**: ```html 首页" onClick="HomeButton()"> function HomeButton() { location.href = "http://www.winliuxq.com"; } ``` - **解释**: 通过`...
详细可参考文件
回首 Web 前端开发的过去和现在,对于我们岗位的称呼也相应地不断发生着改变:页面小工、切图小工、美工、页面制作,再到现在的 “ 前端制作”;由于 html 与 CSS 入门起点较低,小公司里的“美工们” 也许至今还干...
回首过去的几年,由于我国经济的高速发展,各个企业对人才的需求逐年增 长,同时,社会上就业压力不断增大,我们需要一个良好的平台来解决这一问 题。为了解决社会上这种供需问题,本人开发了基于 PHP 的招聘系统,...
程序中需要html转pdf,程序是docker容器的 ①下载或构建需要转化为PDF或者图像的HTML文档 ②通过工具运行该HTML文档 例如: wkhtmltopdf 【选项】【网页地址/html文档】 [转化完成的PDF文件】 描述: 【】代表此...
// 鼠标离开时,收缩回首张图片 $('li:not(:first)', this).stop().slideUp(500); } ); }); ``` 这段代码会监听`#image-gallery`元素的`hover`事件,并在鼠标进入时展开所有图片,鼠标离开时只保留首张图片显示...
首先,我们有`index.html`,这是整个网页的主体文件,包含了HTML标记语言,定义了页面结构和内容。在这个404页面中,`index.html`可能包含了错误信息的文本、动态鳄鱼图像以及相关的交互元素。HTML5引入了许多新特性...
本篇文章将详细探讨如何使用JavaScript库`table2excel`实现在前端页面上直接将HTML表格转换为Excel并进行下载。 首先,`table2excel`是一个轻量级的JavaScript库,它允许用户通过简单的API调用来将HTML表格转换为...
而`add_do.php`接收这些POST数据,插入到MySQL的联系人表中,然后可能重定向回首页显示更新后的列表。 `del.php`、`edit.php`、`edit_do.php`对应联系人的删除和编辑功能。`del.php`接收联系人ID,删除对应的记录;...
这个压缩包可能包括HTML、CSS、JavaScript和其他图像文件,用于构建这样一个互动的前端界面。 首先,我们要理解“登录HTML”这个标签。HTML(HyperText Markup Language)是一种用于创建网页的标准标记语言。在登录...