前端学习基础

Day2-Html标签详解

标题

标题（Heading）是通过 <h1> - <h6> 标签进行定义的。
<h1> 定义最大的标题
<h6> 定义最小的标题

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

生成h1~h6快捷键：h$*6
注：正确使用标题有益于SEO
注：应该将 < h1> 用作主标题（最重要的），其后是 <h2> （次重要的），再其次是 <h3> ，以此类推。
对齐：align="left | center | right" 默认居左

段落<p>

<p>这是一个段落 </p>
<p>这是另一个段落</p>

换行 <br>

<p>这个<br>段落<br>演示了分行的效果</p>

水平线<hr/>

<hr color="" width="" size="" align=""/>

width：设置水平线的长度
size：设置水平线的高度

图片<img>

<img src="" alt="" title="" width="" height="">

注：<img> 是单标签，不需要进行闭合操作
属性：

• src：路径（图片地址与名字）
• alt：规定图像的替代文本
• width：规定图像的宽度
• height：规定图像的高度
• title：鼠标悬停在图片上给予提示

路径详解

• 绝对路径：
  绝对路径是电脑的盘符存储与访问的具体地址。

<img src="E:\Code\1.jpg">

• 相对路径
  两者相对关系，两者在同⼀路径下可以直接访问
  ⼦级关系: /
  ⽗级关系: ../
  同级关系: ./
• 网络路径
  具体的⽹络地址: http://iwenwiki.com/api/newworld/images/n1.png

超文本链接

HTML使用标签 <a> 来设置超文本链接
超链接属性：
在标签 <a> 中使用了 href 属性来描述链接的地址，默认情况下，链接将以以下形式出现在浏览器中：

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

超链接表现：
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

超链接之锚点

超链接可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
跳转到当前文档的某个部分的形式就是“锚点”
锚点实现方式：

<a href="#hello">跳转到当前页</a>
<p id="hello">文本信息</p>

文本

有序列表

有序列表始于<ol> 标签。每个列表项始于 <li> 标签。
type属性
<ol> 的属性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>
        <ol>
            <li>1</li>
            <li>2</li>
        </ol>
    </li>
    <li>3</li>
</ol>

无序列表

无序列表始于 <ul> 标签。每个列表项始于 <li> 标签。

<ul>
    <li>快乐</li>
    <li>幸福</li>
</ul>

type属性
<ul> 的属性type 拥有的选项：

• disc 默认实心圆
• circle 空心圆
• square 小方块
• none 不显示
  列表是可以进行嵌套的：

<ul>
    <li>快乐</li>
    <li>
        <ul>
            <li>幸福</li>
            <li>美好</li>
        </ul>
    </li>
    <li>加油</li>
</ul>

快捷键
快速生成ul+li的布局：ul>li*3（数字根据自己的需要的li数量修改）
快速生成结构：ul>li>a[href=#]

自定义列表

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
    <dt>1</dt>
    <dd>2</dd>
    <dt>3</dt>
    <dd>4</dd>
</dl>

表格

表格标签

• 表格： <table>
• 行： <tr>
• 单元格(列)： <td>
• 表格名字： <caption>
• 表格头部： <thead>
• 特殊单元格： <th>
• 表格的身体： <tbody>
• 表格的脚步： <tfoot>

快速生成表格结构：table>tr*2>td{单元格}

<table> 表格属性
border：设置表格的边框
width：设置表格的宽度
height：设置表格的高度
align：设置表格的水平对齐方式
cellpadding：设置内容距离边框的距离
cellspacing：设置单元格之间的距离
bgcolor：设置表格背景颜色
bordercolor：设置边框颜色
background：设置背景图片

<tr> 的属性
height：设置一行的高度
bgcolor：设置一行的背景颜色
background：设置一行的背景图片
align：设置行里内容水平对齐方式，取值：left、center、right
valign：设置行里内容垂直对齐方式，取值：top、middle、bottom

<td> 的属性
width：设置单元格的宽度，同列等宽
height：设置单元格的高度，同行等高
align：设置单元格内容水平对齐方式
valign：设置单元格内容垂直对齐方式
bgcolor：设置单元格背景颜色
background：设置单元格背景图片

单元格合并属性

• 水平合并：colspan
• 垂直合并：rowspan

示例

<table border="1" width="500" height="500"
align="center">
    <tr>
        <td colspan="2"></td>
        <td rowspan="2"></td>
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td></td>
    </tr>
    <tr>
        <td colspan="2"></td>
    </tr>
</table>

<table border="0" width="500px" align="center">
        <tr align="center" bgcolor="pink">
            <td rowspan="2">酒店</td>
            <td> 1</td>
            <td>2</td>
        </tr>
        <tr align="center" bgcolor="pink">
            
            <td>1</td>
            <td>2</td>
        </tr>
        <tr align="center" bgcolor="red">
            <td rowspan="2">机票</td>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr align="center" bgcolor="red">
            
            <td>1</td>
            <td>2</td>
        </tr>
        <tr align="center" bgcolor="yellow">
            <td rowspan="2">火车票</td>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr align="center" bgcolor="yellow">
            
            <td>1</td>
            <td>3</td>
        </tr>
        <tr align="center" bgcolor="pink"> 
            <td rowspan="2">动物园</td>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr align="center" bgcolor="pink">
            
            <td>1</td>
            <td>2</td>
        </tr>
        </tr>
    </table>

下文……