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常用的方法总结