一)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. Web前端温故知新-CSS基础

    一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...

  2. dynamic-css 动态 CSS 库，使得你可以借助 MVVM 模式动态生成和更新 css，从 js 事件和 css 选择器的苦海中脱离出来

    dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...

  3. CSharpGL(7)对VAO和VBO的封装

    CSharpGL(7)对VAO和VBO的封装 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码中包含10多个独立的Demo,更适合入门参考 ...

  4. Javascript数组操作

    使用JS也算有段时日,然对于数组的使用,总局限于很初级水平,且每每使用总要查下API,或者写个小Demo测试下才算放心,一来二去,浪费不少时间:思虑下,堪能如此继续之?当狠心深学下方是正道. 原文链接 ...

  5. [转载]Google Guava官方教程（中文版）

      原文链接  译文链接 译者: 沈义扬,罗立树,何一昕,武祖  校对:方腾飞 引言 Guava工程包含了若干被Google的 Java项目广泛依赖 的核心库,例如:集合 [collections] ...

  6. 解析大型.NET ERP系统 业务逻辑设计与实现

    根据近几年的制造业软件开发经验,以我开发人员的理解角度,简要说明功能(Feature)是如何设计与实现的,供参考. 因架构的不同,技术实现上会有所差异,我的经验仅限定于Windows Form程序. ...

  7. Git异常：Cannot delete the branch 'test1' which you are currently on

    GitHub实战系列汇总:http://www.cnblogs.com/dunitian/p/5038719.html ———————————————————————————————————————— ...

  8. jQuery系列：选择器

    jQuery选择器通过标签名.属性名或内容对DOM元素进行选择,而不用担心浏览器的兼容性. 1. 基本选择器 基本选择器是jQuery中使用最频繁的选择器,由元素ID.class.元素名.多个选择符组 ...

  9. 【Win 10 应用开发】Sqlite 数据库的简单用法

    如果老周没记错的话,园子里曾经有朋友写过如何在 UWP 项目中使用 Sqlite数据库的文章.目前我们都是使用第三方封装的库,将来,SDK会加入对 Sqlite 的支持. 尽管目前 UWP-RT 库中 ...

  10. fluent-ffmpeg 常用函数

    最近项目频繁用到fluent-ffmpeg,将目前使用到的函数进行总结. 首先引入fluent-ffmpeg模块: var ffmpeg = require('fluent-ffmpeg'); 1.函 ...