这是我参与「第四届青训营」笔记创作活动的第1天

HTML介绍

HTML是超文本标记语言（HyperText Markup Language）
HTML的作用：写网页内容结构（网页中有啥）
文件后缀：以.html或者.htm结尾
HTML不区分大小写，建议小写
HTML由浏览器解析执行，由上往下，由左往右
HTML由标签组成
标签是包含在尖括号中关键词，例如<head>
分类：双标记——封闭类型标记，例如：<head>...</head>
单标记——非封闭类型标记：空标记，例如：<meta/>

HTML名词解释

1. 元素

从开始标记到结束标记之间所有的内容
例子： <p> 内容 </p>
开始标记内容结束标记
元素的开始元素的内容元素的结束

2. HTML的属性

属性是用来修饰元素的。
语法：
双标记写在开始标记里面，用空格隔开单标记写在/前面，用空格隔开一个标签可以有多个属性,用空格隔开，不区分前后顺序属性="属性值"

<div class="属性值" id="属性值"></div>
<img src="属性值" alt="属性值" width="属性值" height="属性值"/>

3. 标签之间可以相互嵌套

注意嵌套的顺序

<div>
    <p>
        <a href="">
            <i>
                <img src="" alt="">
            </i>
        </a>
    </p>
</div>

4. HTML的注释

注释是给程序员看，当内容多的时候，添加适当的注释，标注内容

注意：

1）注释之间不能相互嵌套
2）注释之间的内容不能在浏览器中显示

HTML标签

1. 标题标签

<h1>1号标题</h1>
<h2>2号标题</h2>
<h3>3号标题</h3>
<h4>4号标题</h4>
<h5>5号标题</h5>
<h6>6号标题</h6>

一号标题最大，逐级递减，六号标题最小
属性： align="left|center|right" 设置元素内容的水平对齐方式（默认居左）

注意：标题很重要请确保将HTML标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。搜索引擎使用标题为您的网页的结构和内容编制索引。因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

2.段落标记

<p>...</p>
<p>这是一个段落 </p>
<p>这是另一个段落</p>
属性： align="left|center|right" 设置元素内容的水平对齐方式（默认居左）

3.强制换行

<br/>
注意：没有任何属性

4.图片

<img/>
属性： src：必须属性（路径）
alt：图片不能正常显示给予提示
title：鼠标悬停给予提示
width：设置图片的宽度
height:设置图片的高度
图片宽高设置一个方向，另外一个方向会跟着等比例缩放

常见图片格式：
png：支持背景透明
gif：支持动图
jpg、jpeg：不支持背景透明

注意

图片有相对路径和绝对路径之分。

`<!--绝对路径——网址-->
<img src="http://img.tukexw.com/img/5862ec61d17a34fe.jpg" alt="张一山"/>`

<!--绝对路径——盘符-->
<img src="C:\Users\Lin\Desktop\img1.jpg" alt="张一山" width="300"/>

<!--相对路径——平级  .html文件去找图片-->
<img src="img2.gif" alt="蜡笔小新"/>
<img src="img3.jpeg" alt="蜡笔小新"/>

<!--相对路径——下一级-->
<img src="images/img4.gif" alt="蜡笔小新"/>
<img src="images/img/img5.jpg" alt="蜡笔小新"/>

如果图片跟当前的HTML文件平级，就直接写图片名称；如果在HTML文件的下一级就用/去获取这张图片的位置；上一级就用../，上两级就用../../

5.超链接

HTML使用标签 <a>来设置超文本链接。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
在标签<a> 中使用了href属性来描述链接的地址。
默认情况下，链接将以以下形式出现在浏览器中：

（1）一个未访问过的链接显示为蓝色字体并带有下划线。
（2）访问过的链接显示为紫色并带有下划线。
（3）点击链接时，链接显示为红色并带有下划线。

注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示

6.列表

1. 无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表使用 <ul> 标签

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

浏览器显示如下：

注意：

<ul><li>的属性type 拥有的选项
disc 默认实心圆
circle 空心圆
square 小方块
none 不显示

