1.1 认识什么是纯文本文件 txt

window自带有一个软件，叫做记事本，记事本保存的格式TXT，就是英文text的缩写，术语上称呼为“纯文本文件”

TXT文件，只能保存文本内容，是无法记录文本的样式的

所以 ，doc和txt存储相同的文本内容，doc比txt大；

总结：

纯文本就是这样的文件  ：  只有文本，没有样式

：   用记事本等纯文本编译器可读，不是乱码  （HTML，CSS ，JS都是纯文本的）

1.2 HTML负责描述文档语义的语言

HTML的英文hyperText Markup Language的缩写 ，超文本标记语言

HTML不仅仅是文本，还有图片，链接，视频，音乐等

结论 ：纯文本  只有内容，没有样式，常见的纯文本：txt ，html 。css。js，java 没有语义，即使你再这个文件中对内容进行排版在清晰，也是没有作用。实际上纯文本中的所有汉字都是平等的，没有任何的语义。

HTML：超文本标记语言。就是通过标签对。给纯文本添加语义，实际上其实就是用文本给文本添加语义，并且可以添加图片，链接，视屏等，而一对对的标签、也就成标记，所以这些构成我们的“超文本标记语言”

标签：主标题，段落，图片，链接，换行

  1. <h1></h1> 主标题  h1-h6(文本添加指的标题语义)  headline
  2. <p></p>  段落  paragraph
  3. <br> 换行
  4. <a></a>  链接
  5. <img></img>图片 image

二. HTML骨架

标准的HTML骨架：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>   </body>

</html>

2.1 文档声明头

任何的一个标准的HTML页面。第一行一定是以 <！DOCTYPE html> 这一行，就是文档声明头，DocType Declaaration，告知我们当前的浏览器文档使用哪种标记语言 HTML/XHTML规范，到底有哪些规范？

首先我们先确定 我们学习的是HTML4.01版本，这版本从IE6浏览器兼容，HTML5兼容从IE9开始的浏览器。但是IE6，7，8版本还没有过早淘汰，所以这几年用该还是HTML4.01版本来制作网页

strict     严格的，体现在一些标签不能使用，比如u

Transitional   普通的

Frameset   带有框架的页面

strict 表示当前模式里面的要求更为严格，这种严格体现在哪里？ 指的有些标签不能使用的

比如》U标签，就是可以让一个文本加上下划线，但是这和HTML本市冲突了，因为HTML只负责语义，并不负责样式，而U标签的下划线指的是不是样式

那如何给文本添加下划线，今后使用css属性来解决这个问题

2.2  字符街

<meta http-equiv="content-type" content="text/html;charset=utf-8">

字符集采用mate便签定义，meta表示“元”，“元”配置，表示基础的配置项目。

CharSet就是“字符集”character set

第一种：UTF—8

<meta http-equiv="content-type" content="text/html;charset=utf-8">

第二种：gb2312

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

第三种 gb2312的简写 gbk

<meta http-equiv="Content-Type" content="text/html; charset=gbk">

什么是字符集

当前的计算机是不存储汉字，而是存储是编码，所以计算机记录的实际是根据编码：两个字库UTF-8和gb-2312

UTF-8是国际通用，里面涵盖了地球上所有人的语言，比如阿拉伯。汉语。鸟语。

gb-2312是国际，是中国的字库，里面仅仅涵盖了汉字和常见的英文

字库 UTF-8>gb-312   UTF-8里面存储的一个汉字3个字节，而gb-2312一个汉字2个字节

保存大小 UTF-8 》 gb-2312加载更快

总结  ：

UTF-8字多 有各种国家的语言，但是保存尺寸大小，加载慢

gb-2312字少 但是尺寸小 加载快

2.3  关键字和页面描述

meta 除了可以设置字符街 ，还可以设置关键字和页面描述

设置当前的页面描述

主要设置description页面描述 那么百度搜索结果，就可以显示当前的页面描述内容，这个而技术叫做SEO

关键字 ：告诉搜索引擎，这个网页是做什么，能够提高搜索效率，让别人能够快速的找到你，keyword就是关键字

三、HTML的基本语法特性

3.1、HTML对换行不敏感，对tab不敏感

1.        <div>这是一个div的盒子！

2.        <h3>这是一个三级标题</h3>

3.      <p>这是一个段落</p>    </div>

等价于：

1.        <div>这是一个div的盒子！

2.                                           <h3>这是一个三级标题</h3>

3.                 <p>这是一个段落</p>

4.      </div>

总结：HTML不是依靠缩进来表示嵌套的，就是看标签的包裹关系，但是我们发现良好的缩进，代码更加易读，要求大家正确的缩进标签

百度为追求极致的显示速度，所以HTML的标签都没有换行，都没有缩进，HTML与换不换行无关的，标签的层次依然清晰，只不过程序员修改起来就很疼哭

空白的折叠效果

HTML中的所有文字间的之间，如果有空格、换行、tab都将会被折叠成一个空格显示。

代码：里面空格、缩进、换行

l  <p>武汉

l

l

l                           贝沃</p>

显示的时候  出现折叠的效果

3.3标签要严格封闭

多说一句：HTML、CSS实际上就是写代码，但是不能算“编程“，因为这里面没有业务逻辑，加减乘除，与或非，说白，就是用代码进行绘制。

四．标签的使用

4.1、 h系列

<h1>到<h6>都是标签

<h1></h1>一级标题（主标题）

<h2></h2>二级标题

………………………

<h6></h6>六级标题

4.2、p标签

段落，英文Paragraph“段落”的缩写

HTML的标签是分等级的，HTML的所有标签分为二种类型：容器级、文本级。容器级的标签里面可以存放任何东西

文本级只能放置文字、图片、表单元素

