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. 用 _tcscmp 替代 strcmp 或 wcscmp

    转自:http://blog.csdn.net/eickandy/article/details/50081537 好处:是可以不管是用unicode 编码还是其他 ,代码都不用改. C++标准库函数 ...

  2. lightoj1010【规律】

    思路: 根据案例的规律其实已经猜的差不多了,answer=n*m/2; 有一条边是1的情况,也很好判断,answer=n*m; 就是有一条边是2的时候比较隐秘:是连续2*2一块可以填,然后2*2不填, ...

  3. MySQL 5.7 INFORMATION_SCHEMA 详解

    refman mysql 5.7 INFORMATION_SCHEMA提供了对数据库元数据的访问,MySQL服务器信息,如数据库或表的名称,列的数据类型,访问权限等. 有时也把这些信息叫做数据字典或系 ...

  4. 基于testcontainers的现代化集成测试进阶之路

    大型的软件工程项目除了大量的产品级代码外必不可少的还有大量的自动化测试.自动化测试包含从前端到后端甚至到产品线上不同模块和环境的各种类型的测试.一个比较经典的关于自动化测试分布的理论就是测试金字塔,是 ...

  5. 阿里云服务器新手安装nginx

    1.域名购买之后 备案. 2.购买服务器. 3.这两个条件具备之后进行下一步. 本人使用Mac ,实践流程按照Mac本的流程操作. 作为初学者,简配的服务器, 实例类型: I/O优化,操作系统: Ce ...

  6. js的Element.scrollIntoView的学习

    1.Element.scrollIntoView()    该方法让当前元素滚动到浏览器窗口的可是区域内: 2.语法: element.scrollIntoView();//等同于element.sc ...

  7. Linux下处理^M字符

    很多时候windows环境中编辑过的文件,在Linux下经常会出现^M字符,可以通过以下方式处理该字符. vim命令打开文件,然后在vim命令模式下输入以下内容: :%s/^M//g特别注意:注意^M ...

  8. Zepto核心模块源代码分析

    一.Zepto核心模块架构 Zepto核心模块架构图 该图展示了Zepto核心模块架构代码的组织方式.主要分为私有变量.函数和暴露给用户的所有api. Zepto核心模块架构代码 该图展示了Zepto ...

  9. 报错：Could not reserve enough space for object heap error

    windows命令行运行某个命令时出现: 解决办法: 设置开始->控制面板->系统和安全->系统->高级系统设置->环境变量->系统变量->新建: 变量名: ...

  10. 第十九章 排查和调试Web程序 之 防止和排查运行时问题

    1. 概述 常见的几种运行时问题包括 错误数据.慢于预期的响应.未知行为 或者 未处理的异常. Visual Studio 提供了 排查.跟踪 和 日志 等工具 来帮助排查系统的问题.有些情况还需要插 ...