一)HTML介绍

它是一个超文本标记语言，静态页面。

所谓的‘超文本’就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

主要的结构为包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

我们需要通过浏览器来展示HTML内容。

好下面我们先介绍下浏览器：

五大浏览器：IE【IE6及以下版本（IE7及以上）】、FF(FireFox)、Chrome、Opera、Safari(Apple)

搜狗、腾讯TT、遨游（Maxthon） 、360浏览器、……(不是一个级别)

浏览器就是解释和执行HTML源码的工具。

注意：同样的一个IE浏览器，不同的版本也会展现出不同的效果，那么在同一台电脑上是不让装多个IE版本的。

扩展：

如果学UI（界面层）的人一定会学习HTML的，因为你需要浏览器展示漂亮的界面。

htm、html都是静态页面，asp、aspx、jsp、php等都是动态页面。

二）接下来我们说下HTML和XML的联系、区别

目前有挺多人容易混淆HTML和XML的，因为它俩比较相似，现在我们总结一下。

html与xml相同点：

（1）都是标记语言、注释都是：<!--    内容、内容    -->。

（2）用途当然是用于传输数据和展示信息了。

（3）都可以通过CSS来改变外观。

html与xml的不同点：

（1）HTML（Hyper Text Markup Language）是超文本指标语言，XML是（ExtentsibleMarkupLanguage）可扩展标记语言。

（2）xml比html语法要求更严格，有开始标签必须有结束标签、大小写一致、属性用双引号等。

（3）HTML的标签不是所有的都需要成对出现的。

（4）HTML侧重于网页数据表现形式的定义和描述，xml侧重于网页数据存储。

（5）XHTML（或是html）只能用于web（也就是网页中），而xml则不同，它是信息交换的标准语言，他可以跨平台进行信息的交流，比如电脑与手机。

（6）xml的标记灵活多变，你可以起名字比如<student>学生</student>，但是XHTML和html是不行的，他两是写给浏览器看的，自己定义的就不会识别，所以<xx></xx>这样的符号是约定，比如<a href= http://www.baidu.com>百度</a>，就是一个连接百度的超链接标记。

xhtml：html的最高版本是4.01，现在基本上被XHTML（可拓展超文本指标语言）所代替，xhtml的出现主要是为了向xml过度。

dhtml： Dynamic HTML的简称，就是动态的html。 HTML、样式表和JavaScript 的组合（现在都是dhtml）。

 三）接下来我们再来说下html常用标签：

h标签（标题），HTML定义了<h1></h1>到<h6></h6>六个h标签，分别表示不同大小的字体。h1最大，h6最小。

当搜索引擎搜索的时候，用h标签搜索的概率大于用css方法修饰标题的文章。

<br/>只是回车，<p>是分段。<p>前后会有比较大的空白，而<br/>则没有。

建议大家把开始结束写全<p>  </p>

<center>川川是狗狗</center>居中显示.

<b>a</b>粗体，推荐<strong>。<i>b</i>斜体。<u>c</u>带下划线。<em>强调，斜体</em>。

当搜索引擎搜索的时候，它会认为放在strong里面的内容更重要。

<font></font>字体标签，<font color=“red“ size=“7” face=“隶书”>红色</font>。color（设置颜色）  size（1-7）  face（设置字体,设置字体是注意用户计算机中必须有该字体才能正常显示）

<hr/>  color  size（厚度）  width（长度）  align=left/center/right （默认为剧中显示）

<pre> 预格式化  保持本色&nbsp

图1  让分割线立起来

1.接下来介绍下颜色体系的内容：

自己搭配颜色：

2.请看下面一道题目：

图2 转译符

四）超链接URL的相关内容

URL：URL表示资源在网络中的地址，比如 http://127.0.0.1:80/html/pages/a.htm、ftp://192.168.88.128/b.zip。还有URI的概念，比URL大，有的类中使用URI这种说法，可以暂时看成和URL一样就行。

超级链接：<a href="http：//www.">XXX </a>。

URL:统一资源定位符

URI:统一资源标识符。

图3 target

在新的选项卡中打开，需要设置：

图4 在新选项卡中打开

扩展:

a标签的一些常用属性：href、title、target、name（锚标记时用）。接下来会讲到锚。

<a>中还可以嵌套图片，这样就是点击图片打开连接

图5 点击图像到链接

图6 去掉边框

现在要是链到内部自己的网站我该怎么写呢？

只要在同一个目录下，可以直接写文件名。

在a文件夹下的话就写a文件夹下的文件名，如果要是在它父目录下的话，就写..文件名。

相对URL：相对URL表示相对于当前文档的资源，“/”表示网站根目录，“../”表示父目录，“http://www.cnblogs.com/”表示父目录的父目录，“./”或者不写任何斜线表示相对于当前路径的目录。站内引用最好用相对URL，这样域名改变了、目录改变了都不受影响。

五）相对路径和绝对路径的区别

在HTML里只要涉及文件的地方(如超级链接、图片等)就会涉及绝对路径与相对路径的概念,

