HTML 标签（一）
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
- 11111
- 22222
- 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 标签（一）的更多相关文章
- a标签点击跳转失效--IE6、7的奇葩bug
一般运用a标签包含img去实现点击图片跳转的功能,这是前端经常要用到的东西. 今天遇到个神奇的bug:如果在img上再包裹一层div,而且div设置了width和height,则图片区域点击时,无任何 ...
- IE6、7下html标签间存在空白符，导致渲染后占用多余空白位置的原因及解决方法
直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...
- 百度MIP页规范详解 —— canonical标签
百度MIP的规范要求必须添加强制性标签canonical,不然MIP校验工具会报错: 强制性标签<link rel="/^(canonical)$/"> 缺失或错误 这 ...
- 【CSS进阶】伪元素的妙用--单标签之美
最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...
- TODO：Laravel 使用blade标签布局页面
TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...
- 最新 去掉 Chrome 新标签页的8个缩略图
chrome的新标签页的8个缩略图实在让人不爽,网上找了一些去掉这个略缩图的方法,其中很多已经失效.不过其中一个插件虽然按照原来的方法已经不能用了,但是稍微变通一下仍然是可以用的(本方法于2017.1 ...
- css-父标签中的子标签默认位置
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- xpath提取多个标签下的text
title: xpath提取多个标签下的text author: 青南 date: 2015-01-17 16:01:07 categories: [Python] tags: [xpath,Pyth ...
- 多个Img标签之间的间隙处理方法
1.多个标签写在一行 <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> ...
- html5标签canvas函数drawImage使用方法
html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...
随机推荐
- 将Date转换成 yyyy-MM-dd 格式的字符串
// 方法1 原型Date.prototype.format = function (format) { var o = { "M+": this.getMon ...
- aimOffset注意事项
AimOffset的记录 AimOffset是什么,就是动画(相对于某个具体姿势比如待机动作的)叠加. AimOffset有什么用,简单说就是叠加动作,比如无双中骑马挥刀动作叠加. 注意步骤 1所有分 ...
- 【Ionic+AngularJS 开发】之『个人日常管理』App（一）
写在前面的话 过去一年自己接触了不少手机前端开发,得益于现在手机性能的提升和4G普及,感觉使用混合技术开发手机App已经可以满足越来越多的应用场景了.新年伊始,对自己2016年所学知识做一个阶段性 ...
- 2.关键字global,nonlocal
count=0 def func(): print(count) count+=1 func() UnboundLocalError: local variable 'count' reference ...
- Glassfish Cannot run program "/usr/libexec/StartupItemContext; error=2 , No such file or directory
临时处理办法 http://sohu.io/questions/3833214/jvm-failed-to-start-java-io-ioexception-cannot-run-program-u ...
- C# Obsolete(已弃用方法属性)
class Realization : Interface { /// <summary> /// 已弃用的方法,Obsolete第二个参数设置为true,调用此方法会产生警告并引起编译器 ...
- BZOJ 1047: [HAOI2007]理想的正方形 单调队列瞎搞
题意很简明吧? 枚举的矩形下边界和右端点即右下角,来确定矩形位置: 每一个纵列开一个单调队列,记录从 i-n+1 行到 i 行每列的最大值和最小值,矩形下边界向下推移的时候维护一下: 然后在记录的每一 ...
- 题解 P1006 传纸条
传送门 其实我觉得这个跟P1004挺类似(又是动规) 题解P1004 #include<iostream> #include<cstdio> #include<cstri ...
- Codeforces Round 56-A. Dice Rolling(思维题）
time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...
- Netty-flush
TimerServer: ch.pipeline().addLast(new TimeEncoder()); ch.pipeline().addLast(new TimeServerHandler() ...