Html简介1

1.什么是HTML和网页文件

HTML:是英文HyperText Markup Language(超文本标签语言)的缩写

以"<标签名>"表示标签的开始,以"</标签名>"表示标签的结束

成对标签又称之为容器,一对标签中还可以嵌套其它的标签

单独标签不需要与之配对的结束标签,又称之为空标签,例如<br>

一个HTML标签及标签中嵌套的内容就是网页中的一个"HTML元素"

属性设置的一般格式为:属性名=属性值,属性值部分可以用英文的双引号(")或单引号(‘)引起来,也可以不使用任何引号

标签名、属性名和属性值都是大小写不敏感的,但是要养成统一的大小写习惯

2.浏览器访问网页文档的方式

3.HTML规范与版本

谁来指定规范

--IETF

--W3C

正在使用的HTML版本

--HTML4.01(最终的版本)

--XHTML(将会替代HTML)

--HTML5

4.HTML的全局架构标签

<html></html>

<head></head>:头部元素

<body></body>:主体部分

5.<body>标签的属性

Text属性:用于设定整个网页中的文字颜色

link属性:用于设定一般超链接文本的显示颜色

alink属性:用于设定鼠标移动到超链接上时,超链接文本的显示颜色

vlink属性:用于设定访问过的超链接文本的显示颜色

background属性:用于设定背景墙纸所用的图像文件,可以是DIF或JPEG文件的绝对或相对路径

bgcolor属性:用于设定背景颜色,当已设定背景墙纸时,这个属性会失去作用,除非墙纸具有透明部分

leftmargin属性:设定网页显示画面与浏览器窗口左边沿的间隙,单位为像素

topmargin属性:设定网页显示画面与浏览器窗口上边沿的间隙,单位为像素

class、name、id、style等属性

6.文档类型定义

DTD语法:

<!DOCTYPE HTML PUBLIC "version name" "url">

HTML 指定文档类型名称

PUBLIC 表明所依据的DTD文件对任何人公开访问,而不是某个公司内部的规范文件

version name 指定该HTML版本的标识名称。例如,HTML4.0的标识名称为"-//W3C//DTD HTML 4.01 Transitional//EN"。

对于ISO标准的DTD以"ISO"三个字母开头,被改进的非ISO标准的DTD以加号"+"开头,未被改进的非ISO标准以减号"-"开头。

url 指定该HTML语言的定义规范文件在Internet上的位置,例如,http://www.w3c.org/TR?html4/loose.dtd

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

7.注释与特殊字符

用"<!-- 注释 -->"这种格式加入注释

特殊字符可以用数值和引用实体来表示,例如,$#169;\$copy;

8.格式标签

<p></p> :p标签对,表示段落

<br>:换行符

<nobr></nobr>:不换行符,防止浏览器把过长的内容自动换行

<blockquote></blockquote>:以缩进的方式在浏览器中显示

<center></center>:在水平方向上水平显示

<marquee></marquee>:以移动的方式显示marquee中的内容

其中的两个属性:direction="up,down,left,right":控制移动的方向

behavior="slide,scroll,alternate":控制移动的方式<slide:只移动一次,scroll:循环移动,alternate:折返的移动>

<dl></dl><dt></dt><dd></dd>:定义显示列表

<ol></ol>:定义带数字列表

<ul></ul>:定义带圆点列表

<li></li>:定义列表项

<pre></pre>:预格式化处理,显示所有的空格和换行

9.文本标签

<h1></h1>...<h6></h6>:以标题的方式显示,数字越大,字体越小

<b></b>:粗体

<i></i>:斜体

<u></u>:加下划线

<sub></sub>:下标表示

<sup></sup>:上标表示

<tt></tt>:以打印字风格显示的字体

<cite></cite>:以引用的方式显示字体

<em></em>:显示需要强调的字体:斜体加粗体

<strong></strong>:显示需要加重的字体:黑体加粗体

<font></font>:对字体,字号,颜色随意改变

其中三个属性:face:字体名称,若没有指定字体,则忽略这个属性,用浏览器默认字体

size:字号(-7~7),数字越小,字体越小或像素

color:字体的颜色

10.超链接标签

超链接标签:<a href="">link</a>

href:指定url:统一资源定位器

<a href="mailto:[email protected]?subject=test"> 发邮件 </a>

target:"_blank"

定位到网页中的某一处<a name="mark">定位</a>

<a href="xxx.html#mark"></a>

<a href="#">...</a>与<a href="">...</a>的区别:""会打开默认目录,"#"什么也不做

11.url(uniform resource locator):统一资源定位器

URL的基本组成:协议、主机名、端口号、资源名

相对url:"a.html","./a.html","../../a.html","a.html"

为url指定参数:a.html?name=wzg&password=123

带有定位标记的url:a.html#mark

mailto:[email protected]?subject=Feedback&body=how%20are%20you!

URL编码

规则

将空格转换为加号(+)

对0-9、a-z、A-Z之间的字符保持不变

对于所有其他的字符,用这个字符的当前字符集编码在内存中的十六进制格式表示,并在每个字节前加上一个百分号(%).

对于空格也可以直接使用其十六进制编码方式,即用%20表示,而不是将它转换成加号(+)

说明

如果确信URL串的特殊字符没有引起使用上的歧义或冲突,你也可以对这些字符不进行编码,而是直接传递给服务器

如果URL串中的特殊字符可能会产生歧义或冲突,则必须对这些特殊字符进行URL编码

12.图像标签

<img src=""></img>

还可以设置alt:图像无法加载时,显示alt设置的文本、align:设置对其方式、border:设置边框、width:宽度、height:高度等属性

<img>标签的显示过程

没有真正加载图像数据,而是通过src指定图像的路径,把请求发送给服务器,服务器返回数据,既可以读取一个图像,也可以动态产生数据

分析:一个WEB服务器是如何借助<img>标签来收集其他web站点的页面访问次数的?

<hr>标签:水平线,可以设置size:粗细、color:颜色、width:宽度和noshade:无阴影

13.图像地图

图像超链接

格式为:<a href="url"><img src="#"></img></a>

什么是图像地图

把一幅图像分成多个区域,每个区域指向不同的URL地址。

怎样产生一个图像地图

1)首先必须定义出图像上的各热点区域的形状、位置坐标、及其指向的URL地址等信息,这个过程叫图像热点映射。

