HTML笔记2基本元素

一、<a>标签：超链接

1. 这是跳转本地的链接，并且是在当前窗口打开
   <a href="./index.html">index</a>
2. 跳转外地的链接，并且在新的浏览器窗口打开，target="_blank"时是新的窗口，target="_self"时是当前窗口，不写target就默认self
   <a href="https://www.bilibili.com/" target="_blank">bilibili</a>
3. 在当前窗口跳转到不同的位置（当内容有溢出屏幕）

<a href="#c4">查看段落四</a>
<p>段落一</p>
<p>段落二</p>
<p>段落三</p>
<p><a name="c4">段落四</a></p>

4. 跳出框架（没用到，也不是很懂）

二、 文本标签

<p></p>段落标签：普通文本，普通大小文本，属于块元素
<big></big>：大字号文本
<small></small>：小字号文本
<b></b>标签、<strong></strong>标签：粗体文本,就跟Word文档上面加粗的B一样的作用
<i></i>、<cite></cite>、<em></em>：斜体文本
<br>：换行
<sup></sup>：上标<p>a<sup>2</sup>+b<sup>2</sup>=c</p>；效果：a²+b²=c
<sub></sub>：下标<p>H<sub>2</sub>SO<sub>4</sub>硫酸</p>；效果：H₂SO₄硫酸
<s></s>：删除线<p><s>原价:￥998</s></p>；效果：原价:￥998
<u></u>：下划线<p><u>下划线</u></p>；效果：下划线
<hr/>标签：水平线标签

---

三、标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

四、列表

1. 有序列表
   默认从1开始的列表，如果要规定数值开始，就要设置start值，属性值有
   1、数字：1,2,3；type属性值：1
   2、小写英文字母：a，b，c ；type属性值：a
   3、大写英文字母：A，B，C ；type属性值：A
   4、小写罗马字母：i，ii，iii ；type属性值：i
   5、大写罗马字母：I，II，III ；type属性值：I
   代码：

   <ol>
       <li>有序列表1</li>
       <li>有序列表2</li>
   </ol>
   <ol start="50">
       <li>有序列表1</li>
       <li>有序列表2</li>
   </ol>
   <ol type="I">
       <li>有序列表I</li>
       <li>有序列表II</li>
   </ol>
   

   效果：

   1. 有序列表1
   2. 有序列表2
   50. 有序列表1
   51. 有序列表2

2. 无序列表（用的比较多）
   ul里面只能有li，不用有其他元素，文本不能直接放在ul里面，要放在li里面或者ul外面
   默认类型是disc实心圆类型，如果要规定形状，就要设置type值，序号类型有
   1、实心圆：disc，“●”，默认值
   2、空心圆：circle，“○”
   3、实心正方形：square，“■”
   4、如果不喜欢这些图案，可以自定义图案，只要设置ul的list-style-image就好了，不想要图案也可以设置style="list-style-type: none;"
   代码：

   <ul type="disc">
       <li>disc</li>
       <li>circle</li>
       <li>Square</li>
   </ul>
   <ul style="list-style-image: url(./image/flower.png);">
       <li>disc</li>
       <li>circle</li>
       <li>Square</li>
   </ul>
   

   效果：
   

3. 定义列表（用的不多）
   dd虽然可以在定义列表外用来缩进文本，但是这不是有效的HTML，可能会在某些浏览器中造成难以预料的后果
   代码：
   ``

   1、要定义的名词1

   要解释的意思1

   2、要定义的名词2

   要解释的意思2

   >

   ```

   效果：
   

五、表格元素

1. 表格的基本结构为<table><tr><td>，表格默认情况下是没有边框的，单元格的边距用cellpadding=""设置，单元格之间的间距用cellspacing=""设置,表格中的内容居左居右居中用align="left"；align="right"；align="center"设置
   代码：

   <table border="1">
       <tr>
           <td>单元格00</td>
           <td>单元格01</td>
       </tr>
       <tr>
           <td>单元格10</td>
           <td>单元格11</td>
       </tr>
   </table>
   

   效果：
   

2. 也可以加个标题caption

   <table border="1">
       <caption>单元格title</caption>
       <tr>
           <td>单元格00</td>
           <td>单元格01</td>
       </tr>
       <tr>
           <td>单元格10</td>
           <td>单元格11</td>
       </tr>
   </table>
   

   效果：
   

3. 或者可以设置表头th

   <table border="1" cellspacing='0'>
       <caption>单元格title</caption>
       <hr>
           <th>单元格0</th>
           <th>单元格1</th>
       </hr>
       <tr>
           <td>单元格10</td>
           <td>单元格11</td>
       </tr>
       <tr>
           <td>单元格20</td>
           <td>单元格21</td>
       </tr>
   </table>
   

   效果：
   

4. 其实表格还有thead（表格页眉）、tbody（表格本体）、tfoot（表格页脚）三个语义划分，这个加不加其实效果都差不多，加上只是为了写代码的时候使得代码更有逻辑
   代码：

   <table border="1" cellspacing='0'>
       <caption>成绩表</caption>
       <thead>
           <tr>
               <th>姓名</th>
               <th>地图学</th>
               <th>遥感</th>
               <th>空间分析</th>
           </tr>
       </thead>
       <tbody>
           <tr>
               <td>A</td>
               <td>59</td>
               <td>85</td>
               <td>76</td>
           </tr>
           <tr>
               <td>B</td>
               <td>67</td>
               <td>73</td>
               <td>94</td>
           </tr>
       </tbody>
       <tfoot>
           <tr>
               <td>平均</td>
               <td>64</td>
               <td>79</td>
               <td>85</td>
           </tr>
       </tfoot>
   </table>
   

   效果：
   

5. 跨行跨列的单元格
   合并行：rowspan，语法<th rowspan="要合并的行数"></th>
   代码：

   <table border="1" cellspacing='0'>
       <caption>选修统计表</caption>
           <tr>
               <th>姓名</th>
               <th>A</th>
           </tr>
           <tr>
               <td rowspan="2">选修的课程</td>
               <td>大学国文</td>
           </tr>
           <tr>
               <td>园林设计</td>
           </tr>
   </table>
   

   效果：
   
   合并列：colspan，语法<th colspan="要合并的列数"></th>
   代码：

   <table border="1" cellspacing='0'>
       <caption>重修统计表</caption>
           <tr>
               <th>姓名</th>
               <th colspan="2">重修科目</th>
           </tr>
           <tr>
               <td>A</td>
               <td>数据结构</td>
               <td>arcgis engine</td>
           </tr>
   </table>
   

   效果：
   

六、表单元素

常见的自闭合标签：<meta/><link/><br/><hr/><input/><img/>没有结束标签，所以不能插入其他标签和文字，只能定义自身的一些属性
常见的块元素（block）：div、h1~h6、p、hr、ol、ul
常见的行内元素（inline）：input、img、span、a、u、s、em、strong