<!--无序-->
<ul type="disc">
    <li> apple</li>
    <li> pear</li>
    <li> peach</li>
</ul>
<!--无序-->
<ul type="circle">
        <li> apple</li>
        <li> pear</li>
        <li> peach</li>
</ul>
<!--无序-->
<ul type="square">
        <li> apple</li>
        <li> pear</li>
        <li> peach</li>
</ul>
<!--无序-->
<ul type="none">
        <li> apple</li>
        <li> pear</li>
        <li> peach</li>
</ul>

2. 有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。列表项使用数字来标记。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

浏览器中显示如下：

注意：

<ol><li>的属性type 拥有的选项

1 表示列表项目用数字标号（1,2,3...）
a 表示列表项目用小写字母标号（a,b,c...）
A 表示列表项目用大写字母标号（A,B,C...）
i 表示列表项目用小写罗马数字标号（i,ii,iii...）
I 表示列表项目用大写罗马数字标号（I,II,III...）

<ol>
        <li> 烤冷面</li>
        <li> 煎饼果子</li>
        <li> 麻辣烫</li>
    </ol>
    <ol type="A">
        <li> 烤冷面</li>
        <li> 煎饼果子</li>
        <li> 麻辣烫</li>
    </ol>
    <ol type="a">
        <li> 烤冷面</li>
        <li> 煎饼果子</li>
        <li> 麻辣烫</li>
    </ol>
    <ol type="I">
        <li> 烤冷面</li>
        <li> 煎饼果子</li>
        <li> 麻辣烫</li>
    </ol>
    <ol type="i">
        <li> 烤冷面</li>
        <li> 煎饼果子</li>
        <li> 麻辣烫</li>
    </ol>

浏览器显示效果

3. 自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

浏览器显示如下

7.表格

表格在数据展示方面非常简单，并且表现优秀，通过与CSS的结合，可以让数据变得更加美观和整齐。
行、列、单元格单元格特点：同行等高、同列等宽。

表格的基本语法：

创建一个3行3列的表格：

<table border="1px" width="300px">
        <tr><!--tr: table row-->     
            <td>11</td><!--td: table data-->       
            <td>12</td>        
            <td>13</td>      
        </tr>        
        <tr>        
            <td>21</td>        
            <td>22</td>        
            <td>23</td>       
        </tr>       
        <tr>       
            <td>31</td>
    
            <td>32</td>       
            <td>33</td>       
        </tr>        
  </table>

注意：单元格中内容的填充间距通过cellpadding(默认1px)属性来设置；单元格与单元格之间的间距通过cellspacing(默认1px)属性来设置。

表格的跨行跨列

有时，表格的结构并没有那么简单，可能会存在跨行和跨列的情况：
跨行：

跨列：

跨行、跨列并存：

这个问题看似很复杂，其实很简单，在制作跨行和跨列的表格时，只需按照如下步骤就可以轻松搞定！
首先做一个完整的表格：注意虚线部分，最终去掉这些虚线就是我们要的效果

找出最左上角那个“侵占”其他单元格的单元格，如下图标注数字的位置

观察这个单元格“侵占”的是行还是列，算上自己总共是几个？(行数用r表示，列数用c表示)：
如果是行：在这个单元格上添加 rowspan="r"
如果是列：在这个单元格上添加 colspan="c"
如果既有行又有列：在这个单元格上添加 rowspan="r" colspan="c"
把“被侵占”的单元格删掉，删除顺序：从右向左，从上至下，否则很容易出错！
按以上步骤完成一个跨行跨列的表格：

<table border="1" cellpadding="5" cellspacing="0" width="500" height="200">
    <tr>
        <td></td>
        <td></td>
        <td colspan="3"></td>
    </tr>
    <tr>
        <td rowspan="4"></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td rowspan="2" colspan="2"></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

效果如下：

结尾

关于前端HTML的内容还有很多，还需要我们不断的学习，从而逐渐地掌握好它。

前端与HTML学习 | 青训营笔记