HTML入门
2015-07-28 20:55
447 查看
HTML，即为超文本语言。它不是一种编程语言，而是一种标记语言。同时，它是标记语言里的一套标记标签。确切地说，HTML是使用标记标签来描述网页的一种标记语言。
一个HTML文件是有自己固有的结构的。
HTML文件基本结构：<html>
<head>……</head>
<body>……</body>
</html>
<html></html>是根标签，所有网页标签都在<html></html>中。<head></head>用于定义文档头部，是所有头部元素（<title>、<script>、<style>、<link>、<meta>等标签）的容器。<body></body>标签之间的内容是网页主要内容，如：<h1>、<p>、<a>、<img>等网页内容标签，在这里标签中的内容会在浏览器显示出来。而浏览器的作用是读取HTML文档，并以网页形式显示它们。
PS：在编写HTML中建议使用小写！
HTML基础
一、HTML标题
通过<h1><h2><h3><h4><h5><h6>这六个标签进行定义。数字1字体最大最粗，随着数字的增大，字体逐渐减小，直至6号最小最细（但最细的还是比正常字样粗）。在定义标题的时候，应该将h1用作主标题（最重要），其次是h2（次重要），以此类推。
PS：由于标题标签可以使字体加粗变大，因此有一部分朋友可能会想要走捷径用标题标签使字体变粗变大。在此，小编建议尽量不要用此方法。因为HTML的标题所包含的内容会优先在浏览器上搜索的时候被显示出来，方便搜索。
二、HTML段落
通过<p></p>标签进行定义。（在定义的时候不要忘记结束标签！）
当要标注空段落的时候，在<p></p>中从插入一个空行是坏习惯，应该用<br />标签代替它。即在不产生一个新段落的情况下换行用<br />标签
在显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个格。需要注意，HTML代码中所有连续的空行（换行）也被显示为一个空格。
三、HTML链接（HTML使用超级链接与网络上的另一个文档相连）
通过<a></a>标签进行定义。如：<a href="http://www.baidu.com">百度一下</a>，其中href是一个属性，在href属性中指定链接地址。
链接语法：<a href="url">Link text</a>。href属性规定链接目标；开始和结束标签之间的文字作为超级链接来显示，只要点击在浏览器该文本，即可完成网页跳转。
a标签里可以插入各种和多种属性，现在介绍两个常用的属性：
target属性：使用target属性，你可以定义被链接的文档在何处显示（把target属性设置为"_blank"，该链接会在新窗口打开；属性设置为"—top"，该链接会回到首页。）
name属性：用来规定锚（后续会介绍）的名称。创建HTML页面中书签，书签不会以任何特殊方式显示，对读者不可见。当使用命名锚时，可以创建直接跳至该命名锚的链接。语法：<a name="label">锚（显示在页面上的文本）</a>（其中的name可用id替换）
创建一个书签：<a name="tips">有用的提示</a>，然后，同一个文档创建指向锚的链接：<a href="#tips">有用的提示</a>（将#符号和锚名称添加到url末端，就可以直接链接到tips这个命名锚了）
PS:“链接文本”不必一定是文本，图片或其他HTML元素都可成为链接。
四、HTML图像
通过<img>标签进行定义。<img>是空标签，只包含属性，没有闭合标签。要在页面上显示图像，要使用源属性（src，源于source）。源属性的值是图像的url地址。语法：<img src="url" />(url指存储图像的地方，如有目录，也要加在里面)
一般情况下，如果没有指明图像的路径，图像要跟网页文件放在同一个文件夹，相当于相同路径。如果想从不同位置插入图片，则要把图像文件所在的准确路径也放在img语句里。如：<img src="C:\Users\Administrator\Desktop\HTML\最爱.jpg" />
设置网页背景（gif和jpg均可）：可以在body标签插入background="url"即可。
设置图像在网页位置：在img标签里src属性后插入align="site"（site为bottom、middle、top、left、right等）。即<img src="…" align="…" />
调整图像尺寸：在<img>标签中插入width和height属性即可
替换文本属性（Alt）：alt属性用来为图像定义一串预备的可替换文本。如：<img src="boat.gif" alt="Big Boat" />
PS：由于网页加载图片需要时间，所以要慎用图片。
五、HTML属性
属性为HTML元素提供附加信息，而且属性总是在HTML元素的开始标签中规定。
<h1 align="center">拥有关于对齐方式的附加信息；<body bgclolr="yellow">拥有关于背景颜色的附加信息；<table border="1">拥有关于表格边框的附加信息；<table>定义html表格。
应用属性的时候要始终为属性值加引号，属性值应该始终被包括在引号内。双引号最常用，单引号也没问题。在某些个别情况下，比如属性值本身就含有双引号，那么必须使用单引号。如：name='Bill "Hello World" Gates'。
补充：
1、只用一个<hr />即可用来创建水平线（hr元素可用于分隔内容）。
2、如果想要在HTML文件上写注释，可用<!--This is a comment-->。
3、查看源代码的方法：单击右键，选择“查看源文件”（IE）或者“查看页面源代码”（Firefox），其他浏览器类似。
（以上内容主要参考w3school.com.cn和慕课网，仅用作学习）
一个HTML文件是有自己固有的结构的。
HTML文件基本结构：<html>
<head>……</head>
<body>……</body>
</html>
<html></html>是根标签，所有网页标签都在<html></html>中。<head></head>用于定义文档头部，是所有头部元素（<title>、<script>、<style>、<link>、<meta>等标签）的容器。<body></body>标签之间的内容是网页主要内容，如：<h1>、<p>、<a>、<img>等网页内容标签，在这里标签中的内容会在浏览器显示出来。而浏览器的作用是读取HTML文档，并以网页形式显示它们。
PS：在编写HTML中建议使用小写！
HTML基础
一、HTML标题
通过<h1><h2><h3><h4><h5><h6>这六个标签进行定义。数字1字体最大最粗，随着数字的增大，字体逐渐减小，直至6号最小最细（但最细的还是比正常字样粗）。在定义标题的时候，应该将h1用作主标题（最重要），其次是h2（次重要），以此类推。
PS：由于标题标签可以使字体加粗变大，因此有一部分朋友可能会想要走捷径用标题标签使字体变粗变大。在此，小编建议尽量不要用此方法。因为HTML的标题所包含的内容会优先在浏览器上搜索的时候被显示出来，方便搜索。
二、HTML段落
通过<p></p>标签进行定义。（在定义的时候不要忘记结束标签！）
当要标注空段落的时候，在<p></p>中从插入一个空行是坏习惯，应该用<br />标签代替它。即在不产生一个新段落的情况下换行用<br />标签
在显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个格。需要注意，HTML代码中所有连续的空行（换行）也被显示为一个空格。
三、HTML链接（HTML使用超级链接与网络上的另一个文档相连）
通过<a></a>标签进行定义。如：<a href="http://www.baidu.com">百度一下</a>，其中href是一个属性，在href属性中指定链接地址。
链接语法：<a href="url">Link text</a>。href属性规定链接目标；开始和结束标签之间的文字作为超级链接来显示，只要点击在浏览器该文本，即可完成网页跳转。
a标签里可以插入各种和多种属性，现在介绍两个常用的属性：
target属性：使用target属性，你可以定义被链接的文档在何处显示（把target属性设置为"_blank"，该链接会在新窗口打开；属性设置为"—top"，该链接会回到首页。）
name属性：用来规定锚（后续会介绍）的名称。创建HTML页面中书签，书签不会以任何特殊方式显示，对读者不可见。当使用命名锚时，可以创建直接跳至该命名锚的链接。语法：<a name="label">锚（显示在页面上的文本）</a>（其中的name可用id替换）
创建一个书签：<a name="tips">有用的提示</a>，然后，同一个文档创建指向锚的链接：<a href="#tips">有用的提示</a>（将#符号和锚名称添加到url末端，就可以直接链接到tips这个命名锚了）
PS:“链接文本”不必一定是文本，图片或其他HTML元素都可成为链接。
四、HTML图像
通过<img>标签进行定义。<img>是空标签，只包含属性，没有闭合标签。要在页面上显示图像，要使用源属性（src，源于source）。源属性的值是图像的url地址。语法：<img src="url" />(url指存储图像的地方，如有目录，也要加在里面)
一般情况下，如果没有指明图像的路径，图像要跟网页文件放在同一个文件夹，相当于相同路径。如果想从不同位置插入图片，则要把图像文件所在的准确路径也放在img语句里。如：<img src="C:\Users\Administrator\Desktop\HTML\最爱.jpg" />
设置网页背景（gif和jpg均可）：可以在body标签插入background="url"即可。
设置图像在网页位置：在img标签里src属性后插入align="site"（site为bottom、middle、top、left、right等）。即<img src="…" align="…" />
调整图像尺寸：在<img>标签中插入width和height属性即可
替换文本属性（Alt）：alt属性用来为图像定义一串预备的可替换文本。如：<img src="boat.gif" alt="Big Boat" />
PS：由于网页加载图片需要时间，所以要慎用图片。
五、HTML属性
属性为HTML元素提供附加信息，而且属性总是在HTML元素的开始标签中规定。
<h1 align="center">拥有关于对齐方式的附加信息；<body bgclolr="yellow">拥有关于背景颜色的附加信息；<table border="1">拥有关于表格边框的附加信息；<table>定义html表格。
应用属性的时候要始终为属性值加引号，属性值应该始终被包括在引号内。双引号最常用，单引号也没问题。在某些个别情况下，比如属性值本身就含有双引号，那么必须使用单引号。如：name='Bill "Hello World" Gates'。
补充：
1、只用一个<hr />即可用来创建水平线（hr元素可用于分隔内容）。
2、如果想要在HTML文件上写注释，可用<!--This is a comment-->。
3、查看源代码的方法：单击右键，选择“查看源文件”（IE）或者“查看页面源代码”（Firefox），其他浏览器类似。
（以上内容主要参考w3school.com.cn和慕课网，仅用作学习）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- 通过Mootools 1.2来操纵HTML DOM元素
- WEB标准网页布局中尽量不要使用的HTML标签
- Flash 与 html 的一些实用技巧
- html工作中表格<tbody>标签的使用技巧
- HTML 向 XHTML1.0 兼容性指导
- C#自写的一个HTML解析类（类似XElement语法）
- 没有文件大小限制并免费的PDF到HTML转换工具
- css实现气泡框效果(实例加图解)
- html链接与文本标签们
- html活用软字符连接符
- 浅谈html中id和name的区别实例代码
- HTML <!DOCTYPE> 标签
- asp中实现清除html的函数
- Android的TextView与Html相结合的具体方法
- jQuery设置和获取HTML、文本和值示例
- 『jQuery』.html(),.text()和.val()的概述及使用
- php正则替换处理HTML页面的方法
- PHP抓取网页、解析HTML常用的方法总结