1 基本常用标签

1 <h1>~<h6>标题标签

标题字大小（h1~h6）

独占一行

2 <p> 段落标签

3 <br/> 强制换行标签

4 <hr/> 水平线

5 <strong> 强调标签，加粗推荐

6 <em> 强调标签，斜体推荐

7 <center> 居中标签

8 <div>

默认独占一行，作用是划分页面的区域

9 <span>

没有实际意义，只是对于文本的独立修饰时候使用。不会影响结构

2 列表

2.1 无序列表

<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>栗子</li>
    <li>西瓜</li>
</ul>

2.2 有序列表（默认阿拉伯数字）

  type取值有 1 a A i I
<ol type="I">
    <li>苹果</li>
    <li>香蕉</li>
    <li>栗子</li>
    <li>西瓜</li>
</ol>

2.3 自定义列表

<dl>
   <dt>水果</dt>
   <dd>西瓜</dd>
</dl>

3 图片标签

src相对路径的写法

如果图片和文件在同一目录下

<img src="./图片名称">或 <img src="图片名称">

非同一目录下，使用../退回到上一级目录去定位图片路径

<img src="../1.jpg" title="鼠标悬浮提示内容" alt="图片没用加载出来，提示的信息">

4 超链接

<a href="https://baidu.com" title="鼠标悬浮提示内容" target="_blank">百度</a>

5 表格

5.1表格的基本结构

<table>
  tr表示一行
    <tr>
      td表示一个单元格
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>a</td>
    </tr>
 </table>

5.2表格的属性

border="1px" border属性控制的是最外面的边框，单元格的边框是默认的 width="500px" height="500px" 宽高的单位是px或者百分比。百分比参考的是父元素的大小 cellspacing="0" 设置单元格直接的间隙为0 cellpadding="100" 设置单元格与内容直接的空隙

5.2 tr的属性

bgcolor="red"

height="50px" tr只能设置高度，不能单独设置宽度

align="center" 控制单元格内的文字水平居中

valign="top" 控制单元格内的文字垂直方向的位置

5.3 td的属性

td的属性和tr的属性基本一致，不过td可以设置宽度。td的宽高设置会影响到同行同列的单元格

colspan="2" 合并两列 rowSpan="2",合并两行

6 表单

<form action="" method="get">
    用户名：<input type="text" placeholder="请输入用户名" name="username"></input>
    密  码：<input type="password" placeholder="请输入密码" name="password"></input>
    <button type="submit">登录</button></button>
    <button type="reset">重置</button>
 </form>

常用标签属性

align="center" 控制标签位置居中，居左（left），居右（right）

特殊符号

&copy; <!-- 版权所有，圆圈中有个 C --> 
&reg; <!-- 注册商标，圆圈中有个 R -->
&nbsp; <!-- 空格 -->(该空格占据宽度受字体格式影响比较大。&emsp一个汉字宽度)
&amp; <!-- 符号 & -->
&quot; <!-- 双引号 -->
&gt; <!-- 大于号 -->
&lt; <!-- 小于号 -->

Html常用语法