Home >Web Front-end >HTML Tutorial >HTML basics (classic)
HTML basics (classic)
- PHP中文网Original
- 2016-08-15 16:49:496994browse
1.2, note: & lt;-text-& gt;
1.3, label attribute (name): "
2、整体页面设置
Doctype：告诉浏览器使用什么html规范来解析html。现在使用
Meta:提供有关页面的元信息，例：页面编码、刷新等.
<meta http-equiv="Refresh" CONTENT="2"> <!--刷新--> <meta http-equiv="Refresh" content="2 ;url=http://www.baidu.com"/> <!--跳转--> <meta charset="UTF-8"> <!--设置编码-->
关键字和描述：
<!--关键字(用于在百度中搜索关键字)--> < meta name="keywords" content="你好,博客园,飞机" > <!--描述--> < meta name="keywords" content="你好欢迎你，你也可以来博客园" >
2、HTML中头部(head)的应用
2.1网页名标签
Title：网页头部信息
<title>Titletitle></title>
2.2引用标签：
Link：引用外部资源
<link rel="stylesheet" type="text/css" href="css/com.css"> <!--CSS--> <link rel="shortcut icon" href="i_name%20(1).jpg"> <!--图片-->
2.3样式标签
Style：引用页面中的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的样式</title>
<style>
.color{
background-color: black;
color: aliceblue;
}
</style>
</head>
<body>
<!--最常使用且可重复使用-->
<div class="color">引用样式</div>
<div class="color">不错</div>
<div class="color">还是这个样式</div>
</body>
</html>
2.4脚本标签(后续更新)
3、HTML中主体(body)的应用
2.1标签分为2类(对写CSS样式有用)：
块级标签：p、fieldset、h1、hr、p、ol、ul.
内联标签：a、img、lable、span、select、input.
内联标签和块级标签的区别：内联是根据内容有多少就占多少，快级标签是不管多少都会占一行。
2.2常用标签应用：
表单中的标签：form、input、select、lable、textarea
用于格式的标签：
、
、
列表标签：ul、li、ol、dl、dt、dd
表格标签：table(、
、布局标签：div、span
引用、跳转外部标签：a(文字跳转)、meta(页面跳转)、link(引用外部资源)
2.3各种符号:
网址查看：http://www.cnblogs.com/webd/archive/2010/04/16/1713298.html 例：<a >
2.4标签的应用(id可以在任何标签内且唯一)：
1、Div：p用于布局
<body> <div> <div name="upper"> <div name="top"> </div> <div upper_nav> </div> </div> <div name="middle"> </div> <div name="lower"> </div> </div> </body>
2、a：引用和跳转
(1)、超链接
<!--超链接-->
<a href="http://www.baidu.com">本页面跳转百度</a>
<a href="http://www.baidu.com" target="_blank">新页面跳转百度</a>
(2)、锚：定位到id的位置，id位置将会在页面的顶部。id不能重复，可以不写id。
<!--锚--> <a>1章</a> <a>2章</a> <div>1章内容</div> <div>2章内容</div>
3、p:是段落标签，每一个p标签后都会被认为是段落。
<!--p段落标签--> <p>dddddddddddddddddd<br> </p> <p>dddddddddddddddddd</p>
4、H:h1到h6是从大到小的的字号。
<!--H标签--> <h1>a</h1> <h2>a</h2> <h3>a</h3> <h4>a</h4> <h5>a</h5> <h6>a</h6>
5、列表标签：
<!--无序列表(没有排列限制可以随意加li)：-->
- 无序无序
- 无序无序
- 有序有序
- 有序有序
- 北京
- 海淀区
- 朝阳区
- 重庆
- 万州区
- 南岸区
6、Lable标签：用于鼠标点击文字后跳到文本框中
<!--label标签--> <div> <label> 姓名: <input> </label> <label> 婚否: <input> </label> </div>
7、表格：
7.1、新建表格：
表格由
| 标签定义）字母 td 指表格数据（table data，第一行标题行则通常用 | 来显示。即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。<!--新建表格：--> <table border="1"> <!--border为显示边框--> <thead> <tr> <th >第一列</th> <th>第二列</th> <th>第三列</th> </tr> </thead> <tbody> <tr> <td>内容1</td> <td>内容2</td> <td>内容3</td> <td>内容4</td> </tr> <tr> <td>内容1</td> <td>内容2</td> <td>内容3</td> <td>内容4</td> </tr> <tr> <td>内容2</td> <td>内容3</td> <td>内容4</td> </tr> </tbody> </table> 7.2、表格合并： 使用colspan(横向合并)和rowspan(纵向合并)合并表格 (1)横向合并 原图如下： 代码： <table border="1"> <thead> <tr> <th colspan="2">第一列</th> <th>第二列</th> <th>第三列</th> </tr> </thead> <tbody> <tr> <td>内容1</td> <td>内容2</td> <td>内容3</td> <td>内容4</td> </tr> <tr> <td>内容1</td> <td>内容2</td> <td>内容3</td> <td>内容4</td> </tr> <tr> <td>内容1</td> <td>内容2</td> <td>内容3</td> <td>内容4</td> </tr> </tbody> </table> 执行代码后： (2)纵向合并 原图如下： 代码： <table border="1"> <thead> <tr> <th >第一列</th> <th>第二列</th> <th>第三列</th> <th>第四列</th> </tr> </thead> <tbody> <tr> <td>内容1</td> <td>内容2</td> <td>内容3</td> <td>内容4</td> </tr> <tr> <td rowspan="2">内容1</td> <td>内容2</td> <td>内容3</td> <td>内容4</td> </tr> <tr> <td>内容2</td> <td>内容3</td> <td>内容4</td> </tr> </tbody> </table> 执行代码后： 8、ifname标签：一般用来包含网站 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的百度</title> </head> <body> <h1>我的百度</h1> <iframe style="width: 100%;height: 2000px"src=" </body> </html> 9、表单标签： Form标签：用于为用户输入创建 HTML 表单 Input标签：用于搜集用户信息 intup标签中的type属性：
|
|---|
