HTML 标签（一）

HTML

HTML:超文本编辑语言（标签语言）

浏览器顺序渲染，从上到下，从左到右

是树型的

html格式
标签的属性是关键

meta标签 可提供有关页面的元信息

<meta charset="utf-8">
<meta name ="keywords" content="关键词">   <!--关键词用于搜索-->
<meta name="description" content="描述"> <!--网站的介绍-->

<meta http-equiv="retresh" content="3";http://www.baidu.com> <!--3秒跳转-->


<link rel="icon" herf ="https://www.">  <!--标签的图标-->

<body>
    <h1>
    <p> <!--段落-->
    <b>
    <strike>  <!--中间的横线-->
    <em> <!--斜体-->
    <sub><!--下角标-->
    <sup><!--上角标-->
	<br> <!--换行-->
    <hr><!--水平线-->
<body>

图片标签

<img src="" alt="">

a标签

id = ""  id是唯一的

标签分类：

  • 块级标签---独占一行
    • h1
    • p
    • div
  • 内联标签---根据内容而定
    • sub
    • sup
    • b
    • span

列表标签

  • 无序列表 unorder list

    <ul>
	<li>11111</li>
    <li>22222</li>
    <li>33333</li>
</ul>

  • 有序列表ol

    ```html
    1. 11111
    2. 22222
    3. 33333
    ```

定义列表dl

  ```html
<dl>
	<dt>标题</dt>
	<dd>内容</dd>
</dl>
```

table

<tr>
    <td rowspan="2" align="center"></td>
    <td ></td>
    <td ></td>
</tr>

制作的菜单

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>menu</title>
    <style>
            table{
                height: 300px;
                width: 500px;
                border-color: #E788F7;
            }
        img{
            width: 100px;
        }
    </style>
</head>

<body>
    <table border="2px" cellpadding="0px" cellspacing="0px" align="center">

        <tr>  <!--第一列是标题内容-->
            <td colspan="3" align="center">星期一菜谱</td>
        </tr>

        <tr>
            <td rowspan="2" align="center">素菜</td>
            <td >青草茄子</td>
            <td >花椒扁豆</td>

        </tr>

        <tr>
            <td >小葱豆腐</td>
            <td >炒白菜</td>
        </tr>


        <tr>
            <td rowspan="2" align="center" >荤菜</td>
            <td >油焖大虾</td>
            <td >海参鱼翅</td>
        </tr>

        <tr>

            <td >红烧肉
                 <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494927422953&di=de12523759b4761d104db22ff0e23ccf&imgtype=0&src=http%3A%2F%2Fvpic.video.qq.com%2F81280492%2Fr0364noa4xc_ori_3.jpg">
            </td>
            <td >烤全羊</td>

        </tr>




    </table>

</body>
</html>

制作的课程表

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>classtable</title>
    <style>
          table{

                border-color: blue;
            }

    </style>
</head>

<body>
    <table border="1" cellspacing="1" align="center" >

        <tr>
            <td>项目</td>
            <td colspan="5" align="center">上课</td>
            <td colspan="2" align="center">休息</td>
        </tr>

        <tr>
            <td>星期</td>
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
            <td>星期四</td>
            <td>星期五</td>
            <td>星期六</td>
            <td>星期日</td>

        </tr>

        <tr>
            <td rowspan="4">上午</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>英语</td>
            <td>物理</td>
            <td>计算机</td>
            <td rowspan="4" align="center">休息</td>

        </tr>

        <tr>
            <td>数学</td>
            <td>数学</td>
            <td>地理</td>
            <td>历史</td>
            <td>化学</td>
            <td>计算机</td>


        </tr>
        <tr>
            <td>化学</td>
            <td>语文</td>
            <td>体育</td>
            <td>计算机</td>
            <td>英语</td>
            <td>计算机</td>
        </tr>
        <tr>
            <td>政治</td>
            <td>英语</td>
            <td>体育</td>
            <td>历史</td>
            <td>地理</td>
            <td>计算机</td>
        </tr>

        <tr>
            <td rowspan="2" align="center">下午</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>英语</td>
            <td>物理</td>
            <td>计算机</td>
            <td rowspan="2" align="center">休息</td>
        </tr>

        <tr>
            <td>数学</td>
            <td>数学</td>
            <td>地理</td>
            <td>历史</td>
            <td>化学</td>
            <td>计算机</td>

        </tr>

    </table>
</body>
</html>
posted @ 2017-05-16 16:58  hzxPeter  阅读(166)  评论(0)  编辑  收藏  举报