绝对路径是指文件在硬盘上真正存在的路径，例如“bg.jpg”这个图片是存放在硬盘的“E:\book\网页布局代码\第2章”目录下，那么 “bg.jpg”这个图片的绝对路径就是“E:\book\网页布\代码\第2章\bg.jpg"。那么如果要使用绝对路径指定网页的背景图片就应该使用 以下语句：

<body backround="E:\book\网页布局\代码\第2章\bg.jpg" > 

相对路径是指通常在网页里指定文件时，都会选择使用相对路径。所谓相对路径，就是相对于自己的目标文件位置，

例如上面的例子，“s1.htm” 文件里引用了“bg.jpg”图片，由于“bg.jpg”图片相对于“s1.htm”来说，是在同一个目录的，那么要在“s1.htm”文件里使用以下代 码后，只要这两个文件的相对位置没有变(也就是说还是在同一个目录内)，那么无论上传到Web服务器的哪个位置，在浏览器里都能正确地显示图片。

      <body background="bg.jpg">
再举一个例子，假设“s1.htm”文件所在目录为“E:\book\网页布局\代码\第2章”，而“bg.jpg”图片所在目录为“E:\book\网页 布局\代码\第2章\img”，那么“bg.jpg”图片相对于“s1.htm”文件来说，是在其所在目录的“img”子目录里，则引用图片的语句应该 为：
      <body background="img/bg.jpg">  
区别：相对路径使用“/”字符作为目录的分隔字符，而绝对路径可以使用“\”或“/”字符作为目录的分隔字符。由于“img”目录是“第2章”目录下的子目录，因此在“img”前不用再加上“/”字符。

在相对路径里常使用“../”来表示上一级目录。如果有多个上一级目录，可以使用多个“../”，例如“http://www.cnblogs.com/”代表上上级目录。假设 “s1.htm”文件所在目录为“E:\book\网页布局\代码\第2章”，而“bg.jpg”图片所在目录为“E:\book\网页布局\代码”，那 么“bg.jpg”图片相对于“s1.htm”文件来说，是在其所在目录的上级目录里，则引用图片的语句应该为：
      <body background="../bg.jpg">  
 
  再举一个例子，假设“s1.htm”文件所在目录为“E:\book\网页布局\代码\第2章”，而“bg.jpg”图片所在目录为“E:\book\网 页布局\代码\img”，那么“bg.jpg”图片相对于“s1.htm”文件来说，是在其所在目录的上级目录里的“img”子目录里，则引用图片的语句 应该为：
      <body background="../img/bg.jpg">  

六）锚的作用

1.什么是锚？

锚可以指向网络上的任何资源：HTML页面，图像，声音，影片等等。

2.HTML中的锚是哪个？

 HTML使用锚标签（<a>）来创建一个连接到其他文件的链接。

3.创建锚的语法？

第一步创建定位标记：

（1）用<a>标记的name属性的值来确定 定位标记名称。格式为：
<a name="定位标记名">
属性 name 用于创建一个命名的锚。当使用一个命名的锚，我们可以创建一个直接跳转到页面的指
定部分的链接，而不需要让读者通过滚动条拖动来找他/她需要的部分。

（2）下面是创建一个命名锚的语法：
<a name="label">Text to be displayed</a>
属性 name 用于创建一个命名的锚。

第二步写个链接指向的锚：

（1）<a href="url">Text to be displayed</a>     
标签<a>被用来创建一个链接指向的锚，href属性用来指定连接到的地址，在锚的起始标签<a>和结束标签</a>中间的部分将被显示为超级链接。

（2）然后在网页的任何地方建立对这个目标标记的链接，在标题上建立的链接地址名字要和定位标记名相同，前面还要加上"#"号。格式为：
<a href="#定位标记名">
一个命名锚在显示时与普通链接没什么特别不同之处。
为了直接链接到“要点”部分，一般需要在所请求的 URL 末尾加上符号 # 以及锚名称，象这样：
<a href="Jump'>http://www.w3schools.com/html_links.asp#tips">Jump to the Useful Tips Section</a>

到文件 "html_links.asp" 内部(一个页面内部)的可用锚链接的语法如下：
<a href="#tips">Jump to the Useful Tips Section</a>

七）图片

在我们浏览网页的时候，会看到很多的图片：

图6 图片存储的位置

还可以设置图片的宽和高：

下面我们说下：缩略图

图7 改变图片的大小

当我们改变图片的大小的时候，光该后缀名不行，必须在画图这样的软件里面去改。

图8 制作缩略图

以后我们写程序的时候，自动生成缩略图，自动加水印，都是真正的把图片改了。

px (Pixel)单位名称为像素，相对长度单位，像素（px）是相对于显示器屏幕分辨率而言的（随着屏幕分辨率而变化）,国内推荐； QQ截图也是使用PX作为长度宽度单位。

em单位名称为相对长度单位。相对于当前对象内文本的字体尺寸，国外使用比较多；如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

