您的位置：首页 > Web前端 > HTML

HTML学习之网页制作基础和常用标签及标签属性

2016-04-12 16:40 691 查看

静态网页的制作

静态网页是由html、css、JavaScript三种元素构成；
HTML的作用是将数据信息在网页中显示；
CSS的作用是对页面进行修饰；
JavaScript的作用是让用户可以和页面进行简单的交互；
HTML

超文本标记语言（Hyper Text Markup Language）， “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素；
超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容；

Html是超文本标记语言，它是由很多个标记组成。标记一般是成对出现的。如<tag></tag>这就是一对标记。当然如果标记中不包含内容我们可以写成<tag/>；

HTML也是规范，它由W3C制定，我们现在学习的是HTML4。HTML5规范还处于策划期，为web2.0而生。
规范制定者 w3c <img src=”图片路径”>在浏览器中显示一张图片。
规范实现者各个浏览器厂商
HTML 解释执行，可以跨平台。
HTML不区分大小写

B/S访问结构图

如何创建网页文件

新建一个文本文件，将其命名为xxx.html或者xxx.htm（注意后缀名问题）
在网页中都是通过标签来指定相应显示的内容的，所有的网页内容都必须在<html>中，每一个标签都应该有相应的开始和结束<html>就表示开始,</html>就表示结束。网页中的标签的都用小写（虽然大写也可以，但是基于xhtml的标准就是全部用小写）
HTML注意编写事项

对于html而言，有两种写法是不允许的:第一种是只有开始标签没有结束标签。
标签不能嵌套，以下写法是不允许的<aaa>sssss<bbb></aaa></bbb>；
编写网页文件需要成对编程;
HTML常用标签head，body

Head标签中的内容是不会在网页中显示的，一般用来设置页面的标题(title),获取可以设定相应外部文件的引入，或者设置相应的meta等信息；
<title>Document</title>代表网页的标题;
<body>网页的主体</body> body
元素定义文档主体，包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）
HTML常用标签-meta

<META http-equiv="Content-Type"content="text/html; charset=gb2312">告诉浏览器，使用gb2312编译运行我
<META http-equiv="Refresh"content="10; url=http://yourlink">
代表多少秒后网页自动跳转
<META name="Description"content="...">
<META name="Keywords" content="学习,英语学习">
HTML常用标签

<body bgcolor=”背景颜色”background=”背景图片”>
<br> 换行
<p> 段落，前后有空行
<pre>中间的内容按照原始风格显示。
<h1>---<h6> 标题标记

HTML用<h1>到<h6>这几个Tag来定义正文标题，从大到小。每个正文标题自成一段
用<hr>这个Tag可以在HTML文件里加一条横线，<Hr>没有结束标签
段落划分
在HTML里用<p>和</p>划分段落,<P>可以不成对出现。
通过使用<br>这个Tag，可以在不新建段落的情况下换行。<br>没有Closing Tag。
用<p>换行是个坏习惯，正确的是使用<br>,即在行末加入<br>
HTML常用标签A

HTML用<a></a>来表示超链接
<a></a>可以指向任何一个文件源：一个HTML网页，一个图片，一个影视文件等。用法如下：
<a href="url">链接的显示文字</a>
点击<a></a>当中的内容，即可打开一个链接文件，href属性则表示这个链接文件的路径

<a href=””>文字或图片</a>
<a name=”锚点名称”/>
<a href=1062536407@qq.com>联系我</a>
HTML常用标签A链接

链接的target属性使用链接的target属性，target=“_blank ”可以在一个新窗口里打开链接文件；
链接的title属性使用链接的title 属性，可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释；
链接到email地址在网站中，你经常会看到“联系我”的链接，一点击这个链接，就会触发你的邮件客户端，比如Outlook Express，然后显示一个新建mail的窗口。用<a>可以实现这样的功能；<a href=1062536407@qq.com>联系我</a>
HTML中文本标签

HTML定义了一些文本格式的Tag，比如利用Tag，可以将字体变成粗体或者斜体。从下面的示例，你可以了解各种文本格式Tag如何改变HTML文本的显示。
<font size="2“ color=“red” face="arial">字体大小的值是2</font>
<b></b>粗体bold
<i></i>斜体
<U></U>下划线
HTML相对路径

HTML有2种路径的写法：相对路径和绝对路径。
相对路径：就是相对于这个html我引用文件目录在那里；如果源文件和引用文件在同一个目录里，直接写引用文件名即可。

../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推
引用下级目录的文件，直接写下级目录文件的名称路径即可

HTML绝对路径是文件在操作系统中的磁盘存放路径；
HTML图片标签

用 <img>这个 Tag 可以在HTML里面插入图片。最基本的语法如下：
<img src="url">url表示图片的路径和文件名。比如 url 可以是
images/logo/blabla_logo01.gif，也可以是个相对路径 "../images/logo/blabla_logo01.gif"

HTML中的属性

用align属性，可以改变水平对齐方式(居左、居中、居右)。
用valign属性，可以改变图片的垂直(居上、居中、居下)对齐方式图片的大小
在缺省状况下，图片显示原有的大小。你可以用height和width属性改变图片的大小。不过图片的大小一旦被改变，图片会相应放大或缩小，显示出来的结果可能会很难看

HTML的 <body> 有两个关于背景的属性，
bgcolor属性用来设置HTML网页的背景颜色。
background属性用来设置HTML网页的背景图片。background属性值就是背景图片的路径和文件名，如果背景图片小于网页显示窗口，那么这个背景图片会自动重复
HTML注释

在HTML文件里，你可以写代码注释，解释说明你的代码，这样有助于你和他人日后能够更好地理解你的代码。
注释可以写在之间。浏览器是忽略注释的，你不会在HTML正文中看到你的注释。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航