初学HTML之简单标签

html格式：

<!DOCTYPE html>  声明是H5
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">  
		<!--对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk"。-->
		
		<title>测试</title>
		<!--网页标题-->

        <meta http-equiv="refresh" content="x;URL=https://www.baidu.com">
		<!--x秒后跳转到对应的网址，注意引号-->
		
        <meta http-equiv="content-Type" charset=UTF8">
		<!--指定文档的编码类型-->
		
		<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
        <meta name="description" content="地球在自转">
		<!--通过关键字查看或显示内容-->

		<script>
            alert("hello 。。。")
        </script>
		<!--弹窗显示-->
		......
	</head>
	
	<body>
		......
	</body>
</html>

link标签也存在于head中，作用如下

1.将样式引入到网页中
	<link ref="stylesheet" href="css样式地址.css"/>
2.给网页title前面加个图标
	<link rel="icon" href="图标地址.icon"/>

head内容没有补充

标签分类：

主要分为两类
1、块级标签：
2、内联标签：

注意点：
1、关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
-块元素的特点：
　　1.每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。
　　2.元素的高度、宽度、行高和顶底边距都是可以设置的。　　
　　3.元素的宽度如果不设置的话，默认为父元素的宽度。
-内联元素的特点：
　　 1.可以和其他元素处于一行，不用必须另起一行；
　　 2.内边距和外边距、高度，宽度都是不可改变的，他的宽度是根据他的显示文本和图像的宽度
　　 3.可以通过css来将它变成为块元素之后然后就可以用css其他样式应用了。

一.块级标签： h1～h6、p、div、hr、ol、dl、table、ul、form

1.默认占浏览器宽度
2.能设置长和宽

h标签：

<h1～h6>字体加粗变黑，h后面的数字越大，字体越小 </h1～h6>

p标签：

<p>文本标签，可以显示大量文字 </p>
注意点：
	p标签不能包含块级标签，p标签也不能包含p标签。
	<p> <div></div></p>---错误

div标签：

没有自己的特点，但是成为了优点，相当于白纸，可以自己画图

hr标签：

显示横线<hr>

ul标签（双标签）:

无序的列表（内容前面显示实心圆空心圆等图标）

例如：
	<ul type="disc">
		 <li>第一项</li>
		 <li>第二项</li>
	 </ul>
type属性：
	disc（实心圆点，默认值），
	circle（空心圆圈），
	square（实心方块），
	none（无样式）

ol标签（双标签）

有序的列表（内容前面显示数字、大小写字母、大小写罗马）

例如： 
<ol type="1" start="1">
		 <li>第一项</li>
		 <li>第二项</li>
	  </ol>
start：从第几个开始
type属性：
	1 数字列表，默认值
	A 大写字母
	a 小写字母
	Ⅰ大写罗马
	ⅰ小写罗马

table标签（双标签）：

表格样式显示

格式：
	<table>
		<thead>
			<tr>
				<th>字段1</th>
				<th>字段2</th>
			</tr>
		</thead>
					
		<tbody>
			<tr>
				<td>内容1</td>
				<td>内容2</td>
			</tr>
		</tbody>
	</table>
实例：        
	<table>
		<thead >
			<tr aria-rowspan="30">
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
			</tr>
		</thead>
	
		<tbody>
			<tr>
				<td>第一行姓名</td>
				<td>第一行年龄</td>
				<td>第一行性别</td>
			</tr>
			<tr>
				<td>第二行姓名</td>
				<td>第二行年龄</td>
				<td>第二行性别</td>
			</tr>
		</tbody>
	     </table>
说明：
	<th>的内容时加粗的，<td>的内容没有加粗

dl标签（双标签）：

标签-内容

例如：
	<dl>
		<dt>标题1</dt>
			<dd>内容1</dd>
		<dt>标题2</dt>
			<dd>内容1</dd>
			<dd>内容2</dd>
	</dl>

二.内联标签（行内标签） img、a、u、i、b、span、input、lable

1.根据内容决定长度
2.不能设置长和宽

img标签（单标签）

显示图片标签

例如：
 <img src="图片路径" alt="加载失败的提示" title="鼠标放置时的提示" width或height="图片的宽高" >

a标签（双标签）

1.超链接标签

例如：
	<a href="链接跳转路径" target="新建tab或当前页面打开，_blank为新建tab，默认是当前页(_self)">
		<span style="color:#FF00FF;">链接的文案显示 </span>

2.可以跳转到当前页面的指定位置

例如：
	<a href="#a2">a1跳转到a2</a>
			......
	<a href="" id="a2">被跳转位置</a>

b标签：加粗
i标签：斜体
u标签：下划线
s标签：删除
br标签：换行

三、剩余的标签

特殊符号对应的代码：

空格：&nbsp;
￥  : &yen
>   : &gt;
<   : &lt;
&   : &amp;
版权：&copy;
注册：&reg;