HTML学习（零）简介的更多相关文章

  1. 现代3D图形编程学习-基础简介(2) (译)

    本书系列 现代3D图形编程学习 基础简介(2) 图形和渲染 接下去的内容对渲染的过程进行粗略介绍.遇到的部分内容不是很明白也没有关系,在接下去的章节中,会被具体阐述. 你在电脑屏幕上看到的任何东西,包 ...

  2. 现代3D图形编程学习-基础简介(1) (译)

    本书系列 现代3D图形编程学习 基础简介 并不像本书的其他章节,这章内容没有相关的源代码或是项目.本章,我们将讨论向量,图形渲染理论,以及OpenGL. 向量 在阅读这本书的时候,你需要熟悉代数和几何 ...

  3. AspectJ基础学习之一简介（转载）

    AspectJ基础学习之一简介(转载) 一.为什么写这个系列的博客   Aspectj一个易用的.功能强大的aop编程语言.其官网地址是:http://www.eclipse.org/aspectj/ ...

  4. springmvc学习笔记(简介及使用)

    springmvc学习笔记(简介及使用) 工作之余, 回顾了一下springmvc的相关内容, 这次也为后面复习什么的做个标记, 也希望能与大家交流学习, 通过回帖留言等方式表达自己的观点或学习心得. ...

  5. MXNet深度学习库简介

    MXNet深度学习库简介 摘要: MXNet是一个深度学习库, 支持C++, Python, R, Scala, Julia, Matlab以及JavaScript等语言; 支持命令和符号编程; 可以 ...

  6. zookeeper学习(零)_安装与启动

    zookeeper学习(零)_安装与启动 最近换了新的电脑,终于买了梦寐以求的macbook.最近也换了新的公司,公司技术栈用到了zookeeper.当然自己也要安装学习下.省的渣渣的我,被鄙视就麻烦 ...

  7. Python学习--Python简介

    Python 简介 Python是一种解释型.编译性.面向对象.动态数据类型的高级程序设计语言.Python由Guido van Rossum于1989年底发明,第一个公开发行版发行于1991年. P ...

  8. [原创]java WEB学习笔记96：Spring学习---Spring简介及HelloWord

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  9. JavaWeb学习----JSP简介及入门（含Eclipse for Java EE及Tomcat的配置）

    ​[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...

  10. Hive入门学习--HIve简介

    现在想要应聘大数据分析或者数据挖掘岗位,很多都需要会使用Hive,Mapreduce,Hadoop等这些大数据分析技术.为了充实自己就先从简单的Hive开始吧.接下来的几篇文章是记录我如何入门学习Hi ...

随机推荐

  1. 关于javascript中的this关键字

    this是非常强大的一个关键字,但是如果你不了解它,可能很难正确的使用它. 下面我解释一下如果在事件处理中使用this. 首先我们讨论一下下面这个函数中的this关联到什么. function doS ...

  2. hibernate5.2需要的最少jar文件

    hibernate5.2需要的最少jar文件: required文件夹中的所有jar文件 + mysql-connector-java-bin.jar.

  3. ramdisk plus v11.5安装内存虚拟硬盘

    ramdisk plus v11.5.桌面版操作及应用图解说明 一.ramdisk plus程序安装方法: 1.先安装英文原版软件(RamDisk-desktop.exe桌面版),安装路径不要更改,安 ...

  4. Windows更新清理工具 (winsxs 清理工具)

    Windows 更新清理工具是一款效果非常显著的Windows7.Windows8操作系统清理优化工具!经常安装系统的朋友相比有所体会,刚刚安装完成的Win7.Win8其实占的空间并不大,去掉页面文件 ...

  5. Angular移除不必要的$watch之性能优化

    双向绑定是Angular的核心概念之一,它给我们带来了思维方式的转变:不再是DOM驱动,而是以Model为核心,在View中写上声明式标签.然后,Angular就会在后台默默的同步View的变化到Mo ...

  6. Binder in Java

    Android在Native层实现了进程间的Binder通信,但是上层应用程序的开发及Framework的实现都是Java,用Java层再实现一次肯定是不合理的,Java可以通过JNI调用Native ...

  7. Android Weekly Notes Issue #231

    Android Weekly Issue #231 November 13th, 2016 Android Weekly Issue #231 Android Weekly阅读笔记, Issue #2 ...

  8. SQL：插入指定标识列的数据时候的小错误

    异常处理汇总-数据库系列  http://www.cnblogs.com/dunitian/p/4522990.html 后期会在博客首发更新:http://dnt.dkill.net 好久没写标识系 ...

  9. Quartz.net开源作业调度框架使用详解

    前言 quartz.net作业调度框架是伟大组织OpenSymphony开发的quartz scheduler项目的.net延伸移植版本.支持 cron-like表达式,集群,数据库.功能性能强大更不 ...

  10. MVC默认路由实现分页-PagerExtend.dll

    这两天在群里有人咨询有没有现成的.net mvc分页方法,由此写了一个简单分页工具,这里简单分享下实现思路,代码,希望能对大家有些帮助,鼓励大家多造些轮子还是好的. A.效果(这里用了bootstra ...