图像热点映射需要使用<map name="mapName"></map>标签对进行说明,其中的name属性为该图像热点映射指定了一个名称

2)图像热点映射中的各个区域用<area>标签说明,<area>标签的格式为:<area shape="形状" coords="坐标" href="URL">

href部分也可以用nohref替换,表示在该区域单击鼠标无效。<area>标签还可以有一个target属性,用来指明浏览器在哪个窗口或帧中显示href属性所指向的网页资源。

3)定义好了图像热点映射后,接着就要在<img>图像标签中增加一个名为usemap的属性设置,usemap属性指定该图像被用作图像地图,其设置值为所使用的图像热点映射名称,

格式为:在<img>标签的name属性设置值前多加一个"#"字符。例如,<img src="china.jpg" usemap="#mapName"></img>

shape属性的设置说明

rect:定义一个矩形区域,coords属性设置值为矩形的左上角、右下角的坐标,各个坐标值之间用逗号分开;

poly:定义一个多边形区域,coords属性设置值为多边形各顶点的坐标值

circle:定义一个圆形区域,coords属性设置为圆心坐标及半径,前两个参数分别为圆心的横、纵坐标,第三个参数为半径。

时间: 2024-10-05 03:58:04

Html简介1的相关文章

Android网络通讯简介

网络通信应该包含三部分的内容:发送方.接收方.协议栈.发送方和接收方是参与通信的主体,协议栈是发送方和接收方进行通信的契约.按照服务类型,网络通信可分为面向连接和无连接的方式.面向连接是在通信前建立通信链路,而通信结束后释放该链路.无连接的方式则不需要在通信前建立通信连接,这种方式不保证传输的质量. Android提供了多种网络通信的方式,如Java中提供的网络编程,在Android中都提供了支持.Android中常用的网络编程方式如下: 针对TCP/IP协议的Socket和ServerSock

微信红包的架构设计简介

@来源于QCon某高可用架构群整理,整理朱玉华. 背景:有某个朋友在朋友圈咨询微信红包的架构,于是乎有了下面的文字(有误请提出,谢谢) 概况:2014年微信红包使用数据库硬抗整个流量,2015年使用cache抗流量. 微信的金额什么时候算? 答:微信金额是拆的时候实时算出来,不是预先分配的,采用的是纯内存计算,不需要预算空间存储.. 采取实时计算金额的考虑:预算需要占存储,实时效率很高,预算才效率低. 实时性:为什么明明抢到红包,点开后发现没有? 答:2014年的红包一点开就知道金额,分两次操作

