HTML入门

一、网页的组成

一个网页主要由三部分组成：
结构：HTML，用于描述页面的结构；
表现：CSS，用于控制页面中元素的样式；
行为：JavaScript，响应用户的操作.

二、HTML

2.1 Hypertext Markup Language
超文本标记语言
它负责网页的三个要素之中的结构。
HTML使用标签的的形式来标识网页中的不 同组成部分。
所谓超文本指的是超链接，使用超链接可 以让我们从一个页面跳转到另一个页面。

2.2标签
<标签名>内容</标签名>

2.2元素
一个完整的标签可以称之为元素

<h1>一级标题</h1>
<p>我是一个<em>元素 </em></p>

2.3属性
可以为HTML标签设置属性
通过属性为HTML元素提供附加信息
属性需要设置在开始标签或自结束标签中
属性总是以名称/值对的形式出现 ，比如：name=“value”
有些属性可以是任意值，有些则必须是指定值。
id
– id属性作为标签的唯一标识，在同一个网页中不能 出现相同的id属性值。
class
– class属性用来为标签分组，拥有相同class属性的 标签我们认为就是一组，可以出现相同的class属 性，可以为一个元素指定多个class。
title
– title属性用来指定标签的标题，指定title以后，鼠标移入到元素上方时，会出现提示文字

2.4注释

<!-- 注释内容 -->

注释不能嵌套

2.5meta标签
meta标签可提供有关页面的元信息，比如 针对搜索引擎和更新频度的描述和关键词。
meta标签位于文档的头部，不包含任何内 容。
meta标签的属性定义了与文档相关联 的名称/值对。
设置页面的字符集

<meta charset="utf-8">

设置网页的描述

<meta name="description" content="">

设置网页的关键字

 <meta name="keywords" content="">

请求的重定向

<meta http-equiv="refresh" content="5;url=地址"/>

2.6 html标签
< html >标签用于告诉浏览器这个文档中包含 的信息是用HTML编写的。
用法：所有的网页的内容都需要编写到html标签中， 一个页面中html标签只能有一个。
html标签中有两个子标签head和body 。

2.7
< head >
作用：head标签用来表示网页的元数据，head中 包含了浏览器和搜索引擎使用的其他不可见信 息。
用法：head标签作为html标签的子元素的出现，一 个网页中只能有一个head。

2.8
< body >
作用：
body标签用来设置网页的主体，所有在页 面中能看到的内容都应该编写到body标签中。
用法：
body标签作为html的子标签使用。

2.9 < title >
作用：
title标签表示网页的标题，一般会在网页的标 题栏上显示。
itle标签中的文字，是页面优化的最重要因素。在 搜索引擎的搜索时最先看到的、最醒目的内容。
用法：
建议将title标签紧贴着head标签编写，这样搜索 引擎可以快速检索到标题标签。
网站中的多个页面的title也不应该重复，这样不利 于搜索隐藏检索。

2.10 h1~h6
h1~h6都是网页中的标题标签，用来表示网页 中的一个标题，不同的是，从h1~h6重要性越 来越低。
标题标签相当于正文的标题，通常认为重要性 仅次于页面的title。
一般标题标签我们只会使用到h3，h3以后的标 题标签对于搜索引擎就没有什么意义了。
一个页面中只会使用一个h1标签。

2.11 < p >
p标签表示网页中的一个段落。
一般浏览器会在段落的前和后各加上一个换行， 也就是段落会在页面中自成一行

2.12
br
换行标签

2.13 hr
水平线标签

2.14
< img >
引入图片标签。属性：src ：指向外部的一个图片路径； ./当前路径；…/上一级目录
alt：图片的描述，如果不写alt属性搜索引擎不会发现该图片。
图片格式：
jpg：支持颜色丰富，不支持透明效果，不支持动图，一般用来显示照片；
gif：支持颜色少，支持简单透明，支持动图，显示颜色单一的图和动图。
png：颜色丰富，复杂透明，不支持动图
webp：谷歌推出的专门用于显示网页图片的一种格式，具备其他图片格式的所有优点，文件还特别小。但是兼容性不好。
Base64:将图片使用base64编码，转换为字符，通过字符形式来引入图片，和网页一起加载。

2.15 < a >
超链接标签
属性：
href：指向一个连接地址,#定位到当前页面哪个位置，需要设置id属性来匹配页面的位置。
target：设置打开目标页面的位置，可选值：_blank新窗口、 _self当前窗口，默认值为
_self,会跳出一个新窗口，_blank，不会跳出一个新窗口。

<iframe src = ""></iframe>

内联框架，向当前页面引入一个其他页面

<audio src="音频地址" controls autoplay></audio>

controls有，用户就可以控制音频，没有，用户无法控制音频。
autoplay决定音频文件是否自动播放。
loop决定是否循环播放。
除了通过src属性指定音频，还可以通过source进行指定

<audio controls>
<source src="address">
<source src="address">
</audio>

播放视频：

<video src="address" controls></video> 

2.16 字符实体
小于号< &lt
大于号> &gt
空格 &nbsp
和符号 &amp
版权© &copy
引号” &quot
注册商标® &reg
商标™ &trade

2.17
www.baidu.com
其中baidu.com为主域名,www为二级域名.