本文介绍了HTML的基础元素和属性，包括doctype声明、HTML版本、文档结构、头部元素、字符编码、标题、段落、标题、对齐属性、换行、分隔线、字体样式、居中、文本格式化、字符实体、图片、超链接、列表、表格、表单、文件上传、框架和HTML的块级及行内元素。
html基础元素和属性
-
<!DOCTYPE html>
html声明有助于浏览器中正确显示网页，指定html语法规范的版本。不区分大小写
-
HTML版本：
1.HTML5
<!DOCTYPE html>-----当前的html文件采用HTML5的版本规范
2.HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
3.XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html></html>
HTML文档标记
-
<head></head>
HTML的头标签 【定义标题，为浏览器显示网页提供附加信息】
-
<meta>
指定网页的字符编码，网页描述，关键词，文件的最后修改时间，作者，和其他附加信息。
（
指定网页的字符编码---<meta charset=”utf-8”>
<meta>设置的网页信息是不会显示。
）
可以设置网页的自动刷新和跳转
-
<title></title>
设置网页标题的标记
-
<body></body>
html身体标记
-
<p><p>
html中的段落标记 特点:1.自成一行，会占满整行，在它的后面出现的内容将会在下一行显示。
-
<h></h>
网页内容的标题
特点:
1.自成一行，会占满整行，在它的后面出现的内容将会在下一行显示。
2.h1~h6 显示出来的效果是字体依次变小。H1最大，h6最小。
3.不同的浏览器显示效果有所差异。
-
align
水平对齐属性[left-左对齐 center-居中对齐 right-右对齐]
-
<br>、<br/>单标记
回车换行（单标记：不是成对出现的，单标记只有一个）
-
<hr>、<hr/>
网页中的一条分隔线
color属性--分隔线颜色【颜色单词/颜色码】
size属性---分隔线粗细【1~7】
width属性---分隔线长短【数字px】
align---水平对齐属性[left-左对齐 center-居中对齐 right-右对齐]
-
<font></font>---专门用来设置字体的标记
color属性---设置字体颜色【颜色单词/颜色码】
size属性----设置字体大小
face属性---设置字体风格【C:\Windows\Fonts】
-
<center></center>
html中的居中标记:
需要被水平居中显示的html标记\文字\图片
-
一组文本格式化标记
HTML可定义很多供格式化输出的元素，例：使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式，从而显示粗体 或者 斜体。
| 标签 | 描述 |
| 定义粗体文本 | |
| 定义着重文字 | |
| 定义斜体字 | |
| 定义小号字 | |
| 定义加重语气 | |
| 定义下标字 | |
| 定义上标字 | |
| 定义插入字 | |
| 定义删除字 |
-
字符实体（就是在网页中输出的特殊符号）
| 显示结果
| 描述 | 实体名称 | 实体编号 |
|
| 空格 |  ； |   |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ' | 撇号 | ' (IE不支持) | ' |
| ￠ | 分 | ¢ | ¢ |
| £ | 镑 | £ | £ |
| ¥ | 元 | ¥ | ¥ |
| € | 欧元 | € | € |
| § | 小节 | § | § |
| © | 版权 | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
-
<img />---htm中显示图片
src属性--设置图片路径
1.绝对路径--从操作系统的指定盘中的目录开始查找图片的路径。
2.相对路径--以当前网页为参照、为中心，对外开始查找图片的路径。
a. 图片与当前网页在同一个目录下【src=”图片名称”】
b.图片保存在当前网页所在目录的子文件夹中【src=”子文件夹的名称\图片名称”】
c. 图片保存在当前网页所在目录的父文件夹中[..\上一层]【src=”..\子文件夹的名称\图片名称”】
3.网络地址路径---http:\\xxxxxxxxxxxx
width属性--设置图片的宽度【数字px】
height属性--设置图片的高度【数字px】
-
<body></body>元素的一些基本操作
设置网页的背景
在body元素中添加bgcolor属性来设置背景颜色
设置背景图片
在body元素中添加background属性来设置背景图片【图片路径】
-
html中的超链接【链接\锚点】
<a>链接显示描述</a>
1.href属性设置被连接的文件路径【绝对/相对/网络地址】
如果没有被连接的文件，那么请使用“#”,表示空连接
2.target属性设置被链接的资源打开方式【默认在同一个窗口中打开连接资源】
_blank----在新窗口中显示资源
_self-------在当前窗口中显示资源
3.name属性----设置链接名称[实现本网页内部的链接]
-
html中的列表
1.有序列表
<ol></ol>---表示一个有序列表
<li></li>-----表示有序列表中的每一项【出现在ol标记中】
type属性--设置有序列表序号的显示形式【a,A,1,i,I】
start属性--设置有序列表序号的开始数字【数字】
2.无序列表
<ul></ul>---表示一个无序列表
<li></li>-----表示无序列表中的每一项【出现在ul标记中】
type属性--设置有序列表序号的显示形式[disc默认 circle square]
3.自定义列表
<dl></dl>--表示自定义列表
<dt></dt>---表示自定义列表中的主分类
<dd></dd>---表示自定义列表中主分类下的次级分类。
-
html中的表格
<table></table>---表示一个表格
<tr></tr>------表示表格中的一行
<td></td>----表示表格中一行里面列
1.关于表格的跨行和跨列
跨列【左右合并单元格】---给td上设置colspan属性，需要跨几个列那么就写数字几。
跨行【上下合并单元格】---给td上设置rowspan属性，需要跨几个行那么就写数字几。
-
html中的表单
1.<form></form>--表示一个表单【通常是用来采集信息之后提交给后台处理程序用的】
注册、登陆、完善个人信息等等都是用表单来完成。
2. action属性-----后台处理程序的访问路径。
3. method属性---当前表单数据提交给后台处理程序的提交方式
【get{默认}/post】
当表单中需要上传文件时表单的提交方式一定是post
4.enctype属性----规定在将表单数据发送到后台处理程序之前如何对其进行编码
注意：只有 method="post" 时才使用 enctype 属性。
| application/x-www-form-urlencoded | 默认。在发送前对所有字符进行编码（将空格转换为 "+" 符号，特殊字符转换为 ASCII HEX 值）。 |
| multipart/form-data | 不对字符编码。当使用有文件上传控件的表单时，该值是必需的。 |
| text/plain | 将空格转换为 "+" 符号，但不编码特殊字符。 |
当表单中需要上传文件时
- 设置表单的method属性=post
- 设置enctype属性
- enctype属性一定是multipart/form-data
-
表单元素
| 名称 | 表现形式 | 注意 |
| 文本框 | <input type="text" name="wenbenkuang" value="默认值"/> |
|
| 密码框 | <input type="password" name="mimakuang" value="123456"/> |
|
| 单选按钮 | <input type="radio" name="sex" value="nan" checked="checked"/>男 | 有多个单选按钮时，为了保证每次只能选一个，要求name属性值要相同。 “男”给用户看的，value表提交到后台的数据值。 checked="checked"设置默认被选中。 |
| 复选框 | <input type="checkbox" name="fuxuankaung" value="book" checked="checked"/>看书 | 有多个复选框时,要求name属性值要相同. “看书”给用户看的，value值提交到后台的数据值。 checked="checked"设置默认被选中。 |
| 日期框 | <input type="date" name="riqikaung" /> |
|
| 文件 | <input type="file" name="filekaung"/> |
|
| 隐藏域 | <input type="hidden" name="hiddenkaung" value="111111"/> | value="111111"提交给后台处理程序的数据值 |
| 下拉列表 | <select name="xialaleibiao"> <option value="sx">陕西省 </option> <option value="gs">甘肃省</option> <option value="sc">四川省</option> <option value="hb">河北省</option> </select> | option--下拉列表中的每一项 value表示提交给后台处理程序的数据值 “陕西省”给用户看的
|
| 文本域 | <textarea cols="22" rows="5"></textarea> | cols--列数设置宽度,rows--行数设置高度 输入超过大小空间之后自带滚动条 |
| 普通按钮 | <input type="button" value="普通按钮"/> | value表示的是按钮上显示的文本值 |
| 表单提交按钮 | <input type="submit" value="表单提交按钮"/> | value表示的是按钮上显示的文本值 提交表单输入数据给后台处理程序 |
| 表单重置按钮 | <input type="reset" value="表单重置按钮"/> | value表示的是按钮上显示的文本值 恢复表单的输入到初始状态 |
| 颜色框 | <input type="color" name="yansekaung"/> |
|
| 邮箱 | <input type="email" name="emailkaung"/> | 提交是会被进行校验 |
| 电话 | <input type="tel" name="telkaung"/> |
|
| 网址 | <input type="url" name="urlkaung"/> | 提交是会被进行校验 |
-
html中的框架元素
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。通常可以用来做网页的布局。
1.frameset标签--表示一个框架集【它里面可以包含框架元素】
- <frameset>标签定义了如何将窗口拆分成框架。
- 每个frameset标签定义了一组行和列。
- 行[rows]/列[cols]的值指明了每个行/列在屏幕上所占的大小。
- 使用frameset标签时候不需要body元素
2.frame标签
<frame>标签定义了每个框架中放入什么文件。
frame语法:
<frame src="放入到框架中的文件路径"></frame>该URL指向不同的网页。
frame的frameborder 属性用于定义frame表示是否显示边框。
设置属性值为 "0" 移除frame的边框:
frame的noresize="noresize"属性 ---frame边框禁止拖动。
-
<div> </div>
<div> 元素是块级元素，它可用于组合其他 HTML 元素的容器
-
<span> </span>
<span> 元素是内联【行内】元素，可用作文本的容器。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性
-
HTML中的块级元素和HTML中的行内元素
HTML 块级元素
块级元素在浏览器显示时，通常会以新行来开始（和结束）。浏览器会在其前后显示折行。
实例: <h1>, <p>, <ul>, <table>,<div>
HTML 内联[行内]元素
内联行内元素在显示时通常不会以新行开始。不会单独占据当前行，其后可以继续显示其他元素。
实例: <b>, <td>, <a>, <img>
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
