HTML

HTML:超文本编辑语言（标签语言）

浏览器顺序渲染，从上到下，从左到右

是树型的

html格式

标签的属性是关键

meta标签 可提供有关页面的元信息

  1. <meta charset="utf-8">
  2. <meta name ="keywords" content="关键词">   <!--关键词用于搜索-->
  3. <meta name="description" content="描述"> <!--网站的介绍-->
  5. <meta http-equiv="retresh" content="3";http://www.baidu.com> <!--3秒跳转-->
  7. <link rel="icon" herf ="https://www.">  <!--标签的图标-->
  1. <body>
  2.     <h1>
  3.     <p> <!--段落-->
  4.     <b>
  5.     <strike>  <!--中间的横线-->
  6.     <em> <!--斜体-->
  7.     <sub><!--下角标-->
  8.     <sup><!--上角标-->
  9. 	<br> <!--换行-->
  10.     <hr><!--水平线-->
  11. <body>

图片标签

  1. <img src="" alt="">

a标签

  1. id = ""  id是唯一的

标签分类：

  • 块级标签---独占一行

    • h1
    • p
    • div
  • 内联标签---根据内容而定
    • sub
    • sup
    • b
    • span

列表标签

  • 无序列表 unorder list

    1. <ul>
    2. 	<li>11111</li>
    3.     <li>22222</li>
    4.     <li>33333</li>
    5. </ul>

  • 有序列表ol

    1. ```html
    1. 11111
    2. 22222
    3. 33333

    ```

定义列表dl

  1.   ```html
  2. <dl>
  3. 	<dt>标题</dt>
  4. 	<dd>内容</dd>
  5. </dl>
  6. ```

table

  1. <tr>
  2.     <td rowspan="2" align="center"></td>
  3.     <td ></td>
  4.     <td ></td>
  5. </tr>

制作的菜单

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>menu</title>
  6.     <style>
  7.             table{
  8.                 height: 300px;
  9.                 width: 500px;
  10.                 border-color: #E788F7;
  11.             }
  12.         img{
  13.             width: 100px;
  14.         }
  15.     </style>
  16. </head>
  18. <body>
  19.     <table border="2px" cellpadding="0px" cellspacing="0px" align="center">
  21.         <tr>  <!--第一列是标题内容-->
  22.             <td colspan="3" align="center">星期一菜谱</td>
  23.         </tr>
  25.         <tr>
  26.             <td rowspan="2" align="center">素菜</td>
  27.             <td >青草茄子</td>
  28.             <td >花椒扁豆</td>
  30.         </tr>
  32.         <tr>
  33.             <td >小葱豆腐</td>
  34.             <td >炒白菜</td>
  35.         </tr>
  37.         <tr>
  38.             <td rowspan="2" align="center" >荤菜</td>
  39.             <td >油焖大虾</td>
  40.             <td >海参鱼翅</td>
  41.         </tr>
  43.         <tr>
  45.             <td >红烧肉
  46.                  <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">
  47.             </td>
  48.             <td >烤全羊</td>
  50.         </tr>
  52.     </table>
  54. </body>
  55. </html>

