目录
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析
从最简单的结构开始
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个网页</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html><!DOCTYPE html>//声明版本
<html>//网页开始
<head>//网页头部
<meta charset="utf-8">//设置显示编码
<title>我的第一个网页</title>//设置标题
</head>
<body>//网页的可视区域
<h1>我的第一个标题</h1>//h1-h6标题标签
<p>我的第一个段落。</p>//段落标签，上下自带16px外边距
</body>
</html>
对于HTML文档都是，从<html>标记开始，</html>结束，每个文档中有且只有一对html,head,body元素。
一.头部标记
包括页面标题、元信息、样式、脚本、链接标记
一般不显示在网页上
1.标题title标记
<title>页面标题，显示在浏览器的标题栏</title>
2.元信息标记meta
不会显示在页面中
分类：
1.name属性和content属性
| 属性 | 值 | 说明 | 使用方法 |
| name | author | 定义网页作者 | meta name="author" content="信息参数"/> |
| description | 定义网页简短描述 | meta name="description" content="信息参数"/> | |
| keywords | 定义网页关键词 | meta name="keywords"content="信息参数”/> | |
| generator | 定义编辑器 | meta name="generator"content="信息参数”/> |
使用方法：
meta name="copyright" content="信息参数"/>
meta name="robots" content="信息参数"/>//告诉搜索引擎抓取哪些页面
| 值 | 文件是否被检索 | 链接是否被查询 |
| all | 是 | 是 |
| none | 否 | 否 |
| index | 是 | - |
| noindex | 否 | 是 |
| follow | - | 是 |
| nofllow | 是 | 否 |
2.http-equiv属性和content属性
| 属性 | 值 | 说明 | 使用方法 |
| http-equiv | content-type | 内容类型 | <meta http-equiv= "content-type" content="text/html; charset=信息参数" /> |
| expires | 网页缓存过期时间 | <meta http-equiv="expires" content="Fri 12 Jan 2001 18:18:18 GMT" /> | |
| refresh | 刷新与跳转(重定向)页面 | <meta http-equiv=" refresh" content="时间; url=网址参数"> | |
| set-cookie | 如果网页过期，那么存盘的cookie将被删除 | ||
| content | some_text | 定义与http-equiv或name属性相关的元信息 |
<meta http-equiv= "cache-control " content="no-cache">;//表示禁止从缓存中访问页面内容，且无法脱机浏览
二、主体body
<body></body>
1.标记属性
可以改变页面显示效果
| 属性 | 值 | 说明 |
| text | rgb(r,g,b) rgb(r%,g%,b%) #rrggbb或#rgb colormame | rgb函数(整数) ,r、g、 b取值范围为0~255。 rgb函数(百分比) ,r g、b的值范围为0~ 100十六进制数据(6 位或3位)，如#rrggbb 或#rgb, r、 g、b为十六进制数，取值范围: 0~9、 A~F。例如#3F0，可转换为#33FF00。 |
| bgcolor | 同上 | 规定文档的背景颜色。不赞成使用 |
| alink | 同上 | 规定文档中活动链接的颜色。不赞成使用 |
| link | 同上 | 规定文档中未访问链接的默认颜色。不赞成使用 |
| vlink | 同上 | 规定文档中已被访问链接的颜色。不赞成使用 |
| background | URL | 规定文档的背景图像。不赞成使用 |
| topmargin | pixel | 规定文档中上边距的大小 |
| leftmargin | pixel | 规定文档中左边距的大小 |
三、基本语法
1.单个标记
可以用/结尾
<br>或者<br/>换行
<hr>水平分隔线
<link>链接标记
2.成对标记
需要开始标记和结束标记，可嵌套，不交叉
<html>描述网页</html>
<body>可见页面内容</body>
<strong>重要文本，会被加粗体显示</strong>
3.属性
为标记添加属性，修改默认效果
<首标记（开始标记） 属性名="属性值"（可以不加“”） ...>
举例：<p align="center">该段落居中显示</p>//如果不写属性，则默认居左对齐
4.注释
<!--信息写在这，不会出现在浏览器-->
<comment>这是一个会显示到部分浏览器的注释方式</comment>
5.书写规范
不区分大小写，最好统一，<>对应，注意结尾，属性值最好加“”，不要有多余空格
6.html文档类型
</DOCTYPE> 其作用就是告诉浏览器使用哪种HTML版本来 显示网页。
代码：</DOCTYPE html>的意思是采用HTML5版本来显示网页
1、<!DOCTYPE>声明位于文档中最前面的位置，处于<html>标签之前
2、<!DOCTYPE>不是HTML标签
关于网页排版
一、初步设计
1.标题字标记
<h1 align="left/center/right/justify">1号标题文字</h1>
h后面的数字越小标题字越大。标题字标记的align属性用来定义标题字的对齐方式，
对齐方式有四种，分别是left、 center、 right、 justify。 但是一般推荐设计者使用CSS样式表来定义对齐方式。
2.特殊符号
| 代码 | 显示 | 含义 |
|---|---|---|
| < | < | 小于号 |
| > | > | 大于号 |
| & | & | 并且 |
| " | " | 引号 |
| ® | ® | 已注册 |
| © | © | 版权 |
| ™ | ™ | 商标 |
|   | 半方大的空白 | |
|   | 全方大的空白 | |
| | 不断行的空白（显示一个空格） |
3.文本修饰标记
b粗体i斜体u下划线del删除线sup上标sub下标strong着重粗体em加重语气斜体small字变小big字变大
4.字体标记font（html5好像不支持
语法:<font face="黑体，宋体" size="+7" color="#000fff"></font>
5.段落排版
<p></p>段落标记，是一个块级标记（不可以再包含其他块级标记）
<br>换行标记
<hr width="像素或百分比" size="整数单位px" color="rgb函数，十六进制，英文名" align="left/center/right">水平分割线
分别表示设置水平线宽度，设置水平线高度，设置水平线颜色喝设置水平线对齐方式
拼音注释音标ruby和rt标记
段落缩进blockquote标记
预格式化pre标记
二、列表
多种不同的列表可以互相嵌套，但是写的时候不可以交叉
1.无序列表
语法：
<ul type="">
<li type="">项目名称</li> //这个是列表项标记
</ul>
type就是设置前面的形状，可以单独设置也可以在ul处统一设置
有三种属性值，disc实心圆形，circle空心圆形，square实心正方形
2.有序列表
语法：
<ol type="" start="">
<li type="" value="n">项目名称</li>
</oi>
在ol中，type可以设置有序列表的序号形式，有五种类型
1 数字列表 A大写字母列表 a小写字母列表 I大写罗马字母列表 i小写罗马字母列表
start一般默认序号从1开始，但是如果不想从1开始，可以设置一下起始数字
在li中的如果单独改变type只影响这一行的类型，不过要是改变了value,后续的列表编号会随之改变
3.定义列表
格式:
<dl>
<dt>项目1</dt>
<dd>描述</dd>
...
<dt>项目2</dt>
...
</dl>
没有符号也没有序号，我也不知道这是啥
三、超链接与浮动框架
超链接就是能跳转（另一个网站啊，同一个网站的某个地方，甚至图片，文件啥的）的链接吧，浮动框架就是网页里头孤立的小窗（是弹窗广告吗？？）
1.超链接
格式：
<a href="url" name="" title="提示信息" target="窗口名称">超链接标题</a>
a超链接标记
href链接指向的目标文件
name规定锚的名称
title指向链接的提示信息
target指定打开的目标窗口
属性值：
_self 当前框架打开
_blank 在一个全新空白窗口打开
_top 在顶层框架打开
_parent 在当前框架的上一层打开
framename 在指定框架名称打开
超链接路径：
绝对路径：比如http网址，和盘符开始定义的文件路径
相对路径：相对于当前文件路径的位置，同一目录(index.html)或者上一个目录（../index.html）和下一个目录(web/note.html)
根路径：好像和绝对路径中的文件路径差不多，但是人家是相对路径，为啥捏？(一般不使用，服务器多的时候才使用）
在文件中分类，内部链接（是相对链接）和外部链接（是绝对链接）
2.超链接应用
1.下载文件
<a href="url">链接内容</a>
2.访问FTP站点
<a href="ftp://服务器ip地址或域名">链接的文字</a>
3.打开图像
<a href="URL><img src="" alt=""></a>
4.发送邮件的超链接
<a href="mailto:E-mail地址[ ?subject=邮件主题[&参数=参数值]]">链接内容</a>
部件地址必须完整，例如intel@qq.com。参数有cc (抄送)、bec (密送)、subject (主题) body。多个收件人用分号“;”分隔:多个参数用“&”连接，“&”与关键字之间不能留有空格:空格用“%20”替代。
5.页面书签
实现段落中任意跳转
定义书签：<a name="书签名">书签标题</a>
书签链接：<a href="#书签名">书签标题</a> //同一页面内
<a href="URL#书签名">书签标题</a> //不同页面间
3.浮动框架
<iframe 属性名称="value" name="iframename"></ iframe>
<a href="target.html" target="iframename " >链接标题</a>
iframe成对标记，必须插入到body不能插入到frameset标记
浮动框架属性以及其说明
src设置源文件属性
frameborder设置框架边框
name设置框架名称
scrolling设置框架滚动条
width设置浮动框架窗口宽度
marginwidth设置框架左右边距
height设置浮动框架窗口高度
marginheight设置框架上下边距
四、图像与多媒体
1.图像
插入图像：<img src="URL" alt="替代文本">
其他属性为可选属性
| 属性 | 属性值 | 描述 | ||||||||||
| src | URL | 图像的路径 | ||||||||||
| alt | 文本 | 图像不能显示时的替换文本 | ||||||||||
| title | 文本 | 鼠标悬停时显示的内容 | ||||||||||
| width | 像素 | 设置图像的宽度 | ||||||||||
| height | 像素 | 设置图像的高度 | ||||||||||
| border | 数字 | 设置图像边框的宽度 | ||||||||||
| vspace | 像素 | 设置图像顶部和底部的空白（垂直边距） | ||||||||||
| hspace | 像素 | 设置图像左侧和右侧的空白（水平边距） | ||||||||||
| align |
|
|
2.图像的替代文本
<img src="URL" alt="替代文本">
5848
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
