HTML语法

标题标签

<h1> </h1>: 共有6个标题标签
例如4级标签:

三级标签例子

---

段落标签

<p> </p>:进行分段

---

换行标签（单）

<br/>:另起一行
段落标签也会换行但是换行中间会有一段空隙，换行标签不会有空隙

---

文本格式化标签

<strong> </strong>:加粗标签
<b> </b>:加粗标签
<em> </em>:斜体标签
<i> </i>:斜体标签
<del> </del>:~删除线~标签
<s> </s>:~删除线~标签
<ins> <ins>:下划线标签
<u> </u>:下划线标签

---

<div> 和 <span>标签

没有语意，就是一个盒子标签
<div> div独占一行  </div>:在markdown里面也是独占一行<br/>
<span>span是小盒子，不会独占一行 </span>:在markdown里面也是一样的

---

图像标签（单）

<img src="图像路径和文件名"/> :在markdown里面语法一样，src是图像标签的必须属性，用于指定文件的 路径 和 文件名
属性的顺序位置无关 

---

alt="当图片显示不出来时，用这里面的文字替换" 
<img  src="图片名字写错了.jpg" alt="图片加载错误，我裂开了"/>

---

title="提示文本，把鼠标移动到图片上时，显示出的提示文本" 
<img src="pig.jpg" title="我是pig"/>

---

width="给图片设置宽度"
下面设置一个宽度分别为500和300的举例子
<img src = "pig.jpg" width="500"/>

<img src = "pig.jpg" width="300"/>

---

height="给图片设置高度"
下面设置分别 500*300和1000*500的
单位为像素
ps:在实际设置中，一般只需要设置其中一个就可以了，因为会自动适应的
<img src = "https://i-blog.csdnimg.cn/blog_migrate/c8786eeda716fd90bc6f96570ae75d4d.jpeg#pic_center" width="500" height="300"/>

<img src = "https://i-blog.csdnimg.cn/blog_migrate/c8786eeda716fd90bc6f96570ae75d4d.jpeg#pic_center" width="1000" height="500"/>

---

border ="设置图像的边框粗细".
下面设置一个边框粗细为10x的图片
<img src="https://i-blog.csdnimg.cn/blog_migrate/c8786eeda716fd90bc6f96570ae75d4d.jpeg#pic_center" border="10x">

---

超链接标签

<a>:用于定义超链接，作用是从一个页面跳到另一个页面
<a href="跳转目标地址" targert=" 目标窗口弹出打方式">  点击处的内容 </a>

跳转目标可以为外部链接或者外部链接或者是空链接或者是下载链接
下载链接：.exe 或者是zip等压缩包形式的文件,href里面的地址如果是文件或者压缩包，就会下载

点击处的内容可以为文字，也可以为图片等任意的网页元素

弹出方式有2个：
1·_self 为默认值，取代当前页面打开
2·_blank为在新页面打开

例如外部链接之文字显示： 点击我前往百度官网
<a href="http://www.baidu.com"> 点击我前往百度官网 </a>

例如外部链接之图片显示：
<a href="http://www.baidu.com"> <img src = "pig.jpg" width="80"/> </a>

例如空链接： 这个跳转目标还没确定
<a href="#"> 这个跳转目标还没确定 </a>

---

锚点链接

当页面很长的时候，点击该锚点链接，直接跳转到页面的指定的标签位置，只要在目标标签里面添加一个 id="#mao" 属性就可以
在链接文本的href属性中，设置属性为 #名字 的形式,如<a href="# mao" > 点击前往文本格式化标签</a>

点击前往三级标签例子
<a href="#mao"> 点击前往三级标签例子 </a>

---

注释标签

<!-- 注释内容 -->
ctrl+/ 可以自动生成

---

表格标签

基本语法：

<table>
    <tr>
        <td> 单元格中的文字. </td>
        <td> 单元格中的文字.. </td>
                ·
                ·
        <td> 单元格中的文字 </td>    
    </tr>
