HTML基础笔记-02

---恢复内容开始---

学习网站：W3School

一、HTML的认识

纯文本语言：只显示内容，不显示样式，也不能描述语义的文档，但是也不会乱码

语义：数据的含义就是语义，数据是符号，在这表示标签

文件格式：txt只保存内容，不显示样式，而doc不仅显示内容，也显示样式，两者在保存相同的内容时，doc的文件占用内存比较大

常见纯文本：记事本、Java、HTML、CSS、JavaScript等

二、 HTML的基础知识点

HTML是负责描述文档语义的一种标记语言

HTML有文本、图片、链接、视频、音乐等

注意：html没有样式，是用来添加语义的排版，实际上就是文本的嵌套使用，而CSS是用来定义样式的

HTML (hyperText Markup Language): 也叫超文本标记语言

超文本：是因为它可以导入超链接，将空间中不同的数据进行连接，所以叫超文本

基本骨架：

<html>

<head>

</head>

<body>

</body>

</html>

<!DOCTYPE html>:文档声明头，声明使用的是html的文档类型 (DocType Declaration)，任何一个标准的HTML页面，第一行一定是文档声明头

我们大多数学的是HTML4.01版本，这版本从IE6浏览器兼容，HTML5兼容从IE9开始的浏览器。但是IE6，7，8版本还没有淘汰，所以这几年用该还是使用HTML4.01版本来制作网页。

HTML和XHTML的区别：XHTML严格体现在小写标签、闭合、引号

Strict：表示当前模式的要求更加严格，指定有些标签不能使用，如U标签（是指加上下划线的标签，也就是样式，这和HTML就产生了冲突，HTML只负责语义，不负责样式的）

我们使用的一般是Transitional(普通的)的版本，没有严格要求

(U标签：)

基本标签：

<body></body>：里面显示文本、图片内容、链接等网页内容

<h1></h1>一级标题(主标题) <h2></h2>二级标题… h1->h6定义标题语义，显示不同的标题(headline)大小

<p></p>段落。里面的是内容

<a></a> 指向链接

<img src="" alt=“这里用来调用图片失败的识别说明”>图片

<br>换行

字符集（Character Set）：当前计算机不能识别汉字，而是通过二进制来存储编码，计算机记录的实际是根编码

eg： <meta charset="UTF-8"> meta(便签定义)--> 表示“元”，“元”配置：表示基础的配置项目

第一种：UTF—8

第二种：gb2312

第三种：gb2312的简写 gbk

其中UTF-8全球通用，涵盖了人类的所有语言

Gb2312是国标，是中国的字库，涵盖了汉语和常见的英文

UTF-8中的一个汉字存储3个字节，而gb2312存储两个字节，一般情况下使用的是UTF-8.但是有时在用户体验上要考虑到是否使用国标

2.3关键字和页面描述

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

页面描述（description：描述）

设置页面描述，在百度搜索，可显示当前页面描述的内容，这个技术叫做SEO（SEO：英文Search Engine Optimization，中文叫“搜索引擎优化”）

eg：<meta name = “名字 ” content =“图片加载失败后显示的提示内容”>

关键字：告诉搜索引擎，这个网页是做什么，提高搜索的效率，让人快速的找到想要的信息，keyword就是“关键字”

保存编码格式：File--> Save With Encoding

CM(Command) ＋ S保存 CM ＋ N新建文件(File--> New) Tab点击出html的各种格式

HTTP协议：也叫超文本传输协议，个人的认识：用于Web浏览器和网站服务器之间的数据传输。它是以明文发送内容，不提供任何形式进行加密，攻击者很容易截取数据信息，可以直接看懂，所以它不适合传如卡号、密码等敏感信息

三、HTML的基本语法

<1、 html对换行（Tab键）、回车以及大小写都不敏感

<div>这是一个div的盒子！
<h3>这是一个三级标题</h3>
<p>这是一个段落</p> </div>

等价于：

<div>这是一个div的盒子！
<h3>这是一个三级标题</h3>
<p>这是一个段落</p>
</div>

<div></div>存放内容或者嵌套其它标签使用，对换行不敏感

代码规范：<div>标签的嵌套的内容要依次缩进，增强代码的可读性

<2、html的空白折叠效果：html中的文字之间进行空格、换行、tab键都会折叠成一个空格

<3、标签要严格封闭(<>)

HTML、CSS实际上就是写代码，不是真正意义上"编程"，基本上不实现业务逻辑，但是思想和很多内容在编程上是相同的

四、标签的使用

HTML的标签分等级的，有二种类型：容器级、文本级

容器级的标签可以存放任何东西

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

1、h标签

<h1></h1>一级标题(主标题) <h2></h2>二级标签…<h6></h6>六级标题

h1->h6定义标题语义，显示不同的标题大小 headline

p标签：<p></p>段落(Paragraph) 里面输入的是内容，p里面只能存放文字、图片、表单元素，其他一律不能放

eg：当源代码是

<p>

我是段落

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

</p>

但是在浏览器检查的时候显示的是

<p>

我是段落

</p>

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

浏览器自己把P标签封闭，不让你去包裹h1

浏览器在p标签中遇到其它标签时，会自动添加</p>进行封闭，在另一个结束标签前面补上开始标签<p>，

3、 img标签

<img>插入图片 img(image：图片) Src (Source: 资源)

eg: <img src="" alt=“1.png”/>

能够插入的图片类型：jpg(jpeg)、gif、png、bmp，不能往网页里面插入的图片格式有：psd、ai

img的标签不需要反标签，是自封闭标签，也叫单标签

如：<img src="1.jpg"/> ，Src是img的标签属性，1.png是属性值(网址或文件路径)

alt属性：alt(altemate : 替代) 图片无法显示的时候，用文字来代替文件（但是有些浏览器不支持）

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

如果一直显示不出图片，最直接有效的办法是输入全路径加图片名，但是只能在自己的电脑上能看到，不推荐这样用。

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

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

如果在上一个文件里，要加“../”如果在上二个文件里，就添加“../../”，以此增加或者输入全路径

如果图片在html文件里面，则输入“thml/”

4、a标签超级链接

写法：<a href="" title="这是什么样的title" targe="_blank" >这是一个超链接</a>

一个网站，是由多个html网页组成，html网页键通过超级链接相互跳转，形成一个“网”

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

target属性

target：目标的意思

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

blank（空白）：块状的意思，代表新建一个新的空白窗口

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

5、页面中锚点

锚点：就是一个小小的标记，用来实现页面跳转，不容易被用户察觉

a （anchor）是"锚"的意思 a标签

title 鼠标悬停时的文本显示

target(属性) 如果有这行代码，就会在新的空白标签页打开，并且在跳转的标签页中还是存在的

页面中的锚点作用：当前内容很多的时候，想直接返回首页，用来跳转页面

如：锚点可以用name和id来设置属性

<a name="BWHL">这是第一个锚点</a>

<a name="second">这是第二个锚点</a>

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

<a herf="#BEHL">点击第一个锚点</a> #BEHL就是锚点

<a herf="#second">点击第二个锚点</a>

6、<br>换行标签

7、列表：

它会自动空格，分为：

有序列表：<ol><li>

无序列表：<ul><li>

可以在浏览器中检查代码：检查--> Console，有些浏览器可能不支持，常用的是Chrome和Firefix(有很多实用的插件，个人经常实用Firebug来检查元素)

秒客网

HTML基础笔记-02

相关文章