image.png
什么是 HTML？
- HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
HTML的操作思想
网页中有很多数据，不同数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据包起来（封装起来），通过修改这些标签的属性值实现数据样式的变化；一个标签相当于一个容器，想要修改容器内的数据样式，只需要修改容器的属性值，就可以实现容器内的数据样式的变化
一个简单的 HTML 长什么样
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML头部
1.<head>元素
- <head> 元素包含了所有的头部标签元素
- 在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息
- 可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>
2.<title>元素
- <title> 标签定义了不同文档的标题
- 在 HTML/XHTML 文档中是必须的。
1>定义了浏览器工具栏的标题
2>当网页添加到收藏夹时，显示在收藏夹中的标题
3>显示在搜索引擎结果页面的标题
3.<link>元素
- 标签定义了文档与外部资源之间的关系
<link> 标签通常用于链接到样式表，例如，
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
4.<style> 元素
- <style> 标签定义了HTML文档的样式文件引用地址，例如，
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
5.<meta>标签
- 为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> - 为网页定义描述内容:
<meta name="description" content="免费 Web & 编程 教程"> - 定义网页作者:
<meta name="author" content="Runoob"> - 每30秒中刷新当前页面
<meta http-equiv="refresh" content="30">
HTML 标签
- HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如
和</br> - 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
几个常用的HTML标签
1.HTML 标题（Heading）是通过 <h1>-<h6>等标签进行定义的。
实例
<h1>Hello</h1>
<h2>HTML</h2>
2.HTML 段落是通过<p> 标签进行定义的。
实例
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
3.HTML 链接是通过 <a>标签进行定义的。
实例
<a href="http://www.w3school.com.cn">This is a link</a>
4.HTML 图像是通过<img>标签进行定义的。
实例
5.HTML <table> 标签
实例
一个简单的 HTML 表格，包含两行两列：
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
6.HTML 列表
1)无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于<ul>标签。每个列表项始于 <li>。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
2)有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
实例
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
HTML区块
1.内联元素（inline element）
内联元素在显示时通常不会以新行开始
例如<b>, <td>,<a>,<img>
2.块状元素（block level element）
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例如<h1>,<p>,<ul>, <table>
3.<div>元素
<div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
4.<span>元素
<span> 元素是内联元素，可用作文本的容器。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
注：想更多了解HTML相关标签，请点击http://www.w3school.com.cn/tags/tag_table.asp
想更多了解HTML教程，可点击http://www.imooc.com/learn/9 观看视频教学
网友评论