</table>    

<table>``</table> ：用于定义表格标签

<tr>``</tr>: 用于定义表格中的行，必须窃套在<table>``</table>中

<td>``</td>:用于定义表格中的单元格，必须窃套在<tr>``</tr>中

例如：

（1.1）	（1.2）	（1.3）
（2.1）	（2.2）	（2.3）

表头单元格：通常表的第一行会加粗并且居中显示，此时可以使用表头单元格，即用<th> </th>来代替表格第一行中的<td> </td>

例如：

（1.1）	（1.2）	（1.3）
（2.1）	（2.2）	（2.3）

表格结构标签：为了更好的表示表格的结构，将表格分为表格头部和主体2个部分
分别用<thead> </thead>标签表头区域，<tbody> </tbody>标签表格主体区域

合并单元格：特殊情况下可以把多个单元格合并为一个单元格

rowspan=“个数”:跨行合并，在最上一行的单元格中书写代码
clsspan=“个数”:跨列合并，在最左一列的单元格中书写代码

例如：

---

列表标签

用于布局，有三种分别是无序列表，有序列表，自定义列表

无序列表：用<ul> </ul>来定义无序列表，用过<li> </li>来定义列表项

语法格式：

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ul>

例如：

• 列表项1
• 列表项2
• 列表项3
• ...
• 列表项n

有序列表：

语法格式：

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
    <li>列表项n</li>
</ol>

例如：

1. 列表项1
2. 列表项2
3. 列表项3
4. ...
5. 列表项n

自定义列表：

语法格式：

<dl>
    <dt>列表项首</dt>
    <dd>列表项解释1</dd>
    <dd>列表项解释2</dd>
    ...
    <dd>列表项解释n</dd>
</dl>

例如：

列表项首

列表项解释1

列表项解释2

...

列表项解释n

ps:<dt> </dt>可以有多个

---

表单标签

一个完整的表单通常包括表单域，表单控件（表单元素）和提示信息三个部分构成

语法格式：

<form action="url地址" method="提交方式" name="该表单域名称">
    各种表单元素控件
</form>

<form action="http//:www.baidu.com" method="get" name="mao1">
    请输入用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"/>  
    密码：<input type="password" name="password"/>  
    性别：男<input type="radio" name="sex" checked="checked"/>   女 <input type="radio" name="sex"/>  
    爱好: 编程<input type="checkbox" name="hobby"/>  LOL<input type="checkbox"/> 
    提交：<input type="submit" value="提交按钮" /> 
    重置：<input type="reset" value="重置按钮"> 
    按钮：<input type="button" value="按钮啊..">  
    文件上传：<input type="file" value="">  

</form>

---

label标签

lable标签用于绑定一个表单元素，当点击标签内的文本时，浏览器就会自定将鼠标光标转到对应的表单元素上，用于增加用户体验

例如：我只需要点击用户名的时候，光标就会跳转到输入框里面，而不需要我自己去点击输入框

用户名：

代码：
<label for="name"> 用户名：<lable>
<input type="text" id="name"/>

---

select表单元素

当在页面中有多个选择的选项时，可以使用select下拉表单项
语法格式：

<select>
    <option> 选项1 </option> 
    <option> 选项2 </option>
    <option> 选项3 </option>
        ···
    <option> 选项n</option>
</select>

例如：

    <select>
            <option> 湖南 </option>
            <option> 北京 </option>
            <option selected="selected"> 上海 </option>
            <option> 广州 </option>
            <option> 深圳 </option>
    </select>
    

籍贯：(默认选择为上海)
湖南
北京
上海
广州
深圳

---

textarea文本域

文本框只能写一行，但是文本域可以写多行，相当于大号的文本框

例如：

代码：
<form>
<textarea row="50" cols="50">
    
</textarea>
</form>

---

ps：本文有加载不出来的图片，我分析是因为对图片的尺寸进行了自定义的修改，所以加载不出来