HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。
CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。
练习:为Hello World添加样式
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Html和CSS的关系</title> <style type="text/css"> h1{ font-size:12px; color:#930; text-align:center; } </style> </head> <body> <h1>Hello World!</h1> </body> </html>认识Html标签
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>认识html标签</title> <style type="text/css"> img{ border-radius:100px; box-shadow:2px 2px 8px; } </style> </head> <body> <h1>勇气</h1> <p>三年级时,我还是一个胆小如鼠的小女孩。</p> <p>到了三年级下学期。</p> <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" > </body> </html>勇气是网页内容文章的标题,<h1></h1>就是标题标签,<p></p>是段落标签。图片由 img 标签来完成,网页上写成<img src = "图片点击">
标签的语法
1.标签由英文尖括号< 和 > 括起来,如 <html> 就是一个标签。
2.html中的标签一般都是成对出现的,分开始标签和结束标签,开始标签比结束标签多了一个 /。
(1) <p></p> (2) <div></div> (3) <span></span>3.标签与标签之间是可以嵌套的,但是先后顺序必须保持一致,如:<div>里嵌套<p>,那么</p>必须放在</div>的前面。
<html>根标签 <head>...</head>头部标签 <body>...</body>内容标签 </html>根标签<html></html> 成为根标签,所有的网页标签都在 <html></html> 中。
<head> 标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title>、<script>、<style>、<link>、<meta>等标签, 头部元素在下一节中会有详细介绍。 3.在 <body> 和 </body> 标签之间的内容是网页的主要内容, 如 <h1>、<p>、<a>、<img> 等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。
<title>标签-定义了HTML文档的标题
<base>标签 - 定义了所有链接的URL 。
<meta>标签 - 提供了HTML文档的meta标记
<head> 元素包含了所有的头部标签元素。在 元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。 可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
<html></html>成为根标签,所有的网页标签都在<html></html>中。
<head> 标签用于定义文档的头部,它是所有头部元素的容器。头部元素有 <title>、<script>、<style>、<link>、<meta>
在 <body> 和 </body> 标签之间的内容是网页的主要内容, 如 <h1>、<p>、<a>、<img> 等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。
<title> 标签定义了不同文档的标题。
<title> 在 HTML/XHTML 文档中是必须的。
<title> 元素:
定义了浏览器工具栏的标题
当网页添加到收藏夹时,显示在收藏夹中的标题
显示在搜索引擎结果页面的标题
<base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接:
<head> <base href="http://www.runoob.com/images/" target="_blank"> </head><link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表:
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head><style> 标签定义了HTML文档的样式文件引用地址. 在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:
<head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head><script>标签用于加载脚本文件,如: JavaScript。
<script> 元素在以下章节会详细描述。