P标签是一个文本级的标签，从死死记住：p里面只能存放文字、图片、表单元素，其他一律不能放

源代码：

<p>

我是一个小小的段落

<h1>我是一个主标题</h1>

</p>

浏览器不允许你这么做，我们使用Chrome审查的时候，你会发现，浏览器自己把P封闭l，不让你去包裹h1

所以再次强调：p便签是一个文本级的标签，只能存放图片、文字、表单元素。

4.3、 img标签

页面上可以插入图片，

能够插入的图片类型：jpg(jpeg)、gif、png、bmp。

不能往网页里面插入的图片格式有：psd、ai

类型与类型之间有什么区别，我们在css中会讲到。

4.3.1、语法

HTML页面不是直接插入图片的，而是插入引用的地址，所以也要把图片上传到服务器上

插入方法：

<img src="1.jpg"/>

Img是英文中的image”图片”缩写

Src是英文中的”Source”资源的简写 ，千万不要写成scr

Src是img的标签属性，1.jpg是这个属性值。

这个标签和我们之前学过的标签，都不一样？当前的标签不是一对，自封闭标签，也称为单标签 mate标签也是自封闭标签

4.3.2、alt属性

<img src="1" alt="加载失败或者是加载超时">

实例图

alt是英文alternate“替代“的意思，就是不管因为什么原因，当这张图片无法被显示的时候，出现代替的文字（有些浏览器不支持）

4.3.3、相对路径

HTML中插入图片，有二个文件，一个html文件，一个jpg文件

我们关心就是当前这二个文件的相对位置，即使这个网站项目吗，那U盘拷贝给别人，只要相对路径不变，图片就一定能正常显示

如果当前的图片文件处于html文件的下一层目录

<img src="图片/1.jpg"/>

<img src="图片/1" alt="加载失败或者是加载超时">

如果当前的图片文件处于html文件的上一层目录

<img src="../../1.jpg"/>  返回二级目录

<img src="../1" alt="加载失败或者是加载超时"> 返回一集目录

图片显示：

4.4、a标签超级链接

4.4.1、基本写法

一个网站，是由多个html网页组成的，html网页之间能够通过超级链接相互形成跳转，从而形成了“网“.

<a href="img/图片/html/08-img的标签使用.html">这是08-img的标签使用.html</a>

a是英文 anchor”锚”意思，就像这个页面往其他的页面扔出一个链接（锚），是一个文本级的标签。

4.4.2、title属性

title 悬停的文本

<a href="08.html" title="这是什么样的title">title属性</a>

4.4.3、target属性

target实际上是“目标“

<a href="08.html" title="这是title" target="_blank ">target属性</a>

blank的意思是“空白“，就代表新建一个新的空白窗口。为什么_，这个_就是规定。

如果没有target="_blank "，那么就是在相同的标签页打开，如果写了target="_blank "，就是在新的空白标签页中打开，并且跳转的标签页还是存在的

4.5、页面中锚点

页面中其实也是可以有锚点。所谓锚点，其实就是一个小小的标记，这个小标记是用户不可察觉

锚点可以用那name属性设置，或者是id属性设置，那么就是页面中的锚点

<a name="BWHL">我的第一个锚点</a>

<a id="second">这个是我的二个锚点</a>

如何点击跳转（前提是一个超级链接，指向页面中的锚点，才能在页面内跳转）

<a href="#BWHL">点击看到我的一个锚点</a>

<a href="#second">点击看到我的第二个锚点</a>

随机推荐

  1. Memcached原理分析

    Memcached的内存管理方式 Memcached采用了名为Slab Allocation的机制分配,管理内存. Slab Allocation的原理相当简单.将分配的内存分割成各种尺寸的块(chu ...

  2. OC第一节 —— 类和对象

    一.类和对象的概念 1.1类 自己的定义: 具有相同或相似性质对象的抽象. 1.2 对象 自己的定义: 对象是人们要进行研究的任何物体,从最简单的整数到复杂的飞机 等均可以看做是对象. 举例说明: 类 ...

  3. js文字滚动

      <style type="text/css">  #gongao{width:1000px;height:30px;overflow:hidden;line-hei ...

  4. java系列-使用maven创建web项目（二）

    推荐2个maven找jar包配置的网站,只需要搜索关键字即可找到需要的Jar包,非常方便,比如:MySQL就可以找到mysql-connect-Java.jar. http://search.mave ...

  5. 在同一个页面使用多个不同的jQuery版本，让它们并存而不冲突

    - jQuery自诞生以来,版本越来越多,而且jQuery官网的新版本还在不断的更新和发布中,现已经达到了1.6.4版本,但是我们在以前的项目中就已经使用了旧版本的jQuery,比如已经出现的:1.3 ...

  6. HDU 5023 A Corrupt Mayor's Performance Art（线段树区间更新）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5023 解题报告:一面墙长度为n,有N个单元,每个单元编号从1到n,墙的初始的颜色是2,一共有30种颜色 ...

  7. 解决Eclipse中文乱码

    http://hsj69106.blog.51cto.com/1017401/595598 使用Eclipse编辑文件经常出现中文乱码或者文件中有中文不能保存的问题,Eclipse提供了灵活的设置文件 ...

  8. Linux 之 shell 比较运算符

    运算符 描述 示例 文件比较运算符 -e filename 如果 filename 存在,则为真 [ -e /var/log/syslog ] -d filename 如果 filename 为目录, ...

  9. The Adapter of ListView: Just adapt data to view, don’t do anything else

    The design of SimpleAdapter is not good in my opinion. An adapter should just adapter the data to vi ...

  10. swing复制文本框内容

    Clipboard clipboard = Toolkit.getDefaultToolkit().getSystemClipboard(); //得到系统剪贴板 String text = jTex ...