HTML基本语法
1.1 什么是HTML
- HTML是用来制作网页的标记语言
- HTML是Hypertext Markup Language的英文缩写,即超文本标记语言
- HTML语言是一种标记语言,不需要编译,直接由浏览器执行
- HTML文件是一个文本文件,包含了一些HTML元素,标签等
- HTML文件必须使用.html或.htm为文件名后缀
- HTML是大小写不敏感的,HTML与html是一样的
- HTML是由W3C的维护的
- HTML 是通向 WEB 技术世界的钥匙。
1.2 HTML5的兼容性
- Internet Explorer 9 以及 以上版本
- chrome、Safari、opera、Firefox和各种以wekkit为内核的国产浏览器
2 HTML基本语法
2.1 HTML标签
- 标签是HTML中最基本单位,也是最重要组成部分
- 通常要用两个角括号括起来:
<
和>
- 标签都是闭合的(两种形式:成对与不成对)
- 双标签(成对):
<标签名>内容</标签名>
如:<table></table>
即分起始和结束 - 单标签(不成对):
<标签名 />
; 如:<br/>
、<hr/>
- 标签是大小写无关的,
<body>
;跟<BODY>
表示意思是一样的,标准推荐使用小写,这样符合XHTML标准。 - 对于HTML标签来讲,最重要的是语义
2.2 HTML标签属性
- HTML属性一般都出现在HTML的开始标签中, 是HTML标签的一部分。
- 标签可以有属性,它包含了额外的信息.属性的值一定要在双引号中。
- 标签可以拥有多个属性。
- 属性由属性名和值成对出现。
- 语法格式如下:
1 <标签名 属性名1 = "属性值",属性名2 = "属性值",属性名3 = "属性值3"> 2 <! -- 输出内容 --> 3 </标签名>
2.3 HTML代码格式
任何回车或空格在源代码中都是不起作用,无论多少个空格都会按照一个空格来算。
所以在编写HTML代码时,都可以使用回车或者空格进行代码排版,
这样可以使代码清晰,也便于团队合作。必须保持严格的缩进规则,以Tab
键为准。
2.4 单行和多行HTML 注释
1 <!-- 注释内容 --> 2 <!-- 3 这里全是注释 4 都是注释 5 -->
2.5 HTML 实体
在 HTML 中,某些字符是预留的。
在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)。
注意:虽然使用<容易识别,但是很多时候编辑器不支持直接使用英文,所以我们得看情况使用。
-
空格 -
<
< -
>
> -
&;
& -
©;
版权 -
¥;
人民币
3 HTML常用标签
3.1 HTML主体结构标签
<html></html>
此元素可告知浏览器其自身是一个 HTML 文档。<head></head>
用于定义文档的头部,它是所有头部元素的容器。<head>
中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。<body></doby>
定义文档的主体
3.3 HEAD头部标签
<title></title>
定义文档标题,网站标题<base />
标签为页面上的所有链接规定默认地址或默认目标<meta />
元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。<meta>
标签永远位于 head 元素内部。
1 <meta charset = "utf-8">
.<link></link>
标签定义文档与外部资源的关系。导入css或者指定网页图标 属性 src、 type 、 rel
<link rel="stylesheet" type="text/css" href="style.css"></link> <link rel="shortcut icon" type="images/x-icon" href="http://www.baidu.com/favicon.ico">
-
<style></style>
签用于为 HTML 文档定义样式信息。 -
<script></script>
标签用于定义客户端脚本,比如 JavaScript。script 元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。
<script type="text/javascript" src="script.js"></script> <script> alert('OK') </script>
3.4 详细的说一下meta元信息
<meta name="description" content="全国最大的同志交友平台">
name 后面跟着author,
description,
keywords,
generator,
revised,
robots,
others
content
<meta name="robots" content="index,follow,noarchive">
all:文件将被检索,且页面上的链接可以被查询;
none:文件将不被检索,且页面上的链接不可以被查询;
index:文件将被检索;
follow:页面上的链接可以被查询;
noindex:文件将不被检索,但页面上的链接可以被查询;
nofollow:文件将被检索,但页面上的链接不可以被查询;
noarchive:文件将被检索,但禁止保存快照;
3.5 格式排版标签
<br/>
换行标签,完成文字的紧凑显示。可以使用连续多个<br/>
标签来换行<hr/>
水平分割线标签,用于段落与段落之间的分割<p></p>
段落标签,里面可以加入文字,列表,表格等,可以<p></p>或<p />使用<pre></pre>
按原文显示标签,可以把原文件中的空格,回车,换行,tab键表现出来<hn></hn>
标题字标签,n为1-6,定义六级标题,而且会自动换行插入一个空行<div></div>
没有任何语义的标签-
<h1> 定义标题的开始。
<h1 align="center"> 拥有关于对齐方式的附加信息。
3.6 文本标签
<em></em>
表示强调,通常为斜体字<strong></strong>
表示强调(语气更强),通常为粗体字<del></del>
标签定义文档中已删除的文本。<ins></ins>
标签定义已经被插入文档中的文本<sub></sub>
文字下标字体标签<sup></sup>
文字上标字体标签<mark></mark>
H5新增 标签定义带有记号的文本 请在需要突出显示文本时使用,如搜索引擎搜索页面<ruby></ruby>
H5新增 标签定义 ruby 注释(中文注音或字符) 在东亚使用,显示的是东亚字符的发音。<rt></rt>
H5新增 标签定义字符(中文注音或字符)的解释或发音
越是困难的事越要立即去做,这样收益才会最大!!!