一)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. 【一起学OpenFoam】01 OpenFoam的优势

    CFD技术发展到今天,已经超过了大半个世纪了,已经涌现出非常多的CFD软件可供人们使用.通用商业CFD软件譬如Fluent.CFX.Star CCM+等在工业上得到了广泛的应用,另外一些专用的软件(如 ...

  2. BZOJ 4453: cys就是要拿英魂！[后缀数组 ST表 单调栈类似物]

    4453: cys就是要拿英魂! Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 90  Solved: 46[Submit][Status][Discu ...

  3. 一步步学习javascript基础篇（0）:开篇索引

    索引: 一步步学习javascript基础篇(1):基本概念 一步步学习javascript基础篇(2):作用域和作用域链 一步步学习javascript基础篇(3):Object.Function等 ...

  4. 用C表达面向对象语言的机制——C#版

    PS:本文PDF版在这里(格式更好看一些).最新的源代码请在本页面文末下载,PDF中的链接不是最新的. 用C表达面向对象语言的机制——C#版 我一直认为,面向对象语言是对面向过程语言的封装.如果是这样 ...

  5. java遇到 Check $M2_HOME 问题 解决-Dmaven.multiModuleProjectDirectory system property is not set. Check $M2_HOME environment variable and mvn script match.

    步骤: 1.添加M2_HOME的环境变量 2.Preference->Java->Installed JREs->Edit 选择一个jdk 3.添加 -Dmaven.multiMod ...

  6. 工作笔记--哪些bug应由研发发现？

      标准: 研发应发现: 主功能流程无法正常使用,以及联调时主功能流程是否正常 功能缺失 打包时数据库表非最新.程序文件非最新: 文件导出时有明显错误(如无法导出.导出后格式明显不对.批量导入出错) ...

  7. JavaScript权威设计--JavaScript脚本化文档Document与CSS(简要学习笔记十五)

    1.Document与Element和TEXT是Node的子类. Document:树形的根部节点 Element:HTML元素的节点 TEXT:文本节点   >>HtmlElement与 ...

  8. ASP.NET MVC5+EF6+EasyUI 后台管理系统（58）-DAL层重构

    系列目录 前言:这是对本文系统一次重要的革新,很久就想要重构数据访问层了,数据访问层重复代码太多.主要集中增删该查每个模块都有,所以本次是为封装相同接口方法 如果你想了解怎么重构普通的接口DAL层请查 ...

  9. 2.JAVA之GUI编程布局

    布局管理器 容器中的组件排放方式,就是布局 常见的布局管理器: **************************************************** 1.FlowLayout(流式 ...

  10. C#组件系列———又一款日志组件：Elmah的学习和分享

    前言:好久没动笔了,都有点生疏,12月都要接近尾声,可是这月连一篇的产出都没有,不能坏了“规矩”,今天还是来写一篇.最近个把月确实很忙,不过每天早上还是会抽空来园子里逛逛.一如既往,园子里每年这个时候 ...