初识HTML、HTML标签

什么是HTML?

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

常用标签

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>
</html>

HTML标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的.

h1到h6越来越小一个页面h1只能有一个

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<a href="http://www.runoob.com">这是一个链接</a>
<!--这是图片-->
<img src="/images/logo.png" width="258" height="39" />
	
</body>
</html>

下划线

size: 粗细 color:颜色

单标签

字体标签

font双标签,字体标签,可以设置字号与颜色

b双标签,默认加粗

i双标签,默认倾斜

图片标签

src:图片的链接地址、路径(相对路径、绝对路径)

width:图片的宽度 height:图片的高度

超链接标签

<a href="http://www.baidu.com" >找度娘</a>

点击后,自动跳转:

href: 超链接地址

target: 打开方式 1、_blank 在新窗口打开 2、_self 在原窗口打开

title: 鼠标悬停在a标签上出现的文字

列表

无序列表、有序列表、自定义列表

<!--无序列表 unorder list -->
<ul>
    <li>苹果 </li>
    <li>西瓜 </li>
    <li>草莓 </li>
    <li>香蕉 </li>
    <li>橘子 </li>
</ul>

<!--有序列表 order 复合标签 list
    li 每一条数据
    -->
<ol>
    <li>鼠</li>
    <li>牛</li>
    <li>虎</li>
    <li>兔</li>
    <li>龙</li>
    <li>蛇</li>
</ol>

<!--自定义列表 defind list
    dt 标题
    dd 内容
    font-weight: 100-900整数 -->
<dl>
    <dt>人工服务</dt>
    <dd>111</dd>
    <dd>222</dd>
    <dd>333</dd>
    <dd>444</dd>
</dl>

表格标签

表格标签 table 作为整体表格的容器

caption标签,代表表格标题

tablerow tr标签,代表表格中的行

tablehead th标签,代表表头元素

tabledata td标签,代表普通内容单元格

th 与 td需要写在tr中,而tr需要写在table中

border属性: 保证表格有边框的存在

cellspacing属性:单元格与单元格之间的间隙

cellpadding属性:单元格与自身内容之间的间隙

width属性:设置表格,单元格的宽度(列的宽度)

height属性:设置表格,单元格的高度,行的高度

align属性:left 左对齐 center居中 right 右对齐

bgcolor:设置表格整体,行,单元格的背景颜色

rowspan属性:行合并

colspan属性:列合并

<table align="center" width="500" border="1" cellspacing="0" cellpadding="">
			<caption>班级信息表</caption>
			<tr height="200" align="center">
				<th>姓名</th>
				<th width="200">年龄</th>
				<th>性别</th>
				<th>电话号码</th>
			</tr>
			<tr bgcolor="red">
				<td align="right">王聪</td>
				<td>22</td>
				<td rowspan="2">女</td>
				<td>110</td>
			</tr>
			<tr>
				<td>张浩</td>
				<td>21</td>
				<!--<td>女</td>-->
				<td>119</td>
			</tr>
			<tr>
				<td colspan="2">李尚娴</td>
				<!--<td>22</td>-->
				<td>男</td>
				<td>120</td>
			</tr>
		</table>