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:超文本标记语言,就是通过标签对,给纯文本添加语义,实际上其实就是用文本给文本添加语义,并且可以添加图片,链接,视频等,而一对对的标签,也就成标记,所以这些构成我们的“超文本标记语言”

标签:主标题,段落,图片,链接,换行

  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>

为什么在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除了可以设置字符街,还可以设置关键字和页面描述

设置当前的页面描述

 

<meta name="description" content="黄晓明,1977年11月13日生于山东青岛,中国内地男演员、歌手,毕业于北京电影学院表演系、北京大学光华管理学院EMBA2012级。1998年主演电视剧《爱情不是游戏》开始进入演艺圈。2001年因主演古装剧《大汉天子》而获得关注。2005年起连续10年入选“福布斯中国名人榜。2006年主演武侠剧《神雕侠侣》。200...">

 

主要设置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="加载失败或者是加载超时"> 返回一集目录

图片显示:

HTML 认识

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. Android五岁了

    今日(2013-9-24),谷歌开源系统Android迎来了它5岁的生日. 时间过得真快啊!当时的android并不被人看好,而现在的android已经成为了全球最大的智能手机操作系统.而现在的诺基亚 ...

  2. 碰到sshd连接不上linux时的解决办法

    1,首先更改ssh配置,可以是ssh端口连接不上服务器 cd /etc/ssh/sshd_config vi !$ Port 52113 //ssh默认的连接端口, 改为别人不知道的端口 Permit ...

  3. c&plus;&plus;学习-运算符重载

    重载=号运算符,由于成员属性中有指针会出现错误 #include <iostream> using namespace std; class num{ public: num(){n=;c ...

  4. 简明Vim练级攻略(转)

    前言今天看到这篇文章,共鸣点非常多.它把Vim使用分为4个级别,目前我自己是熟练运用前面三级的命令,在培养习惯使用第四级.完全就是我这一年来坚持使用Vim的过程.所以不管怎么我要转载这篇文章.翻译自& ...

  5. HDU 1231 最大连续子序列

    和前面两道题一样 不过这题要求输出子序列首尾的元素的值,而且如果所有元素都小于0的话,规定子序列的和为0,并输出整个序列的首尾元素. //#define LOCAL #include <iost ...

  6. opencv 相关一个很好的博客

    http://blog.csdn.net/zouxy09/article/category/1218765 图像卷积与滤波的一些知识点 图像卷积与滤波的一些知识点zouxy09@qq.comhttp: ...

  7. 构建Nginx均衡LAMP高性能服务器

    LNAMP(Linux+Nginx+Apache+Mysql+PHP)架构受到很多IT企业的青睐,取代了原来认为很好的LNMP(Linux+Nginx+Mysql+PHP)架构,那我们说LNAMP到底 ...

  8. WaitForSingleObject函数

    WaitForSingleObject函数 VC声明 DWORD WaitForSingleObject( HANDLE hHandle, DWORD dwMilliseconds ); VB声明 D ...

  9. RTX 无法刷新组织架构的处理方法总结

    文章一: 刷新组织架构问题1."客户端不能获取正确的组织架构"或"新增加的人员刷新不了组织架构"首先要判断是RTX服务器引起的异常还是一些客户端出现的异常,判断 ...

  10. Python爬虫入门教程 1-100 CentOS环境安装

    简介 你好,当你打开这个文档的时候,我知道,你想要的是什么! Python爬虫,如何快速的学会Python爬虫,是你最期待的事情,可是这个事情应该没有想象中的那么容易,况且你的编程底子还不一定好,这套 ...

上一篇:小米手机安装mitmproxy证书


下一篇:【JAVA】IOS内购二次验证及掉单问题解决