HTML常用标签和基本用法

块元素标签(行元素)和内联元素标签(行内元素)

标签在页面上会显示成一个方块。除了显示成方块，它们一般分为下面两类：
块元素：在布局中默认会独占一行，块元素后的元素需换行排列。
内联元素：元素之间可以排列在一行，设置宽高无效，它的宽高由内容撑开。

常用HTML标签

1、h1~h6: 标题标签，块元素标签，含有默认样式
表示文档的标题，除了具有块元素基本特性外，还含有默认的外边距和字体大小

<h1>文字</h1>:字体大小h1 最大
<h2>文字</h2>:字体大小h2
<h3>文字</h3>:字体大小h3
<h4>文字</h4>:字体大小h4
<h5>文字</h5>:字体大小h5
<h6>文字</h6>:字体大小h6 最小

一个网页中默认只有一个H1标签，H1标签默认对log使用，
2个二级标签。其他标签数量不限。有利于提高网站在搜索中的排名(也叫做SEO)

2、p： 段落标签，块元素标签，含有默认的外边距

<p>这个一个段落标签</p>

3、div 通用块元素标签，一般做嵌套使用，没有默认样式

<div>这是一个div标签</div>

4、a 链接标签，属于 内联元素标签，通过"herf"属性设置链接地址，将a标签包裹"img"标签可以用图片做链接，默认链接地址暂时写成"#"。

<a href="02.html">第二个网页</a>
<a href="http://www.baidu.com">百度网</a>
<a href="http://www.baidu.com"><img src="images/logo.png" alt="logo"></a>
（以图片做链接）
<a href="#">默认链接</a>
（未定义链接地址时可先用"#"代替）

5、img 图片标签，属于 内联元素标签，具有内联元素基本特性，但是它支持宽高设置。通过"src"属性设置图片地址，通过"alt"设置图片文字说明(当图片加载失败时显示文字说明)
"title"设置当鼠标放到图片上时有问题提示

<img src="images/pic.jpg" alt="图片" title="图片"/>

6、span 通用内联元素标签，一般用在样式设置中，具有内联元素基本特性，没有其他默认样式

<p>这是一个段落文字，段落文字中有<span>特殊标志或样式</span>的文字</p>

7、列表标签：列表一般应用在布局中的新闻标题列表和文章标题列表以及菜单，它是含有语义的
ul 无序列表

<ul>
    <li>列表标题一</li>
    <li>列表标题二</li>
    <li>列表标题三</li>
</ul>

列表的内容一般是可以链接的，点击链接到新闻或者文章的具体内容:

<ul>
    <li><a href="#">列表标题一</a></li>
    <li><a href="#">列表标题二</a></li>
    <li><a href="#">列表标题三</a></li>
</ul>

用属性 type 直接修改列表前项目符号的类型
none不使用项目符号
disc实心圆，默认值
circle空心圆
square实心方块

<ul type="circle">
         <li>11</li>
         <li type="disc">22</li><!--就近一致-->
         <li>33</li>
         <li>44</li>
 </ul>

在li,ul内加入list-style。如

<ul style="list-style-type:lower-roman>
	<li>123</li>
	<li>123</li>
	<li>123</li>
	<li>123</li>
< /ul>

decimal阿拉伯数字
lower-roman小写罗马数字
upper-roman大写罗马数字
lower-alpha小写英文字母
upper-alpha大写英文字母

ol 有序列表

<ol>
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
</ol>

显示效果：
1.有序列表1
2.有序列表2
3.有序列表3

8、表单
HTML表单
9、表格元素及相关样式

1、<table>标签：声明一个表格

2、<tr>标签：定义表格中的一行

3、<td>和<th>标签：定义一行中的一个单元格，
td代表普通单元格，th表示表头单元格（字体默认加粗）

表格相关样式属性
border-collapse
设置表格的边线合并，如：border-collapse:collapse;

字符实体

如果想在网页上显示空格，“<”个“>”, 不能直接在代码中写，需要写成它们的字符实体

空格：    
空格还可以设置属性text-index:20px;可使缩进一个20px的空格
设置缩进值：一个字符像素的两倍就是两个空格
小于：<  
小于等于：≤
大于： >
大于等于：≥
换行：<br>
输出展示一条线：<hr>