制作的课程表

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>classtable</title>
  6.     <style>
  7.           table{
  9.                 border-color: blue;
  10.             }
  12.     </style>
  13. </head>
  15. <body>
  16.     <table border="1" cellspacing="1" align="center" >
  18.         <tr>
  19.             <td>项目</td>
  20.             <td colspan="5" align="center">上课</td>
  21.             <td colspan="2" align="center">休息</td>
  22.         </tr>
  24.         <tr>
  25.             <td>星期</td>
  26.             <td>星期一</td>
  27.             <td>星期二</td>
  28.             <td>星期三</td>
  29.             <td>星期四</td>
  30.             <td>星期五</td>
  31.             <td>星期六</td>
  32.             <td>星期日</td>
  34.         </tr>
  36.         <tr>
  37.             <td rowspan="4">上午</td>
  38.             <td>语文</td>
  39.             <td>数学</td>
  40.             <td>英语</td>
  41.             <td>英语</td>
  42.             <td>物理</td>
  43.             <td>计算机</td>
  44.             <td rowspan="4" align="center">休息</td>
  46.         </tr>
  48.         <tr>
  49.             <td>数学</td>
  50.             <td>数学</td>
  51.             <td>地理</td>
  52.             <td>历史</td>
  53.             <td>化学</td>
  54.             <td>计算机</td>
  56.         </tr>
  57.         <tr>
  58.             <td>化学</td>
  59.             <td>语文</td>
  60.             <td>体育</td>
  61.             <td>计算机</td>
  62.             <td>英语</td>
  63.             <td>计算机</td>
  64.         </tr>
  65.         <tr>
  66.             <td>政治</td>
  67.             <td>英语</td>
  68.             <td>体育</td>
  69.             <td>历史</td>
  70.             <td>地理</td>
  71.             <td>计算机</td>
  72.         </tr>
  74.         <tr>
  75.             <td rowspan="2" align="center">下午</td>
  76.             <td>语文</td>
  77.             <td>数学</td>
  78.             <td>英语</td>
  79.             <td>英语</td>
  80.             <td>物理</td>
  81.             <td>计算机</td>
  82.             <td rowspan="2" align="center">休息</td>
  83.         </tr>
  85.         <tr>
  86.             <td>数学</td>
  87.             <td>数学</td>
  88.             <td>地理</td>
  89.             <td>历史</td>
  90.             <td>化学</td>
  91.             <td>计算机</td>
  93.         </tr>
  95.     </table>
  96. </body>
  97. </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之configure make make install

    正常的编译安装/卸载: 源码的安装一般由3个步骤组成:配置(configure).编译(make).安装(make install).   configure文件是一个可执行的脚本文件,它有很多选项, ...

  2. day02-HTML(2)

    一.新知识 1.  !+tab   html5的标签结构   2.  Charset   编码 Ascll Ansi Unicode Gbk Gb2312 Big5 Utf-8   通用字符集 3.关 ...

  3. 获得用户IP、城市、国家等信息的api接口

    1 这个信息比较多 https://api.ipdata.co/?api-key=test <script> $.get("https://api.ipdata.co?api-k ...

  4. SpringMVC基础配置及使用

    SpringMVC基础配置及使用 SpringMVC:1.SpringMVC和Spring的关系:    软件开发的三层架构: web层[表示层.表现层]---->Service层----> ...

  5. HyperLedger Fabric 多机部署(一)

    本文参考:http://www.lijiaocn.com/%E9%A1%B9%E7%9B%AE/2018/04/26/hyperledger-fabric-deploy.html  学习. 1.准备工 ...

  6. uoj#339. 【清华集训2017】小 Y 和二叉树（构造）

    传送门 膜拜大米饼巨巨 构造思路太神仙了-- 先考虑这个序列的开头,肯定是一个度数小于等于\(2\)且标号最小的节点,设为\(u\) 如果一个点度数小于等于\(2\),我们称这个点可以被选择,一个点的 ...

  7. DRF教程8-过滤

    在写后端api时,经常需要使用各种过滤条件,可以使用Q对查询集进行过滤,这里介绍一个新玩意儿 以下是基础文档 https://django-filter.readthedocs.io/en/maste ...

  8. net core建站

    带你快速进入.net core的世界   阅读目录   vmware虚拟机安装 CentOS7.3安装 Windows的客户端软件 .NET Core1.1安装 nginx1.12.1安装 配置防火墙 ...

  9. 七，JOBC数据库编程

    七,JOBC数据库编程 七,JOBC数据库编程 一,java数据库编程步骤 1,将数据库驱动包考入lib目录: 2,加载驱动--整个操作数据库程序运行期间只需要加载一次 Class.forName(& ...

  10. NHibernate中创建User类报错问题

    前两天刚开始学习NHibernate架构,照着前辈的例子打了一遍运行之后没问题,然后自己创建了一个User的Model发现一运行就报User附近有错误,然后就检查,类写的没错用了virtual,Use ...