一)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. BZOJ 1010: [HNOI2008]玩具装箱toy [DP 斜率优化]

    1010: [HNOI2008]玩具装箱toy Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 9812  Solved: 3978[Submit][St ...

  2. 关于Java中进程和线程的详解

    一.进程:是程序的一次动态执行,它对应着从代码加载,执行至执行完毕的一个完整的过程,是一个动态的实体,它有自己的生命 周期.它因创建而产生,因调度而运行,因等待资源或事件而被处于等待状态,因完成任务而 ...

  3. s:form标签

    2017-01-07 17:43:18 基本的用法 <!-- Action类必须有一个无参的构造器,因为在执行action方法之前,拦截器已经创建了一个"空"的Action对 ...

  4. useful commands for docker beginner

    You may want to add my wechat public account or add my technical blog's RSS feed This list is meant ...

  5. ABP源码分析四十一：ZERO的Audit,Setting,Background Job

    AuditLog: 继承自Entity<long>的实体类.封装AuditLog的信息. AuditingStore: 实现了IAuditingStore接口,实现了将AuditLog的信 ...

  6. 【饿了么】招聘Java开发工程师、架构师

    3年以上实际工作经验,本科及以上学历. 具有良好的编程基础( 比如熟悉HTTP.多线程.Socket.JVM.基本的数据结构和算法等). 熟悉Java语言以及相关的服务器(比如Tomcat).工具(M ...

  7. 搭建LNAMP环境（一）- 源码安装MySQL5.6

    1.yum安装编译mysql需要的包 yum -y install gcc-c++ make cmake bison-devel ncurses-devel perl 2.为mysql创建一个新的用户 ...

  8. 【WCF】为终结点地址应用地址头

    记得不久前,老周写过博文,探讨过在ContextScope以一定的范内向发出的消息中插入消息头,scope只能为特定的某一次服务操作的调用而添加SOAP头,要是需要在每次调用操作协定的时候都插上Hea ...

  9. Android动画效果之初识Property Animation（属性动画）

    前言: 前面两篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画).Frame Animation(逐帧动画)Andr ...

  10. c#如何判断webbrowser已经加载完毕

    最近有个小程序需要采集网页源代码,但有的网页中JS脚本又会生成额外的代码,比如http://www.cnblogs.com/lidabo/p/4169396.html 红框部分便是另外加载的代码. 此 ...