标签：center 二层 浏览器 对齐 password table div gray textarea
<p id="foo1"><a href="http://www.baidu.com" target="_blank">百度</a>这是一个p标签</p>
| 格式化标签 | 作用 |
|---|---|
| b | 定义粗体文字 |
| big | 定义大号字 |
| em | 定义着重文字 |
| i | 定义斜体文字 |
| small | 定义小号文字 |
| strong | 定义加重语气 |
| sub | 定义下标字 |
| sup | 定义上标字 |
注意：所有的格式化时都必须使用<>包裹单词，例如：。还有big在html5中已经取消来，被css样式替换掉了。设定被上标和下标的文字需要在这些文字的前后添加其他的内容才能对比出来，否则看不出来效果。
<link rel="stylesheet" type="text/css" href="css文件">
<style type="text/css">
选择器{
样式的设定
}
</style>
<p style="color:red"></p>
- 链接数据
- 文本链接
- 图片链接
- 属性
- href属性：指向另一个文档的链接
- name属性：创建文档内的链接
```html
<a name="tips" href="#tips1">hello</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="tips1" href="#tips">跳转到hello</a>
```
name属性用于定义文档内的跳转，如果希望从文档中的一个地方跳转到另外一个地方可以使用name和href属性，需要注意的是：name属性规定好超链接的名字后，另外一个标签的href中的设置必须是"#跳转链接的名字"，必须加上#，否则会创建失败。
- img标签属性
- alt：替换文本属性，当图片加载不出来的时候显示的文本名字
- width：宽
- height：高
```html
<a href="http://www.baidu.com" target="_blank">
<img src="release_open.png" alt="上传log" width="50rpx" height="50rpx">点击我
</a>
```
注意：a标签中可以插入img图片标签，可以达到通过点击图片直接跳转链接的目的
| 表格 | 描述 |
|---|---|
| table | 定义表格 |
| caption | 定义表格的标题 |
| th | 定义表格的表头 |
| td | 定义表格的单元 |
| tr | 定义表格的行 |
| thead | 定义表格的页眉 |
| tbody | 定义表格主体 |
| tfoot | 定义表格的页脚 |
| col | 定义表格的列属性 |
<table border="1" cellpadding="20">
<tr>
<td>姓名</td>
<td>课程</td>
<td>总分</td>
</tr>
<tr>
<td>李镇</td>
<td>
<ol>
<li>语文</li>
<li>数学</li>
<li>政治</li>
<li>军事</li>
</ol>
</td>
<td>370</td>
</tr>
</table>
注意：在标签td中也可以写入ul/ol和li标签
<ul>
<li>动物</li>
<ol>
<li>老虎</li>
<li>狮子</li>
</ol>
<li>人类</li>
<ol>
<li>中国人</li>
<li>美国人</li>
</ol>
</ul>
<dl>
<dt>hello world</dt>
<dd>课程1</dd>
<dt>hello world</dt>
<dd>课程2</dd>
<dt>hello world</dt>
<dd>课程3</dd>
</dl>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table布局</title>
</head>
<body marginwidth="0px" marginheight="0px">
<table width="100%" height="950px" style="background-color:darkgray">
<tr>
<td colspan="2" width="100%" height="10%" style="background-color:aqua">头部</td>
</tr>
<tr>
<td width="30%" height="80%" style="background-color:blue">左菜单</td>
<td width="70%" height="80%" style="background-color:blueviolet"></td>
</tr>
<tr>
<td width="100%" height="10%" colspan="2" tyle="background-color:darkcyan">这是底部</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index01</title>
<link rel="stylesheet" href="../html5/index01.css">
<style type="text/css">
body{
margin:0px;
}
div#container{
width:100%;
height:950px;
background-color:darkgray;
}
div#heading{
width:100%;
height:10%;
background-color:aqua;
}
div#content_menu{
width:30%;
height:80%;
background-color:antiquewhite;
float:left;
}
div#content_body{
width:70%;
height:80%;
background-color:blueviolet;
float:left;
}
div#footing{
width:100%;
height:10%;
background-color:black;
clear:both;
}
</style>
</head>
<body>
<!--<div id="div1">
<p>第一个</p>
<p>第二个</p>
<a href="https://www.toutiao.com">头条<br/>
<img src="" alt="图片">
</a>
</div>
<br/>-->
<div id="container">
<div id="heading">头部</div>
<div id="content_menu">内容菜单</div>
<div id="content_body">内容主体</div>
<div id="footing">底部</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="">
用户名:
<input type="text">
<br/>
密码:
<input type="password">
<br/>
你喜欢的水果有:
<br/>
苹果<input type="checkbox">
香蕉<input type="checkbox">
西红柿<input type="checkbox">
梨<input type="checkbox">
<br/>
性别:
男<input type="radio" name="sex">
女<input type="radio" name="sex">
<br/>
最喜欢的网站:
<select id="" name="">
<option value="百度">www.baidu.com</option>
<option value="">www.taobao.com</option>
<option value="">www.toutiao.com</option>
<option value="">www.ejpro.com</option>
</select>
<br/>
<textarea cols="30" rows="20">请填写个人简介</textarea>
<br/>
<input type="button" value="按钮">
<input type="submit" value="确认">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>框架</title>
</head>
<frameset rows="30%,50%,20%">
<frame src="../html5/frame01.html"></frame>
<frame src="../html5/frame02.html"></frame>
<frame src="../html5/frame03.html"></frame>
</frameset>
</html>
注意：如果是竖向分割则使用cols，如果是横向分割则使用rows。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>框架</title>
</head>
<iframe src="../html5/frame01.html" frameborder="0"></iframe>
</html>
<!--最顶级文件本身index03.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>框架</title>
</head>
<!--<frameset rows="30%,50%,20%">
<frame src ="../html5/frame01.html"></frame>
<frame src ="../html5/frame02.html"></frame>
<frame src ="../html5/frame03.html"></frame>
</frameset>-->
<iframe src="../html5/frame01.html" frameborder="0" width="1000px" height="1000px"></iframe>
</html>
<!--顶级文件中嵌套框架的最外层框架(frame03.html)-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body bgcolor="purple">
Frame01
<br/>
<iframe src="../html5/frame02.html" frameborder="0" width="700px" height="700px"></iframe>
</body>
</html>
<!--嵌套框架的第二层框架(frame02.html)-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body bgcolor="red">
Frame02
<br/>
<iframe src="../html5/frame03.html" frameborder="0" width="500px" height="500px"></iframe>
</body>
</html>
<!--在嵌套框架的第三层框架(frame03.html)-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body bgcolor="skyblue">
Frame03
<br/>
<a href="https://www.toutiao.com" target="_top"><img ="../html5/release_open.png" alt="图片">今日头条</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
简介
为什么使用？
为了代码的完整性和良好性
文档声明：
DTD：规定了使用通用标记语言的网页语法
语法
标签：center 二层 浏览器 对齐 password table div gray textarea
原文地址：https://www.cnblogs.com/ddzc/p/12827579.html
