HTML 超文本标记语言，最重要的就是标签，这篇博客就简单的介绍下刚了解到的部分标签；
先了解一下单标签和双标签的格式：
- 单标签：<标签名 属性名=“属性值”/>
- 双标签：<标签名 属性名=“属性值”>内容</标签名>
然后开始根据例子看标签的作用；
注意：HTML 的注释为<!---->，这里为了方便使用Java注释：//
<!DOCTYPE html> //声明使用 HTML5 版本
<html>
<head>
<meta charset="utf-8" /> //声明编码类型
<link rel="shortcut icon" href=img/favicon.ico type=image/x-icon>
<title>百度一下，你就知道</title>
</head>
<body>
</body>
</html>-
<html></html> 标签是规定好的固定格式；
-
<head></head>标签是HTML的头标签部分；其中的内容都是下图黄色荧光色以上的部分；
-
head 标签有几个属性，meta 是声明编码类型的；title 是确定文档头部的容器（参照下图）；link 是确定 title 前的小图标的，就是下图中那个用蓝色笔圈起来的部分；
-
body 标签是决定文档的内容，处于下图黄色荧光色一下的部分，因为没有写任何标签和属性，故下图黄色部分以下部分没东西；
接下来我们就着重介绍body中的标签与相对应的部分属性；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href=img/favicon.ico type=image/x-icon>
<title>百度一下，你就知道</title>
</head>
<body>
<img src="img/volvo.png" width=50% title="This is a car">
<a href="http://www.baidu.com" target="_blank">百度</a> ©
</body>
</html>
这是上个HTML用浏览器执行出来的结果；
-
img 是引用图片的标签，有三个属性 src 使用哪张图片，即设置图片的路径； width 属性确定图片的宽度占浏览器窗口宽度的多少，单位可以是像素，可以是%，默认为100%；height 是高度属性，同 width；title 当浏览者使用鼠标移动到图片上时提示的内容；
-
a 标签，超链接标签； href 填写跳转的网站的网址；target 决定跳转网页直接在本页面跳转还是新开一个窗口跳转，默认是本页面跳转，这里_blank 是新开一个窗口跳转；
-
HTML语言不会自动换行，即HTML不会因为你的 enter 而换行，并且无论你两个代码之间隔了多少个空格，浏览器执行后都只保留一个空格；因此，当我们需要使用多个空格隔开两个东西时，使用 填充空格，一个 代表一个空格； © 是特殊符号，HTML里面有很多特殊符号的标签，这里不再细说；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href=img/favicon.ico type=image/x-icon>
<title>百度一下，你就知道</title>
</head>
<body>
<i>郑州大学</i>
<b>郑州大学</b>
<del>郑州大学</del>
<span>郑州大学</span>
<div>郑州大学</div>
<p style="text-align: center; border: black 10px solid;color:red;font-size: 36px;
font-family: 华文彩云;">郑州大学</p>
</body>
</html>
- i 标签，就是斜体，和我们用的那个world的 I 斜体一样；
- b 标签，加粗标签，也和world中的b一样；
- del 标签，删除线，效果是上图的
郑州大学； - span 标签，即不对标签内容作任何处理；在css中会有明显效果且很有用、很重要；
- div 标签，长用于文档中的分区；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div标签</title>
<style>
* {
margin: 0px;
padding: 0px;
}
#container {
margin: 0px auto;
width: 1200px;
border: 1px solid black;
}
#left_container {
width: 200px;
height: 300px;
float: left;
background-color: lightcyan;
}
#right_container {
width: 960px;
height: 450px;
float: right;
background-color: linen;
}
</style>
</head>
<body>
<div id="container">
<div id="left_container">
</div>
<div id="right_container">
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
效果如下；
- p 标签，段标签，也是块级标签，其中有很多标签属性；style 规定标签内容的格式，有 text-align 分布格式，这里是：居中 ；border 边框颜色，这里是 黑色；px（像素） 框的宽度，这里是10； solid 是边框的线条为连续实线，还有虚线等其他格式；color 标签内容的颜色，这里是 红色；font-size 是标签内容字体的大小（单位：像素/px）；font-family 标签内容的字体样式，这里是 华文彩云；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href=img/favicon.ico type=image/x-icon>
<title>百度一下，你就知道</title>
</head>
<body>
<h1>z郑州大学</h1>
<h6>z郑州大学</h6>
<ol start="1" type="I">
<li>语文</li>
<li>英语</li>
<li>数学</li>
</ol>
<ul type="circle">
<li>语文</li>
<li>英语</li>
<li>数学</li>
</ul>
</body>
</html>
- h1~h6 是标题标签；
- ol 有序列表标签；start 决定开始的数字；type 决定数字的类型；li 是列表中的内容；
- ul 无序列表标签；type 决定无序列表内容前面的小图标；这里是空心圆；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href=img/favicon.ico type=image/x-icon>
<title>百度一下，你就知道</title>
</head>
<body>
<style>
table{
border-spacing: 0px;
border: black 1px solid;
border-collapse: collapse;
width: 30%;
}
th{
border: black 1px solid;
}
td{
border: black 1px solid;
}
</style>
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>手机</th>
<th>住址</th>
</tr>
<tr>
<td>Tom</td>
<td>男</td>
<td>911</td>
<td>华盛顿</td>
</tr>
<tr>
<td>Jerry</td>
<td>男</td>
<td>119</td>
<td>华盛顿</td>
</tr>
</body>
</html>
- table 标签是创建表的标签；其中 tr 是行标签，th 是行头属性，td 是其余行数据内容的属性；注意： th 和 td 要分开写在两个 tr 中；
- style 设置table表属性的标签；table{} 设置表的总体属性（就是最外边那一层边框的属性）；border 设置边框的属性，颜色、宽度和边框线的形式；th{} 设置行头属性的边框属性；td{} 设置数据内容的边框的属性；border-spacing 是将边框的间隔变为0；border-collapse:collapse 将两个紧挨着的边框重叠（边框间隔为0时有效）；width 决定标的宽度。
1137
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
