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. Apt本地源制作

    方法一 缓存deb包 # apt install XXX # mkdir -p /usr/local/mydebs # find /var/cache/apt/archives/ -name *.de ...

  2. Git 分支管理 BUG分支

    BUG分支  廖雪峰 软件开发中,bug就像家常便饭一样.有了bug就需要修复, 在Git中,由于分支是如此的强大,所以, 每个bug都可以通过一个新的临时分支来修复,修复后,合并分支,然后将临时分支 ...

  3. java反射机制基础总结

    1反射机制是啥? 反射是运行中的程序检查自己和软件运行环境的能力,它可以根据它发现的进行改变.通俗的讲就是反射可以在运行时根据指定的类名获得类的信息. 2反射机制有啥用? Reflection(反射) ...

  4. unity获取设备分辨率

    设备分辨率 using UnityEngine; using System.Collections; public class ExampleClass : MonoBehaviour { void ...

  5. Prefix.pch文件的用法

    我们知道,每新建立一个工程,比如说HelloWord,在分类SupportingFiles里都会有一个以工程名开头-Prefix.pch结尾的文件,如HelloWord-Prefix.pch.对于这个 ...

  6. 初次学习DropWizard框架——解决maven打包时出现没有主清单属性的问题

    笔者因为公司的项目需要,开始接触DropWizard框架,照着官网https://www.dropwizard.io/0.9.2/docs/getting-started.html撸了一遍. 工具为I ...

  7. jQuery EasyUI/TopJUI创建日期输入框

    jQuery EasyUI/TopJUI创建日期输入框 日期时间输入框组件 HTML required:必填字段,默认为false:prompt:显示在输入框的提示性文字:pattern:日期格式 Y ...

  8. JavaScript进阶 - 第5章 小程序，大作用（函数）

    5-1什么是函数 函数的作用,可以写一次代码,然后反复地重用这个代码. 如:我们要完成多组数和的功能. var sum;   sum = 3+2; alert(sum);   sum=7+8 ; al ...

  9. CodeForces - 581B-Luxurious Houses

    The capital of Berland has n multifloor buildings. The architect who built up the capital was very c ...

  10. [RDL]多级占比做法

    先添加[店铺],然后,对[店铺]添加父组,记得勾选[添加组头] 然后直接删除[区域2],[省份2] 添加到[店铺列] [区域]行,生意额占比表达式:=sum(Fields!生意额.Value)/Sum ...