1.什么是HTML
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言: HyperText Markup Language
- 超文本:比普通文本更牛逼的文本 不仅仅可以展示文字 可以展示各种媒体内容
- 一般由前端工作人员来完成,后台研发人员不需要编写
- 标记:(标签/元素/标记)
标记通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词,比如 <html>
- 封闭类型标记(也叫双标记),必须成对出现,如<p></p>
- 标签对中的第一个标签是开始标签,第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
- 非封闭类型标记,也叫作空标记,或者单标记,如<br/>
总结:我们学习HTML就是学习各种各样的标签,可以达到比普通文本更厉害的功能。那么后续浏览器可以对html文件做解析,就可以在浏览器上展示好看的效果 。
2. HTML的作用
通过使用HTML的各种标签,然后生成一个HTML文件,这个文件可以被浏览器解析,浏览器内部有一个专门的HTML的解析器,解析后我们就可以看到炫酷的页面。
3. HTML的标准结构
<html> <head> </head> <body> 这是我第一个HTML页面,这就是最基本的结构 </body> </html> |
根标签 html 最外层的标签 所有其他的标签都放入该标签中
html根标签有两个一级子标签 分别是head body
head中一般放的是不显示在网页上 但是又比较重要的信息
body中一般放的是显示在页面上的内容
4.HTML标签
定义 HTML 文档,这个元素我们浏览器看到后就明白这是个HTML文档了,所以你的其它元素要包裹在它里面,标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体。
<html> <head></head> <body></body> </html> |
5.head标签
Head标签用于定义文档的头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分:
<title>、<meta>、<link>、<style>、 <script>
注意:应该把 <head> 标签放在文档的开始处,紧跟在 <html> 后面,并处于 <body> 标签之前。文档的头部经常会包含一些 <meta> 标签,用来告诉浏览器关于文档的附加信息。
① title标签
1.可定义网页的标题。
2.它显示在浏览器窗口的标题栏或状态栏上。
3.title写和你网页相关的关键词有利于SEO优化
<html> <head> <title>这是一个显示在网页左上角的标题</title> </head> <body>...</body> </html> |
SEO是搜索引擎优化的英文缩写。通过对网站内容调整,满足搜索引擎的排名需求,从而提高自己网站被搜索引擎平台录取的几率,从而把精准用户带到网站。
网站都有目标群体,通过title、meta标签可以让目标群体通过关键词找到你的网站,所以你定义的关键词决定了会吸引什么样的群体。
② meta标签
META标签用来描述一个HTML网页文档的属性,通过meta标签的属性定义页面的属性。
<标签名 属性一=" " 属性二=" "></标签名>
元素可提供有关页面的元信息(meta-information),用来向浏览器或搜索引擎描述页面。比如文档的描述和关键词。它只可以放在head中。属于元信息标签。
常见的meta属性有:
charset属性 定义当前页面的字符集,告诉浏览器用什么样的字符集解析当前页面。
HTML5中的写法<meta charset="utf-8"/>
4.01版本写法<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
注意:此处的charset=”utf-8”是说当前使用的是utf-8编码格式,在开发中我们经常会看到utf-8,或是gbk,这些都是编码格式。国外一般会用gbk、gb2312,国内通常使用utf-8,一般乱码出现是由于用于解析的字符集不同所造成的。
Keywords(关键字) keywords用来告诉搜索引擎你网页的关键字是什么。
<meta name="keywords" content="在搜索引擎中被搜索的关键字"> |
description(网站内容描述) description用来告诉搜索引擎你的网站的主要内容。
<meta name="description" content="网站主要描述内容"> |
author作者 标注网页的作者。
<meta name="author" content="作者名"> |
页面自动刷新/跳转 在**秒后对页面进行刷新。
<meta http-equiv="refresh" content="需要刷新等待的秒数;刷新后的网址> |
6.注释
啥是注释:给人看的提示,不显示出来的内容,不执行的代码。
设置注释:选中文字 ,按 " ctrl +shift + / " 注释/取消注释。
7.我的主要练习代码:
<html> <head>
<meta charset="utf-8"/> |