一.什么是HTML与HTML文档的基本结构
什么是html?
- Html是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言,而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
Html的作用?
- Web浏览器的作用是读取html文档,并以网页的形式显示它们。浏览器不会显示html标签,而是使用标签来解释页面上的内容.
- 简单说,html就是用于展示信息的。
HTML文档的基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--默认加粗加大-->
<h1 align="center">一级标题</h1>
<h2 align="right">二级标题</h2>
</body>
</html>
文档结构标签
- 声明为 HTML5 文档
- <html>元素是 HTML 页面的根元素
- 元素包含了文档的元(meta)数据
- META标签用来描述一个HTML网页文档的属性
- 元素描述了文档的标题
- 元素包含了可见的页面内容
meta 标签
- meta常用于定义页面的说明,关键字,最后修改日期,和其它的元数据。这些元数据将服务于浏览器(如何布局或重载页面),搜索引擎和其它网络服务
- meta 标签共有2个属性: name 和 http-equiv
name属性语法
- name属性主要用于描述网页,比如网页的关键词,叙述等
- name的参数常用的有:
- keywords(关键字) 告诉搜索引擎,你网页的关键字
<meta name="keywords" content="七牛, 七牛云, 七牛云存储, 七牛直播云, 七牛CDN加速" />
- description(描述) 告诉搜索引擎,你网站的主要内容
<meta name="description" content="七牛云是国内领先的企业级云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛提供对象存储,融合CDN加速,直播云,内容反垃圾等服务。">
http-equiv属性语法
- http-equiv 相当于http的作用,比如定义http参数
- 常用属性:
- content-Type 用于设定网页字符集,便于浏览器解析和渲染页面
<meta http-equiv="content-Type" content="text/html;charset=utf-8">
- 但是现在推荐用H5的设定方式
<meta charset="utf-8">
块级标签
- 每个块级元素默认占一行高度,一行内添加一个块级元素后无法添加其他元素(float浮动后除外)。两个块级元素连续编辑时,会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素
- 块级元素一般作为容器出现,用来组织结构,但并不全是如此。有些块级元素,如只能包含块级元素。其他的块级元素则可以包含 行级元素如<P>,也有一些则既可以包含块级,也可以包含行级元素。
- DIV 是最常用的块级元素,元素样式的display:block都是块级元素。它们总是以一个块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右撑满。
- 常见块级标签:div, table, form, h1–h6, hr, p, ol, ul,li
内联元素(行级元素)
- 只能容纳文本或其他内联元素
- IFRAME元素和元素样式的display : inline的都是行内元素
- 各个元素之间横向排列,到最右端自动折行
- 常见内联元素 a, br, em, i, img, input, label, span, textarea
块级元素与内联元素对比
块级元素 | 内联元素 |
---|---|
总是在新行上开始 | 和其他元素都在一行 |
高度,行高,内外边距都能控制 | 不可控制 |
宽度缺省为他的容器的100% | 宽度为他的文字或图片的宽度 |
可以容纳内联元素和块元素 | 只能容纳文本或其他内联元素 |
Html书写规范
Html标签
- HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- TML 标签是由尖括号包围的关键词,比如 <html>
- HTML 标签通常是成对出现的,比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签,第二个标签是结束标签
- 绝大多数的标签都具有属性,建议属性值使用引号引起。例如:
- 大多数标签是可以嵌套的
Html创建
- Html文件可以直接使用文本编辑器来创建,保存时,后缀名为html或htm
- 整个文件是在<html>与</html>标签之间在标签间有与子标签。
- 例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>介绍成都</title>
</head>
<body>
<h1><font color="red"></font>成都</h1>
让我掉下眼泪的
不止昨夜的酒
让我依依不舍的
不止你的温柔
余路还要走多久
</body>
</html>
空的html标签
- 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
就是没有关闭标签的空元素(<br>标签定义换行)。- 在开始标签中添加斜杠,比如 <br/>,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。
- 即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。
- 多个空格,tab键,回车,默认为一个空格
Html大小写不敏感
- HTML 标签对大小写不敏感:<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。
- W3School 使用的是小写标签,因为万维网联盟(W3C)在HTML4中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写
文件标签
html标签
- 整个文件都处于html标签中.HTML用以声明这是 HTML 文件,让浏览器认出并正确处理此 HTML 文件。
- 在HTML文件有两部分与
head标签
- head标签用于加载一些重要的资讯它的内容不会被显示,只有的内容才会被显示
title标签
- 只能出现于中。它代表的是标题
body标签
- 中的内容会被显示。
- 常用属性:
- text:用于设定文字颜色
- background:用于设定背景图片
- bgcolor:用于设定背景色
- margin(top,left,right,bottom),设置边距
关于html中颜色取值
- 颜色由红色、绿色、蓝色混合而成
- 有三种取取值方式:RGB三原色
- rgb(0,0,0) 值是在0-255之间
- #000000 #ff0000 #00ff00 #0000ff #ffffff
- red green blue