HTML 认识
1.1认识什么是纯文本文件
Window 自带的一个软件，叫做记事本，记事本保存的格式就是TXT，就是英文text的缩写，术语上称呼为”纯文本文件“。
注意：
TXT文件，只能保存文本内容，是无法记录文本样式发。所以，doc和txt存储相同发文本内容，doc比txt大。
总结：
纯文本就是这样的文件：
只有文本，没有样式
用记事本等纯文本编译器可读，不是乱码
|
HTML、CSS、js都是纯文本的 |
1.2HTML是负责描述文档语义的语言
HTML的英文：hyperText Markup Language的缩写，超文本标记语言。
HTML不仅仅是文本，还有图片，链接，视频，音乐等。
1.3总结
纯文本：只有内容，没有样式，常见纯文本：txt，html、css、js、java。没有语义，即使你在这个文件中对内容进行排版再清晰，也是没有作用的。实际上纯文本中的所有汉字都是平等的，没有任何语义。
HTML：超文本标记语言，就是通过标签对，给纯文本添加语义，实际上其实就是用文本给文本添加语义，并且可以添加图片，链接，视频等，而一对对的标签，也就成标记，所以这些构成我们的“超文本标记语言”
标签：主标题，段落，图片，链接，换行
|
二、HTML的骨架
标准的HTML的骨架
|
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> |
2.1 文档声明头
任何的一个标准的HTML页面，第一行一定是以
|
<!DOCTYPE html> |
为什么在HTML5出来了还要学HTML？
首先我们先确定。我们学习的是HTML4.01版本，这版本从IE6浏览器兼容，HTML5兼容从IE9开始的浏览器。但是IE6，7，8版本还没有过早淘汰，所以这几年用该还是使用HTML4.01版本来制作网页。
|
大规范 |
里面的小规范 |
|
|
HTML4.01 |
Strict 严格的，体现在一些标签不能使用，比如u Transitional 普通的 Frameset 带有框架的页面 |
|
|
XHTML1.0 严格体现在小写标签、闭合、引号 |
Strict 严格的，体现在一些标签不能使用，比如u Transitional 普通的（我们学习的版本） Frameset 带有框架的页面 |
|
|
Strict：表示当前模式里面的要求更为严格，这种严格体现在哪里？ 指的有些标签是不能使用的 比如：U标签，就是可以让一个文本加上下划线，但是这和HTML本质冲突了，因为HTML只负责语义，并不负责样式，而U便签的下划线指的是不是样式。 <u>嘻嘻嘻嘻嘻嘻哈哈哈哈</u> 那如何给文本添加下划线，今后使用css属性来解决这个问题你 |
||
Transitional 普通的（我们学习的版本）这个模式下面是没有特别要求
Frameset 带有框架的页面 ，在框架页面使用
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-2312
UTF-8里面存储的一个汉字3个字节，而gb-2312一个汉字2个字节
保存大小 UTF-8(臃肿，加载更慢) >gb-2312(更加巧小，加载更快)
|
总结： UTF-8 字多 有各种国家语言，但是保存尺寸大，加载慢 Gb-2312 字少，但是尺寸小，加载快 |
2.3关键字和页面描述
页面描述
mata除了可以设置字符街，还可以设置关键字和页面描述
设置当前的页面描述
|
主要设置description页面描述，那么百度搜索结果，就可以显示当前的页面描述的内容，这个技术叫做SEO（SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”。SEO是指通过站内优化比如网站结构调整、网站内容建设、网站代码优化等以及站外优化，比如网站站外推广、网站品牌建设等，使网站满足搜索引擎收录排名需求，在搜索引擎中提高关键词排名，从而吸引精准用户进入网站，获得免费流量，产生直接销售或品牌推广）
抽象一下：
<meta name = “ ” content =“”>
name就是“名字” content就是“内容”也就是说，我们定义了一个“Description”的meta，内容XXXXXXXXXXXXX,中国移动互联网行业的黄埔军校，致力于Html5、iOS开发、安卓、UI、VR领域的高端人才培养与项目研发,
关键字
关键字：告诉搜索引擎，这个网页是做什么，能够提高搜索的效率，让别人能够快速的找到你，keyword就是“关键字”
|
<meta name="keywords" content="xx|aaaa|bbbb|xxxx|" /> |
三、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中的所有文字间的之间，如果有空格、换行、tab都将会被折叠成一个空格显示。
代码：里面空格、缩进、换行
|
l <p>你好 l l l HTML</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> |
随机推荐
- LUA 函数式编程demo
什么是函数式编程 http://www.zhihu.com/topic/19585411/hot 函数式编程的本质函数式编程中的函数这个术语不是指计算机中的函数(实际上是Subroutine),而是指 ...
- 【转】数据库系统异常排查之DMV
数据库系统异常是DBA经常要面临的情景,一名有一定从业经验的DBA,都会有自己一套故障排查的方法和步骤,此文为为大家介绍一下通过系统 性能视图(SQLServer05以上版本)来排查系统异常的基本方法 ...
- leetcode 223
题目描述: Find the total area covered by two rectilinear rectangles in a 2D plane. Each rectangle is def ...
- W3cshool之JavaScript基础
1. JavaScript 对大小写敏感 名为 "myfunction"的函数和名为 "myFunction" 的函数是两个不同的函数,同样,变量 & ...
- Android--再探MVP模式
1,上一篇我们已经了解了大致的MVP模式,下面再通过这个登录功能的例子 ,我们能过更加容易的掌握MVP模式,再来补充一些闲外话:MVP 是 MVC 的变种,其实是一种升级.要说 MVP 就要说说 MV ...
- jQuery与其他JS库冲突解决
实际开发中遇到JQuery与其他js库起冲突 究其原因,是它们的全局对象定义冲突了,特别是变量”$”, 可重载$函数.使用jQuery.noConflict()就可以通过重载$函数 例:项目中应用的 ...
- 在Repeater中嵌套使用Repeater
在一般的网站中浏览类别的用户控件通常都位于大多数 ASP.NET 页的左边,它使用户能够按类别快速的查找产品.最近遇到一个客户,因为在他网站上展示的产品并不多,所以要求在原有类别浏览的基础上将产品也加 ...
- 转：SVN服务器搭建和使用（三）
http://www.cnblogs.com/xiaobaihome/archive/2012/03/20/2407610.html 接下来,试试用TortoiseSVN修改文件,添加文件,删除文件, ...
- wex5 教程之 图文讲解 Cloudx5一键部署
视频教程地址:http://v.youku.com/v_show/id_XMTc3OTExNTUwNA==.html 效果预览: 一键部署cloudx5三要领 1.数据源命名为x5 2.数据库命名为x ...
- Account Team使用说明
Account Team Account Team 以下简称客户小组. 背景介绍 帐户是与您的业务相关的公司和组织,每个帐户都存储了商家名称.地址和电话号码等信息.可以针对每个帐户存储相关的联系人. ...