html基本语法
谈前端(HTML篇)第一课:HTML概述
HTML不是编程语言,是用来描述网页文档(页面结构)的一种标记语言;
HTML指超文本标记语言(Hyper Text Markup Language),之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。;
HTML规定了自己的语法规则,用来表示比“文本”更丰富的意义,比如图片,表格,链接等。浏览器 (IE,FireFox等)软件知道HTML语言的语法,可以用来查看HTML文档。目前互联网上的绝大部分网页都是使用HTML编写的。
二、HTML是什么样的?
简单地来说,HTML的语法就是给文本加上表明文本含义的标签(Tag),让用户(人或程序)能对文本得到更好的理解。
下面是一个最简单的HTML文档:
<html>
<head>
<title>第一个Html文档</title>
</head>
<body>
欢迎访问<a href="http://hanzhaoxin.cnblogs.com/">我的博客</a>!
</body>
</html>
所有的HTML文档都应该有一个<html>元素,<html>元素可以包含两个部分:<head>和<body>。
<head>元素用于包含整个文档的一般信息,比如文档的标题(<title>元素用于包含标题),对整个文档的描述,文档的关键字等等。
文档的具体内容就要放在<body>元素里。<a>元素用于表示链接,在浏览器(如IE,Firefox等)中查看HTML文档时,点击<a>标签括起来的内容时, 通常会跳转到另一个页面。这个要跳转到的页面的地址由<a>元素的href属性指定。上面的<a href=http://hanzhaoxin.cnblogs.com/>中,href属性的值就是http://hanzhaoxin.cnblogs.com/。
三、HTML文档可以包含哪些内容 ?
通过不同的标签,HTML文档可以包含不同的内容,比如文本,链接,图片,列表,表格,表单,框架等。
- 文本 :HTML对文本的支持是最丰富的,你可以设置不同级别的标题,分段和换行,可以指定文本的语义和外观,可以说明文本是引用自其它的地方,等等等等。
- 链接 :链接用来指出内容与另一个页面或当前页面某个地方有关。
-
图片 :图片用于使页面更加美观,或提供更多的信息。
-
列表 :列表用于说明一系列条目是彼此相关的。
-
表格 :表格是按行与列将数据组织在一起的形式。也有不少人使用表格进行页面布局。
-
表单 :表单通常由文本输入框,按钮,多选框,单选框,下拉列表等组成,使HTML页面更有交互性。
-
框架 :框架使页面里能包含其它的页面。
四、对于HTML我会说哪些概念?
文档:HTML文档俗称网页。
标签:用尖括号包围的关键词我们成为标签。通常HTML标签成对出现,如:<a>、</a>。
- 开始标签:标签对中的第一个标签是开始标签,也成为开放标签。如<a>。
- 结束标签:标签对中的第二个标签是结束标签,也成为闭合标签。如</a>。
元素:我们把匹配的标签对以及它们包围的内容称为元素。即(元素 = 开始标签 + 内容 + 结束标签)。如:<a href="http://hanzhaoxin.cnblogs.com/">我的博客</a>。
- 块级元素:在浏览器默认显示时以新行来开始(和结束)的元素。
- 内联元素:又称行内元素,在浏览器默认显示时在同一行按从左至右顺序显示,不单独占一行的元素。
属性:开始标签中那些以名称/值对的形式出现的内容,我们称之为属性。如上例中:href="http://hanzhaoxin.cnblogs.com/"。(href是属性名称,"http://hanzhaoxin.cnblogs.com/"是属性值)。
谈前端(HTML篇)第二课:常见元素
一、根元素
<doctype> | 定义文档类型。 |
<html> | 定义 HTML 文档。 |
二、元数据元素
<head> | 定义关于文档的信息。 |
<meta> | 定义关于 HTML 文档的元数据。 |
<link> | 定义文档与外部资源之间的关系,一般用于引入样式表。 |
<base> | 定义页面上所有链接的默认地址或默认目标。 |
<title> | 定义文档标题。 |
<style> | 定义文档的样式信息。 |
三、脚本元素
<script> | 定义客户端脚本。 |
<noscript> | 定义当浏览器不支持脚本的时候所显示的内容 |
四、块元素
<body> | 定义文档的主体。 |
<h1>、<h2>...<h6> | 定义文档标题。 |
<p> | 定义文档段落。 |
<blockquote> | 定义块引用。 |
<ul>、<ul>、<dl> | 定义列表。 |
<table> | 定义表格。 |
1、列表元素
- 无序列表
<ul> 定义无序的列表。 <li> 定义列表项。 - 有序列表
<ol> 定义有序的列表。 <li> 定义列表项。 - 定义列表
<dl> 定义定义列表。 <dt> 定义定义术语。 <dd> 定义定义描述。
2、表格元素
<table> | 定义表格。 |
<thead> | 定义表格的页眉。 |
<tbody> | 定义表格的主体。 |
<tfoot> | 定义表格的页脚。 |
<th> | 定义表格的表头行。 |
<tr> | 定义表格的行。 |
<td> | 定义表格单元。 |
五、文本元素
1、文本格式化元素
<em> | 定义着重文字。 |
<strong> | 定义加重语气。 |
<sup> | 定义上标字。 |
<sub> | 定义下标字。 |
<ins> | 定义插入字。 |
<del> | 定义删除字。 |
<b> | 定义粗体文本。 |
<i> | 定义斜体文本。 |
<big> | 定义大号字。 |
<small> | 定义小号字。 |
2、“计算机输出”标签
<code> | 定义计算机代码。 |
<kbd> | 定义键盘码。 |
<pre> | 定义预格式文本。 |
3、引用、引用和术语定义
<q> | 定义简短引用。 |
<blockquote> | 定义长引用。 |
<address> | 定义地址。 |
六、链接与图像
<a> | 定义超链接 |
<img> | 定义图像。 |
<map> | 定义图像地图。 |
<area> | 定义图像地图中的可点击区域。 |
七、<div> 和 <span>
<div> | 定义文档中的分区或节(division/section)。 |
<span> | 定义 span,用来组合文档中的行内元素。 |
八、框架
<frameset> | 定义如何将窗口分割为框架。(注:<frameset>元素只能嵌套在<html> 元素或<frameset>元素自身中!) |
<frame> | 定义放置在每个框架中的 HTML 文档。 |
九、内联框架
<iframe> | 定义内联的子窗口(框架)。 |
十、表单元素
<form> | 定义供用户输入的表单。 |
<input> | 定义输入域。 |
<textarea> | 定义文本域 (一个多行的输入控件)。 |
<lable> | 定义一个控制的标签。 |
<select> | 定义一个选择列表。 |
<option> | 定义下拉列表中的选项。 |
<optgroup> | 定义选项组。 |
<button> | 定义一个按钮。 |
<fieldset> | 定义域。 |
<legend> |
定义域的标题。 |
1、核心属性
属性 | 描述 |
id | 设置元素的唯一 id。 |
class | 设置元素的一个或多个类名(引用样式表中的类)。 |
style | 设置元素的行内样式(CSS内联样式)。 |
title | 设置有关元素的额外信息(可在工具提示中显示)。 |
2、语言属性
属性 | 描述 |
lang | 设置元素内容的语言代码。 |
3、键盘属性
属性 | 描述 |
accesskey | 设置访问元素的键盘快捷键。 |
tabindex | 设置元素的 tab 键次序。 |
二、常见元素属性:
1、<a>元素的属性:
属性 | 描述 |
href | 指定链接到互联网或你的计算机上的一个资源的别称。 |
target | 指定打开链接的目标窗口。 |
title | 指定所要链接到页面的文本描述。 |
2、<img>元素的属性:
属性 | 描述 |
src | 指定向服务器请求的资源。 |
alt | 指定图像无法显示时的替代文本。 |
空元素或者void元素:<br>,<img>
字符实体:<: < ,>:> ,&:&,版权符号:©right
比如:the <html> element rocks 代码:the < html > element rocks
<a>属性:可以通过相对路径来链接同一网站的页面,也可以通过url绝对路径来链接其他网站的页面。
可以通过id属性连接到页面的特定位置 比如:1.id=“chai”2. <a href="index.html#chai">.....</a>
也比如:<a href="#top">back to top</a>同页面的目标链接。
<a href="....",title="...对链接的内容进行描述">........</a>
<a target="_blank" href="...">...</a>:在新窗口打开一个页面
<img>属性:<img src="...." alt="图片不显示时对图片信息的描述">。alt属性不可不写。
编写html页面的原则:
1.一定要以<doctype>开头 <!doctype html>
2.在<head>中指出正确的字符编码。 用<meta charset="utf-8">来标记
3.在<head>中一定包含一个<title>元素
编写好html以后,ctrl+s保存,然后打开浏览器访问即可。