HTML常见标签以及使用

作业内容：
1. 将课堂介绍过的<a>,<img><ul>,<table>,<iframe>的案例,全部上机练习,并自己扩展一些案例,发布到作业博客中; 
2. 预习css知识

HTML常见标签

超链接（a）

a标签一般常用来做链接，常用的属性有href（所要链接的地址）和target（目标窗口）链接一般也分三种：

【站外链接】

<a href="https://www.baidu.com">点击跳转百度</a>

【指定窗口打开】

<!-- 新窗口打开百度 -->
<a href="https://www.baidu.com" target="_blank">新窗口打开百度</a>
<!-- 在框架内打开百度，这里因为百度做防内嵌操作了，所以打不开 -->
<a href="https://www.baidu.com" target="frame1">在框架内打开百度</a>
<iframe name="frame1" frameborder="0"></iframe>

【站内跳转】

<!-- 站内跳转，也称之为锚点链接 -->
<a href="#content1" target="_self">站内跳转</a>
<a href="#content2" target="_self">站内跳转</a>
<div id="content1" style="margin-top: 1000px">跳转内容1</div>
<div id="content2" style="margin-top: 1000px">跳转内容1</div>

图像（img）

img标签常见的属性有src（图像路径），alt（文本替换），width（宽度），height（高度）等。
其中前两个属性是必须的。后面的宽度和高度，可以以像素为单位，也可以填写百分比，在HTML5中也逐渐被CSS所取代，使用频率也不高了。
src属性代表该标签所指向的图像路径，这个路径可以是相对路径，也可以是绝对路径，甚至可以直接是站外的链接。
alt属性是在图片加载不出来的时候，显示的文字，一般也没啥用

<!-- 常规图片 -->
<img src="1.jpg" alt="这是一张图片" />
<!-- 指定宽度的图片 -->
<img src="1.jpg" alt="" width="400px" />
<!-- 按百分比指定高度的图片 -->
<img src="1.jpg" alt="" height="30%" />

如果没有同时宽度和高度，比如高度设置了30%，则宽度会按同比例缩放至30%。而按像素设定的宽度，那么高度也一样按对应的比例缩放，以确保图片不会变形。
而如果同时指定了高度和宽度，如果高宽比例与原图比例不同的话，则可能就会导致图片变形。

列表（ul）

我们常见的ul标签是拿来做导航栏或者侧边栏菜单的
列表主要表现形式有三类：

• 有序列表，显示结果会自动为每一条记录前面加上序号

<!-- 有序列表 -->
<ol>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ol>

• 无序列表，显示结果会自动在每一条记录前加上一个小黑点

<!-- 无序列表 -->
<ul>
    <li>item1</li>
    <li>item1</li>
    <li>item1</li>
</ul>

• 自定义列表

<!-- 自定义列表 -->
<nav>
    <a href="">item1</a>
    <a href="">item2</a>
    <a href="">item3</a>
</nav>

上面这几种做法，目前最常用的是无序列表结合CSS生成自己想要的任何效果。

表格（table）

表格一般分为表头，表主体以及表尾，表头常用<thead></thead>包含起来，表主体用<tbody></tbody>包含起来，而表尾则用<tfoot></tfoot>包含起来。不论哪一个部分都需要用<tr><td></td></tr>这种格式写，其中一个tr表示一行，一个td表示一列。表格是我们常用的元素，因为他跟二维数组几乎是一一对应的关系。此处代码较多，顺便可以复习一下emmet的语法：

table>thead>tr>td{表头}*4^^tbody>tr*3>td{表主体}*4^^tfoot>tr>td{表尾}*4

生成结果如下：

<table>
    <thead>
        <tr>
            <td>表头</td>
            <td>表头</td>
            <td>表头</td>
            <td>表头</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>表主体</td>
            <td>表主体</td>
            <td>表主体</td>
            <td>表主体</td>
        </tr>
        <tr>
            <td>表主体</td>
            <td>表主体</td>
            <td>表主体</td>
            <td>表主体</td>
        </tr>
        <tr>
            <td>表主体</td>
            <td>表主体</td>
            <td>表主体</td>
            <td>表主体</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>表尾</td>
            <td>表尾</td>
            <td>表尾</td>
            <td>表尾</td>
        </tr>
    </tfoot>
</table>

内嵌框架（iframe)

之前在讲述a标签的时候已经简单提到过框架，iframe框架支持所有HTML全局属性，常用的属性有src（框架指向的数据）和frameborder（框架边框）

<iframe src="https://taobao.com" frameborder="0"></iframe>

针对有些比较老的浏览器，不支持框架的情况下，可以这样写，以满足在框架不能正常显示的时候，可以显示文字

<iframe src="https://taobao.com" frameborder="0">
    您的浏览器不支持框架，请更换最新的浏览器来正常浏览页面
</iframe>

预习CSS

简介：CSS是一种描述HTML文档样式的语言 CSS描述应该如何显示HTML元素

常见CSS样式表

<style>
    /* 全局主体样式 */
    body {
        background-color: lightblue;
    }
    /* 全局h1标签样式 */
    h1 {
        color: blue;
        text-align: center;
    }
    /* 针对class="menu"的标签指定样式 */
    .menu {
        font-size: 20px;
    }
    /* 针对id="name"的标签指定样式 */
    #name {
        font-family: verdana;
    }
    /* 组合选择器 */
    div.menu {
        color : red;
    }
    /* 分组选择器 */
    h1, h2, h3 {
        font-size: 20px;
    }
    /* 通用选择器 */
    * {
        text-align: center;
    }
</style>

最上面的像body、h1、.menu、#name。统称为选择器，选择器也可以使用组合的方式，如div.menu，这个选择器的意思是所有class=”menu”的div标签。还可以用*号表示通配所有标签。如果多个标签拥有相同的样式，则可以用逗号把选择器连接放一起。如 .menu1,.menu2{ color : red; }
大括号里的内容，冒号左侧的为属性，冒号右侧的为属性值，可以有多个属性共同修饰一个选择器，并且以分号隔开。
选择器可以针对全局标签（如body），也可以针对一类标签（如.menu），甚至还可以针对某一个标签（如#name）。

其中的属性，常用的有

属性	含义
background-color	背景颜色
color	文本颜色
font-size	文本大小
font-family	字体

太多了。。。。等老师讲吧。。。