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. linux下安装QQ等EXE文件

    安装好linux系统后,发现linux很多自带的软件用起来很不习惯,于是去网上下载QQ等在Windows下经常使用的exe文件. 发现这些文件无法安装,在网上找了一些解决办法,须下载wine,然后才可 ...

  2. C++经典面试算法题

    转自:http://blog.csdn.net/f_r_e_e_x/article/details/50770907 //1.实现strcpy. char* MyStrCpy( char *pDest ...

  3. Windows CreateEvent，SetEvent，WaitForSingleObject的用法

    http://blog.pfan.cn/embed/19089.html WaitForSingleObject的用法 DWORD WaitForSingleObject(   HANDLE hHan ...

  4. 以太坊开发教程（二） 利用truffle发布宠物商店 DAPP 到 以太坊测试环境Ropsten

    1.环境安装 1) node安装 设置镜像地址: curl --silent --location https://rpm.nodesource.com/setup_8.x | bash -下载安装 ...

  5. hdu4570-区间dp

    这道题的题意不是一般的难懂啊,各种查字典都没理解,还是没忍住去看了别人的博客,没想到题很简单,1-n内划分若干个区间,使的每个区间和最小,每个区间的区间和是:区间开头的数*2^区间长度. 区间dp # ...

  6. NET?.NET Framework？.NET Core?

    什么是.NET?什么是.NET Framework?什么是.NET Core? https://www.cnblogs.com/1996V/p/9037603.html 什么是.NET?什么是.NET ...

  7. 053 Maximum Subarray 最大子序和

    给定一个序列(至少含有 1 个数),从该序列中寻找一个连续的子序列,使得子序列的和最大.例如,给定序列 [-2,1,-3,4,-1,2,1,-5,4],连续子序列 [4,-1,2,1] 的和最大,为 ...

  8. 机器学习框架ML.NET学习笔记【5】多元分类之手写数字识别（续）

    一.概述 上一篇文章我们利用ML.NET的多元分类算法实现了一个手写数字识别的例子,这个例子存在一个问题,就是输入的数据是预处理过的,很不直观,这次我们要直接通过图片来进行学习和判断.思路很简单,就是 ...

  9. HATEOAS REST Service

    用户通过点击页面的href的链接地址,而跳转到其他网页,实现浏览网页的过程了. -> 让调用REST的api就可以实现,类似于用户浏览网页的从一个页面跳转到另外一个页面的过程了 -> 而这 ...

  10. SQL判断一个事件段 是否在数据库中与其他时间段有重叠 判断时间重叠

    数据库字段startDate 开始时间   endDate 结束时间  -两个参数 比如查2-2  至2-6 在数据库中是否与其他时间有重叠 四个条件有一项满足则有重叠时间 思路是这样子 以开始和结束 ...