HTML
1.HTML简介
1.1概述
浏览器的网页开发涉及3种技术:HTML、CSS、JavaScript
- HTML:定义网页的结构和内容
- CSS:定义网页的样式
- JavaScript:定义网页与用户的互动行为
基础网页的HTML源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>网页标题</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>
1.2网页的基本概念
1.2.1标签
HTML代码由许多的不同标签(tag)组成
<title>网页标题</title>
<div>
<p>
HelloWorld!
</p>
</div>
<meta charset="utf-8">
上面的就是一些标签,有的标签是成对出现的,例如<title></title>
<div></div>
,但有的只出现一个例如说<meta = ……>
因为这只需要一个标签就可以完成功能。
值得一提的是,在html中可以将代码写到一行里,且对大小写不敏感
所以有时候在发布网页之前开发者会把源码压缩成一行,以减少传输的字节数。网页内容的缩进和换行主要靠CSS
样式来实现
1.2.2元素
浏览器渲染网页的时候,会把html源码解析成一个标签树,每个标签都是一个节点(node),成为网页元素(element)。
所以标签和元素基本上是同义词,只是使用的场合不一样,标签是源码角度来看,元素是编程角度来看,例如<p>
标签对应网页的p
元素。
而嵌套的标签就构成了网页元素的层级关系
元素分类:
块级元素(block)
行内元素(inline)
其中块级元素默认占据一个独立的区域,在网页上会自动另起一行,占据100%的宽度
1.2.3属性
属性(attribute)是标签
的额外信息,使用空格与标签名和其他属性分隔
<img src="demo.jpg" width="1000">
<img>
标签有两个属性:src、width
1.3网页的基本标签
主要标签:<!doctype>
此标签标示文档类类型,告诉浏览器如何解析万个亿
常用****
<html>
标签
<html>
标签是网页的顶层容器,也称为根元素(root element),其他元素都是它的子元素。一个网页只能有一个<html>
标签
<html lang="en">
</html>
上述代码表示网页内容默认为英语
<head>
标签
标签是一个容器标签用于放置网页的元信息。它的内容不会出现在网页上,而是为网页渲染做准备
head是的第一个子元素,如何网页不包含
,浏览器会自动创建一个head的子元素一般有七个
名称 | 作用 |
---|---|
<meta> |
设置网页的元数据 |
<link> |
链接外部样式表 |
<title> |
设置网页标题 |
<style> |
放置内嵌的样式表 |
<script> |
引入脚本 |
<noscript> |
浏览器不支持脚本时,所要显示的内容 |
<base> |
设置网页内部相对URL的计算基准 |
<meta>
标签
此标签用于设置或说明网页的元数据 ,必须放到<head>
里面,一个<meta>
标签就是一项元数据,网页可以有多个<meta>
一般来说网页应该有两个meta标签,放到head标签最前面
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
1.charset属性
charset属性用于指定网页的编码方式
<meta charset="utf-8">
上述代码声明网页为utf-8编码,虽然可以使用其他编码方式,但主要应该使用utf-8编码、
2.name属性,content属性
name属性表示元数据的名字,content属性表示元数据的值
例如
<head>
<meta name="description" content="HTML 语言入门">
<meta name="keywords" content="HTML,教程">
<meta name="author" content="张三">
</head>
上面代码包含了三个元数据:
- description:网页内容的描述
- keywords:网页内容的关键字
- auther:网页作者
meta标签是一个辅助性的标签,在网页上不可见
name标签是描述网页的,以便于搜索机器人(搜索引擎)进行查找、分类,目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类
这里要详细讲一下,name属性分类两种
- 标准元数据
- 用户自定义内容