JSON 简介

ylbtech-JSON: JSON 简介 JSON:JavaScript Object Notation(JavaScript 对象表示法) JSON是存储和交换文本信息的语法,类似 XML. JSON 比 XML 更小.更快.更易解析. JSON 实例 { "employee":[ {"firstName":"John","lastName":"Doe"}, {"firstName"

Docker简介

Docker简介 什么是Docker: 正所谓Docker的英文本意为"搬运工",所以在我们的世界里,可以理解为Docker搬运的是装满任意类型的APP的集装箱,开发者可以通过Docker将APP变成一种标准化的.可移动植的.自动管理的组件.它用一种新的方式实现了轻量级的虚拟机,专业术语成为应用容器(Application Container) Docker的优势: 1.利用率高 ·Docker对系统资源的利用率很高,一台主机可以同时运行数千个Docker容器 2.可以快速的交付应用程

kafka入门:简介、使用场景、设计原理、主要配置及集群搭建(转)

问题导读: 1.zookeeper在kafka的作用是什么? 2.kafka中几乎不允许对消息进行"随机读写"的原因是什么? 3.kafka集群consumer和producer状态信息是如何保存的? 4.partitions设计的目的的根本原因是什么? 一.入门 1.简介 Kafka is a distributed,partitioned,replicated commit logservice.它提供了类似于JMS的特性,但是在设计实现上完全不同,此外它并不是JMS规范的实现.k

Quartz.NET简介及入门指南

Quartz.NET简介 Quartz.NET是一个功能完备的开源调度系统,从最小的应用到大规模的企业系统皆可适用. Quartz.NET是一个纯净的用C#语言编写的.NET类库,是对非常流行的JAVA开源调度框架 Quartz 的移植. 入门指南 本入门指南包括以下内容: 下载 Quartz.NET 安装 Quartz.NET 根据你的特定项目配置 Quartz 启动一个样例程序 下载和安装 你可以下载 zip 文件或使用 Nuget 程序包.Nuget 程序包只包含 Quartz.NET 运

ASP.Net简介、IIS服务器和Repeater重复器

简介:ASP.NET - 制作网站应用程序的技术 WebForm -出来时间比较早,敏捷.便捷开发,封装一些控件,慢慢发现一些控件做的挺好,真正使用没有那么敏捷 MVC -出来时间比较晚 什么东西? winform 界面 - 后台 - 数据库 共同组合出来的程序:ASP.NET 界面(HTML+CSS+JS) - 后台 - 数据库 运行机制:winform - 程序是安装在用户的电脑上,程序是运行在用户电脑上的.net Framework框架上的 ASP.NET - 通过浏览器向服务器发送请求,

CloudFoundry in 1 Box简介:PCF-Dev篇

在<CloudFoundry in 1 Box简介:Bosh-lite篇>我们介绍了Bosh-lite的架构和部署.在本篇中,我们将详细描述另一个CloudFoundry in 1 Box解决方案PCF-Dev. 1PCF-dev简介 PCF是Pivotal发行的Cloud Foundry商业版,PCF-Dev原名MicroPCF,是Pivotal为PCF的应用开发人员准备的一款App单虚拟机版的CloudFoundry.但是,麻雀虽小,五脏俱全.PCF-Dev虽然可以在仅仅一台虚拟式上即可运

1、elasticsearch简介

1.elasticsearch简介 中文帮助文档地址:http://es.xiaoleilu.com/ • Elasticsearch是一个基于Lucene的实时的分布式搜索和分析引擎.设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便.基于RESTful接口. – 普通请求是...get?a=1 – rest请求....get/a/1 • Elasticsearch的用户 – GitHub,Wikipedia,ebay等... • ES VS Solr – 接口 • 类似web

CDH 1、CDH简介

1.Apache Hadoop 不足之处 • 版本管理混乱 • 部署过程繁琐.升级过程复杂 • 兼容性差 • 安全性低 2.Hadoop 发行版 • Apache Hadoop • Cloudera’s Distribution Including Apache Hadoop(CDH) • Hortonworks Data Platform (HDP) • MapR • EMR • … 3.CDH能解决哪些问题 • 1000台服务器的集群,最少要花费多长时间来搭建好Hadoop集群,包括Hive