一、HTML
1.HTML语法
代码如下(示例):
<!DOCTYPE html> <!-- 文档声明 -->
<html lang="en"> <!-- html开始标签 -->
<head> <!-- head开始标签 -->
<meta charset="UTF-8"> <!-- meta标签只有开始标签 -->
<title>Document</title> <!-- title标签的开始和结束标签写在了同一行 -->
<style>
p{color:red;} /*style内部为样式,语法与html不同*/
</style>
</head> <!-- head结束标签 -->
<body> <!-- body开始标签 -->
<p>我的第一个网页</p>
</body> <!-- body结束标签 -->
</html> <!-- html结束标签 -->
-
html语法有以下四个特征
- 大部分HTML标签都是成对出现的,【开始标签】是一对尖括号中间写入标签名,而【结束标签】相对于【开始标签】会在标签名之前添加一个斜杠。例如上面案例中
- 有些标签只有【开始标签】,没有【结束标签】。例如上面案例中meta标签,它就没有结束标签
- 开始标签中可以填写一些其他信息,例如meta中的charset=“UTF-8”,这叫做HTML标签的【属性】,用来进一步描述标签的信息。
- HTML标签可以相互嵌套,例如body标签中嵌套了p标签,而body标签本身又在最外层的html标签中
2.常见的标签
HTML标签有上百个之多,我们只要掌握常见的html标签,就可以完成丰富的网页。而且我们在后续的项目开发当中,也是仅仅只使用这十几个标签而已。
在浏览网页时我们经常会看到一篇文章的标题,或是文章中某一段落的标题。像这样的标题,我们使用标题标签h*(*代表着1-6六个数字)
代码如下(示例):
<h1>一级标题标签</h1>
<h2>二级标题标签</h2>
<h3>三级标题标签</h3>
<h4>四级标题标签</h4>
<h5>五级标题标签</h5>
<h6>六级标题标签</h6>
运行以上代码我们发现,标题标签会呈现一种加粗效果,h1字体大小最大,从h1-h6字体逐渐变小。
<!--
<ul> 标签用来定义无序列表,将 <ul> 标签与 <li> 标签一起使用,就可以创建无序列表。
-->
<h1>水果列表</h1>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>草莓</li>
</ul>
<!--
<ol> 标签可以定义有序列表,将 <ol> 标签与 <li> 标签一起使用,就可以创建有序列表,列表排序以数字来显示。
-->
<h1>水果列表</h1>
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>草莓</li>
</ol>
<!--
<dl> 标签可以定义描述列表,<dl> 标签与 <dt> 和 <dd> 一起使用,创建自定义列表(描述列表)。
-->
<dl>
<dt>香港四大天王</dt>
<dd>刘德华</dd>
<dd>郭富城</dd>
<dd>黎明</dd>
<dd>张学友</dd>
</dl>
<a href="http://baidu.com">点我可以跳转到百度</a>
<a href="demo01.html">点我跳转到demo01.html文件</a>
<a href="#footer">点我跳转到页尾</a>
上面我们已经提到了HTML标签的【属性】,【属性】用来进一步描述标签。例如上面的三个例子,我们可以使用href属性设置不同的a标签链接到不同的位置。
关于href属性的值有示例代码中的三种设置方式,使用方法如下所述:
- 跳转到其他网站,网址前要写http://或https://。
- 跳转到当前网站(或本机文件),可以直接填写相对路径或绝对路径。
- 可以通过设置锚点的方式,让网页跳转到当前页面的指定位置。
在实际开发中,我们经常会将超链接放在列表中
代码如下(示例):
<ul>
<li><a href="http://baidu.com">百度</a></li>
<li><a href="http://163.com">网易</a></li>
<li><a href="http://qq.com">腾讯</a></li>
</ul>
<img src="images/logo.png" alt="文件无法显示">
img标签涉及到两个重要的属性:
- src属性可以指定要显示的图片源文件的路径;路径分为绝对路径和相对路径。
相对路径就是:指目标相对于当前文件的路径,网页结构设计中多采用这种方法来表示目标的路径。相对路径有多种表示方法,其表示的意义不尽相同。
绝对路径:是指完整的网址
div标签在网页中没有明确的语义,可以说它是一个【无语义标签】,div标签常常用来作为一个容器存放其他标签,是一个很重要的布局工具,它是个块级元素(后面会讲到块级元素,行内元素以及行内块的区别,这里了解一下就可以了)
代码如下(示例):
<div>这是一个容器</div>
span标签与div标签类似,同样是一个【无语义标签】,通常用来存放文本内容。它是个行内元素。
代码如下(示例):
<h1>我最喜欢的颜色是蓝色</h1>
<h1>我最喜欢欢的颜色是<span>蓝色</span></h1>
在上面的第一行代码中,所有的文本都存放在h1标签当中,我们只能给这些文字统一设置样式。如果我们希望只给蓝色设置样式,那么就需要用到第二行的写法。这样我们就可以单独给蓝色两个字设置样式了。
如果需要单独设置文字的样式,又没有什么特别的语义,那么就需要用到span标签。
3.常用的html属性
除了上面讲过的a标签的href属性和img标签的src属性和alt属性,接下来我们再说两个常用的属性。
代码如下(示例):
<div id="top">id属性就是标签的身份证</div>
<div class="box">class属性可以给标签分类</div>
<div class="box">class属性可以给标签分类</div>
<div class="box">class属性可以给标签分类</div>
id属性就像标签的身份证一样,不能重复,例如我们已经编写了一个id为top的属性,那么后续的标签中就不能再有id为top的标签。我们可以通过id找到HTML文档中的唯一元素,并设置其样式(第04节我们讲解如何使用css选择器找到指定元素)。
class属性可以将HTML标签分类,我们可以通过box属性找到所有class值为box的HTML标签。
总结
华丽的网页界面,都是由静态网页和一些动态效果,插入的视频,和flash等等,不得不说,静态网页的制作,是学习网页的必经之路,可见静态网页在学习网页的前端是十分重要。静态网页主要是通过html制作。