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>

HTML 标签（一）的更多相关文章

  1. a标签点击跳转失效--IE6、7的奇葩bug

    一般运用a标签包含img去实现点击图片跳转的功能,这是前端经常要用到的东西. 今天遇到个神奇的bug:如果在img上再包裹一层div,而且div设置了width和height,则图片区域点击时,无任何 ...

  2. IE6、7下html标签间存在空白符，导致渲染后占用多余空白位置的原因及解决方法

    直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...

  3. 百度MIP页规范详解 —— canonical标签

    百度MIP的规范要求必须添加强制性标签canonical,不然MIP校验工具会报错: 强制性标签<link rel="/^(canonical)$/"> 缺失或错误 这 ...

  4. 【CSS进阶】伪元素的妙用--单标签之美

    最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...

  5. TODO：Laravel 使用blade标签布局页面

    TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...

  6. 最新 去掉 Chrome 新标签页的8个缩略图

    chrome的新标签页的8个缩略图实在让人不爽,网上找了一些去掉这个略缩图的方法,其中很多已经失效.不过其中一个插件虽然按照原来的方法已经不能用了,但是稍微变通一下仍然是可以用的(本方法于2017.1 ...

  7. css-父标签中的子标签默认位置

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  8. xpath提取多个标签下的text

    title: xpath提取多个标签下的text author: 青南 date: 2015-01-17 16:01:07 categories: [Python] tags: [xpath,Pyth ...

  9. 多个Img标签之间的间隙处理方法

    1.多个标签写在一行 <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> ...

  10. html5标签canvas函数drawImage使用方法

    html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

随机推荐

  1. CentOS 下部署Nginx+Gunicorn+Supervisor部署Flask项目

    原本之前有一部分东西是在Windows Server,但是由于Gunicorn不支持Windows部署起来颇为麻烦.最近转战CentOS,折腾一段时间,终于简单部署成功.CentOS新手,作为一个总结 ...

  2. 剑指Offer的学习笔记（C#篇）-- 包含min函数的栈

    题目描述 定义栈的数据结构,请在该类型中实现一个能够得到栈中所含最小元素的min函数(时间复杂度应为O(1)). 一 . 题目该怎么想 1 . 定义栈的数据结构:实现Push.Pop.Top.Min方 ...

  3. A Simple Math Problem （矩阵快速幂）

    Lele now is thinking about a simple function f(x).  If x < 10 f(x) = x.  If x >= 10 f(x) = a0 ...

  4. uoj207共价大爷游长沙

    话说我可能还没有调出魔法森林呢...说好的lct第一题呢... 又是一个随机化的方法,毕竟又是判定性的问题 上次是判断无向图联通 这次是判断一些路径是否经过一条定边 若把路径上的边全部异或上一个路径的 ...

  5. 手动配置 FreeBSD 网络

    设置 IP 地址和网关 编辑 /etc/rc.conf $ sudo vim /etc/rc.conf # 设置ip地址和子网掩码 ifconfig_em0="inet 192.168.0. ...

  6. python大战机器学习——数据降维

    注:因为公式敲起来太麻烦,因此本文中的公式没有呈现出来,想要知道具体的计算公式,请参考原书中内容 降维就是指采用某种映射方法,将原高维空间中的数据点映射到低维度的空间中 1.主成分分析(PCA) 将n ...

  7. JavaScript读取文本,并渲染在html

    html <pre id="myText" style="word-wrap: break-word; white-space: pre-wrap; white-s ...

  8. Magic Maze dfs + dp

    http://swjtuoj.cn/problem/2387/ 设dp[cur]表示以cur这个节点为起点的时候,能走的最大贡献. 题目保证没环,也就是没回路. 感觉和树dp差不多了. #includ ...

  9. SpringCloud多模块整理

    1.项目架构 —— project        父项目 —— client        子项目(客户端)    对外暴露的接口 —————— pom.xml          子项目的pom文件 ...

  10. webpack.config.js====插件purifycss-webpack，提炼css文件

    1. 安装:打包编译时,可以删除一些html中没有使用的选择器,如果html页面中没有class=a class="b"的元素,.a{}.b{}样式不会加载 cnpm instal ...