什么是HTML?
HTML称超文本标记语言,是 HyperText Markup Language的缩写。 它包括一系列标签。通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形,声音,表格,连接等。
一、HTML的基本标签
1.<html>和</html>
<html>标记用于html文件的最前面,用来表示html文件的开始。
而</html>的标记则是放在html的最后面,
用来表示html文件的结束,两个标记必须同时使用。
2.<head>和</head>
<head>和</head>构成html文件的头部部分,
在此标记对之间可以使用<title> </title>和<script> </script>等等标记对,
这些标记都是描述html文档相关信息的标记对,
<head> </head>标记对之间的内容是不会在浏览器中的内容部分出现的
。两个标记必须同时使用。
3.<body>和</body>
<body>和</body>是html文档的主体部分,
在此标记可以包括“<p>”,“</p>”,“<h1>”,“ ”等等众多的标记,
他们所定义的文本,图片等等将会在浏览器的内容部分显示出来。
两个标记必须一起使用。
二、Meta标记
META标记是html语言的head部分的一个辅助性的标记的,他位于head和title标记之间,他提供给用户不可见的信息。
meta标记的用来为搜索引擎robots定义页面主题,或者是定义用户浏览器上的cookie;可以用于来鉴别作者,设置页面格式,标注内容提要和一些关键字,还可以设置页面的自动刷新以及等级等等。
解释:什么utf-8?
UTF-8(8位元,Universal Character Set/Unicode Transformation Format)是针对Unicode的一种可变长度字符编码。它可以用来表示Unicode标准中的任何字符,而且其编码中的第一个字节仍与ASCII相容,使得原来处理ASCII字符的软件无须或只进行少部份修改后,便可继续使用。因此,它逐渐成为电子邮件、网页及其他存储或传送文字的应用中,优先采用的编码。
三、Title标记
在头部的中,有另一组标签
打在
实例:
<title>这是我的html页面</title>
四、文字分隔标记
强制断行标记 <br断行>
强制分段标记 <p分段>
空格  
五、字体标记
1.标题标记
使用方法:<h1标题一>内容</h1标题一>
2.设置字体标记
使用方法:<font size=“2” color=“red” face="黑体"示例>内容
3.字体变化标记
使用:在文字标记中,对于文字的格式也有相当多的变化,如加粗,斜体等等。
<b> 加粗 </b> <i>斜体 </i> <u>底线</u>
<sup></sup> 上标 <smap>用于字母序列等宽</smap>
<sub></sub> 下标
<em></em> 强调 <address>模拟信封上的字体</address>
<strong></strong> 加强
<s></s>删除线 <strike>删除线</strike>
<big>比默认字号大一号</big> <big> </big> 比默认字体大一号
<small>比默认字号小一号</small> <small> </small> 比默认字体小一号
六、背景标记
使用方法:
示例一:
<html>
<head><title>背景颜色</title> </head>
<body bgcolor="red">
<font size="4" face="黑体" color="red">背景颜色</font>
</body>
</html>
示例二:
<html>
<head><title>背景颜色</title> </head>
<body background="bg.jpg">
<font size="4" face="黑体" color="red">背景图片</font>
</body>
</html>
七、分隔线标记
<hr> 分割线标记
示例:
八、序列标记
1.无序列表的示例:
<ul>
无序列表
</ul>
2.有序列表的示例:
<ol>
有序列表
</ol>
3.自定义列表的示例:
<dl>
自定义列表
</dl>
九、表格
1.
<table>是用来在html页面上创建表格的。</table>
2.代表列名一般放在第一行
3.代表格的一行。
4.用来定义表格的一列。
在默认情况下,表格是没有边框的,如果想要出现边框,就是用border属性。
单元格的合并:
1.首先确保表格是一个规整的表格(先画完整表格再合并)
2.根据要合并的单元格,找到其所在的源码位置
行合并:在要合并的单元格中的第一个单元格上使用属性rowspan=“要合并的单元格的个数”,并删除其他要合并的单元格完成合并
列合并:在要合并的单元格中的任意一个上使用属性colspan=“要合并的单元格的个数”,并删除要合并的其他单元格
合并单元格的思想:将多个内容合并的时候就会有多余的东西出来,将其删除。如:将3个td合并成一个,那就多余了2个td,则将多余的两个td删除。
公式:删除的个数=合并的个数-1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table height="300" width="300" border="1" >
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>女</td>
<td >18</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td >18</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>20</td>
</tr>
</table>
</body>
</html>
十、Input标签
写法:<input type = “text" value=" "/>
标签的 type类型分为:
text -文本框
button -按钮
submit-提交
reset-重置
password -密码
checkbox-多选
radio-单选
file -上传文件
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间(小时和分钟)
datetime - 选取时间、日、月、年(UTC 时间)
datetime-local - 选取时间、日、月、年(本地时间)
例子:
1.邮箱输入框
<input type="email" name="user_email" />
2.数字输入框
<input type="number" name="points" min="1" max="10" />
3.数字范围输入框(进度条)
<input type="range" name="points" min="1" max="10" />
4.颜色选择框
<input type="color" name="colortext"/><br>
十一、层标签
<div>这个是层标签</div>
- 层
div
标签 - div本身是没有任何的意义
- 作用:将网页进行模块化的划分
- 可以用CSS装饰层标签