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. 访问WEB-INF下JSP资源的几种方式(转)

    访问WEB-INF下JSP资源的几种方式 方法一: 本来WEB-INF中的jsp就是无法通过地址栏访问的,所以安全. 如果说你要访问这个文件夹中的jsp文件需要在项目的web.xml文件中去配置ser ...

  2. C++的dllexport和dllimport

    __declspec(dllexport) 声明一个导出函数,是说这个函数要从本DLL导出.我要给别人用.一般用于dll中省掉在DEF文件中手工定义导出哪些函数的一个方法.当然,如果你的DLL里全是C ...

  3. [Xcode 实际操作]五、使用表格-(11)调整UITableView的单元格顺序

    目录:[Swift]Xcode实际操作 本文将演示如何调整单元格在表格中的位置. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //首先 ...

  4. 基于IDEA实现SSM整合框架的搭建配置流程

    1.创建数据库表,以员工信息表为例子: DROP TABLE IF EXISTS `em_info`; CREATE TABLE `em_info` ( `em_id` INT(50) NOT NUL ...

  5. Docker学习：virtualbox安装和配置

    下载.安装 从官网:https://www.virtualbox.org/下载,根据说明直接一步步安装即可 安装ubuntu 说明:这里本机内存是16G,若内存<4G安装完成虚拟机, 安装完成之 ...

  6. python爬虫——web前端基础（3）

    超链接的使用------>>>> 链接的引用使用的是<a>标记. <a>标记的基本语法:<a href="链接地址"   ta ...

  7. Count the string (KMP+DP)

    题目链接 #include <bits/stdc++.h> using namespace std; typedef long long ll; inline int read() { , ...

  8. spring 3.2.7 applicationContext.xml

    <?xml version="1.0" encoding="UTF-8" ?> <beans xmlns="http://www.s ...

  9. js弹框怎么获得父页面的元素

    js获取父页面的元素可以用$(window.parent.document).find("#customer_id").val();这里的customer_id表示父页面某一个元素 ...

  10. C8051开发环境

    1 keilC51 2 Silicon Laboratories C8051Fxxx uVision Driver_4 C:\Keil9 3  Silicon Laboratories Configu ...