2021-06-22

HTML总结

HTML简介

• HTML是超文本标记语言（HyperText Markup Language）的缩写
• HTML是一种用于定义内容结构的标记语言它定义了网页内容的含义和结构
• HTML就由一个个元素组成（可以嵌套），而元素则一般由**一对标签（tag）**构成

HTML常用语法

1 . 元素

• 元素形式：<元素的名称> 内容 </元素的名称>。如:

<p>内容</p>

• 开始标签：包含元素的名称，被< >角括号所包围，表示元素从这里开始或者开始起作用 。如：<p>
• 结束标签：与开始标签相似，只是其在元素名之前包含了一个斜杠，这表示着元素的结尾。如：</p>

2.注释

• 用**<!–和–>**括起来表示注释。如：

<!--注释内容-->

3.标题

• 用**<hn>**标签表示标题（n可以为1_{6，表示了HTML中的1}6级标题）。如：

<h1>一级标题</h1>
<h2>二级标题</h2>

• 搜索可以引擎用标题来索引页面的内容

4.文本格式

• <br>：换行标签
• <hr>：水平分割线标签
• <input>：输入框标签

  <!-- 带属性的段落 <p title="属性">内容</p>> -->
  <!-- 带属性的输入框 <input title=""> -->

  <mark>内容</mark>
  <!-- 荧光点亮 <mark>内容</mark> -->

  <del>内容</del>
  <!-- 中划线 <del>内容</del> -->

  <s>内容</s>
  <!-- 中划线 <s>内容</s> -->

  <ins>内容</ins>
  <!-- 下划线 <ins>内容</ins> -->

  <u>内容</u>
  <!-- 下划线 <u>内容</u> -->

  <small>内容</small>
  <!-- 变小 <small>内容</small> -->

  <strong>内容</strong>
  <b>内容</b>
  <!-- 加粗 <strong>内容</strong>或者<b>内容</b> -->

  <em>内容</em>
  <i>内容<i>
  <!-- 斜体 <em>内容</em>或者<i>内容<i> -->

• 区块元素：在浏览器显示时，通常会以新行来开始，如：<hn> <div> <pre> **<ul>**等
• 内联元素：他们总是一个接一个进行显示，不会新起一行，如：<td> <a> <img> **<span>**等

5.超链接

<!-- 超链接语法格式如下： -->
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
<!-- href即为要跳转去的地址 URL -->
<!-- target属性为_blank表示在新的页面打开超链接 -->

6.图片及文件路径

<!-- 图片路径格式如下： -->
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">
<!-- src后为获取图片路径的地址 -->
<!-- alt表示在获取图片出问题的时候web网页上显示的内容 -->
<!-- width-宽 height-高 用来限制图片的宽高（一般不建议限制）-->
<!-- 文件路径分为绝对和相对路径 像上列获取图片为绝对路径-->
<!-- 相对路径例子如下： -->
<img src="../picture.jpg">
<!-- .表示当前目录 ..表示上一级目录 前面没有点就表示该图片文件与当前文档在同一目录中 -->

7.表格

<!-- 表格用<table> <tr> <td> <th>等标签表示 -->
<!-- <table>是表格的主体标签 像<tr> <td> <th>都是放在其中的 -->
<!-- <tr>表示行 <td>表示行中的单元 <th>是表头的单元（将会加粗显示）  -->
<!-- 表格例子如下： -->
<table>
    <tr><!-- 表格第一行 -->
      <th>第一行第一格</th><!-- 会加粗显示 -->
      <th>第一行第二格</th>
      <th>第一行第三格</th>
    </tr>
    <tr>
      <td>第二行第一格</td>
      <td>第二行第二格</td>
      <td>第二行第三格</td>
    </tr>
 </table>

8.列表

• 无序列表：用**<ul>标签表示，默认实心圆点**，用**<circle>标签表示空心圆点**，若是没有标点的无序列表只需要在**<style>标签中加入li{list-style-style：none;}或者直接用<none>**标签即可

 <!-- 无序实心圆点 -->
<ul>
  <li>内容</li>
  <li>内容</li>
</ul>

 <!-- 无序空心圆点 -->
<circle>
  <li>内容</li>
  <li>内容</li>
</circle>

<!-- 无序无标点 -->
<none>
  <li>内容</li>
  <li>内容</li>
</none>

• 有序列表：用**<ol>表示，默认数字**，也可以改为大小写字母或者罗马字母

<ol type="a">
  <li>内容</li>
  <li>内容</li>
</ol>
<!-- 若没有 type="a" 则为默认的数字 -->

9.表单

• 整个表单放在**<from>**标签里面

/