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. 微信公众平台开放JS-SDK(微信内网页开发工具包)

    微信公众平台开放JS-SDK(微信内网页开发工具包),这次开放接口是质的飞跃,是对开发者和广大用户一个利好的消息.未来的公众号图文消息会更丰富多彩,准备脑洞大开吧!(第三方平台正式支持接入微信公众平台 ...

  2. Hadoop 之面试题

    颜色区别: 蓝色:hive,橙色:Hbase.黑色hadoop 请简述hadoop怎样实现二级排序． 你认为用Java,Streaming,pipe 方式开发map/reduce,各有哪些优缺点: 6 ...

  3. asp.net的sql防注入和去除html标记的方法

    一. // <summary> /// 过滤标记 /// </summary> /// <param name="NoHTML">包括HTML, ...

  4. iOS开发——UI进阶篇（三）自定义不等高cell，如何拿到cell的行高，自动计算cell高度，（有配图，无配图）微博案例

    一.纯代码自定义不等高cell 废话不多说,直接来看下面这个例子先来看下微博的最终效果 首先创建一个继承UITableViewController的控制器@interface ViewControll ...

  5. autolayout的各种坑

    xocde7的autolayout 在viewDidLoad之前, 使用frame改变布局是没有用的, 简单的视图才可以使用autolayout, 稍微复杂写的都要使用代码来编写 获取当前view的宽 ...

  6. javascript中数组concat（）join（）split（）

    concat() 方法用于连接两个或多个数组. 该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本. 所以 <script type="text/javascript" ...

  7. Python学习笔记一

    原来Python的文件配置好环境变量直接双击就可以运行,当然也可以控制台+编辑器 first try: import turtle window=turtle.Screen() babbage=tur ...

  8. Dex动态加载

    Dex动态加载是为了解决什么问题? 在Android系统中,一个App的所有代码都在一个Dex文件里面. Dex是一个类似Jar的存储了多个Java编译字节码的归档文件. 因为Android系统使用D ...

  9. Jquery Ajax处理，服务端三种页面aspx,ashx,asmx的比较

    常规的Jquery Ajax 验证登录,主要有3种服务端页面相应 ,也就是 aspx,ashx,asmx即webserivice . 下面分别用3种方式来(aspx,ashx,asmx)做服务端来处理 ...

  10. Docker的安装配置及使用详解

    基本概念 Docker 包括三个基本概念 镜像(Image) 容器(Container) 仓库(Repository) 先理解了这三个概念,就理解了 Docker 的整个生命周期. 1.docker安 ...