html5基本标记语法
一：html网页语法总体写法（下面几行必须写）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>gs的个人网站</title>
</head>
<body>
</body>
</html>
说明：
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
二：html网页头部内容标记语法
1.html<title>元素 <title></title>
<title> 标签定义了不同文档的标题。
<title> 在 HTML/XHTML 文档中是必须的。
<title> 元素:
定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题
<head>
<title>gs的个人学习网站</title>
</head>
2.html<base>元素 <base></base>
<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接
<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>
3.HTML <link> 元素 <link/>
<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
</head>
4.HTML <style> 元素 <style></style>
<style> 标签定义了HTML文档的样式文件引用地址.
在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:
CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.
CSS 可以通过以下方式添加到HTML中:
(1)内联样式- 在HTML元素中使用"style" 属性
(2)内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
(3)外部引用 - 使用外部 CSS 文件
1.内联模式：直接在网页文档内容部分的标签中添加样式就行了 只对添加的那一个标签起作用
(1)<h1 style="text-align:center;">标题</h1> 设置标题居中对齐
(2)<h1 style="color: red">标题</h1> 设置标题颜色为红色
(3)<h1 style="background-color:red;">标题背景颜色</h1> 设置标题部分的背景颜色
(4)<h1 style="font-family:verdana;">标题</h1> 设置标题的字体（是宋体还是别的字体）
(5)<h1 style="font-size:20px;">标题</h1> 设置标题字体的大小
注意：<h1 style="text-align:center;color: red;">标题</h1> 当你只设置一个样式的时候，样式结尾分号可写可不写，但是如果写多个样式，之间必须用分号隔开
2.内部样式：直接在网页文档的头部中添加样式 在当前页面中对添加的那一类标签都起作用
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
3.外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
5.HTML <meta> 元素 <meta/>
meta标签描述了一些基本的元数据。
<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务
属性说明：
<head>
<meta name=”description” content=”描述内容”/> 定义页面的描述
<meta name=”keywords” content=”关键字内容”/> 定义页面关键字
<meta name=”author” content=”作者名字”/> 定义页面作者的名字
</head>
6.HTML <script> 元素
<script>标签用于加载脚本文件，如： JavaScript。
<script> 元素在以后的章节中会详细描述
三：html网页内容标记语法
1.html标题
HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的（<h></h>）
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
1.html段落
HTML 段落是通过标签 <p> 来定义的.<p></p>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
2.html超链接(链接)
HTML 链接是通过标签 <a> 来定义的. <a></a>
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
默认情况下，链接将以以下形式出现在浏览器中：
一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。
注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示
属性说明：
(1)href属性 在标签<a> 中使用了href属性来描述链接的地址。
<a href="http://www.runoob.com">这是一个链接</a>
(2)target 属性
使用 target 属性，你可以定义被链接的文档在何处显示
<a href="http://www.runoob.com/" target="_blank">访问菜鸟教程!</a> 在新窗口打开文档
<a href="http://www.runoob.com/" target="_self">访问菜鸟教程!</a> 在当前页面打开文档
(3)id属性
id属性可用于创建在一个HTML文档书签标记。
提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的
<a id="tips">有用的提示部分</a> 在HTML文档中插入ID
有下面两种方法可以调用这个链接
1.<a href="#tips">访问有用的提示部分</a> 在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"
2.<a href="http://www.runoob.com/html/html-links.html#tips">访问有用的提示部分</a>
从另一个页面创建一个链接到"有用的提示部分(id="tips"）
下面补充常见的三种链接方法
(1) 链接外部网站：<a href=”http://www.baidu.com”>百度</a>
(2)链接本地文档(就是下载本地文档)<a href=”文档路径/文档名字”>下载</a>
如果文档和网页在同一个路径下就不需要写路径了，直接写文档名字即可
(3)邮箱链接 <a href=”mailto:邮箱地址”>联系我</a>
3.html图像
HTML 图像是通过标签 <img> 来定义的. <img/>
<img src="/images/logo.png" width="258" height="39" />
属性说明：
(1)源属性src 用于提供图片地址
<img src=”/images/logo.png” /> 插入本地图片
<img src=”http://www.baidu.com/123”/> 插入网上图片
(2)高度属性height，宽度属性width 用于设置图像的高度和宽度 必须和src属性连用
<img src=”/images/logo.png” width=”100” height=”100”/> 插入本地图片,宽为100，高为100
<img src=”http://www.baidu.com/123” width=”100” height=”100”> 插入网上图片，宽为100，高为100
(3)alt属性 用来为图像定义一串预备的可替换的文本(替换文本属性的值是用户定义的)
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
<img src=”本地图片或者网上图片” width=”50” height=”50” alt=”字符串，随便写” />当图片不能加载出来的时候，后面的字符串会代替图片显示出来
注意：
(1)指定图像的高度和宽度的一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。
(2)假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片
加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。
4.html水平线
<hr> 标签在 HTML 页面中创建水平线 <hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
5.html注释
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
注释写法如下：<!-- 这是一个注释 -->
6.html折行
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br > 标签 <br>
<p>这个<br>段落<br>演示了分行的效果</p>
7.html文本格式化
HTML 使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式, 如：粗体 or 斜体
这些HTML标签被称为格式化标签
<b>123</b>=<strong>123</strong> 加粗
<i>456</i>=<em>456</em> 斜体
8.html表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border=”1”>
<tr>
<td></td>
<td></td>
</tr>
</table>
<table></table>属性说明：
(1)<table border=”1”></table> 设置表格边框为1
注意：如果不定义边框属性(border=”1”)，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
(2)<table cellspacing=”1”></table> 设置单元格间间距
(3)<table cellpadding=”0”></table> 设置单元格中的数据与单元格的间距
(4)<table width=”100” height=”100”></table> 设置表格的高度和宽度
(5)<table alight=”left或者center或者right”></table> 表格左对齐，居中对齐，右对齐，不写的话默认是左对齐
(6)<table bgcolor=”red”></table> 设置表格的背景颜色
(7)<table bgground=”网络图片地址或者本地图片路径”></table>
添加表头：
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
9.html列表
HTML 支持有序、无序和定义列表
(1)无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用 <ul> 标签
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
(2)有序列表
列表项目使用数字进行标记，有序列表始于 <ol> 标签，每个列表项始于 <li> 标签，列表项项使用数字来标记
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
(3)自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
10.html表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 <form> 来设置
<form>
.
input 元素(输入元素)
.
</form>
介绍html表单-输入元素
多数情况下被用到的表单标签是输入标签（<input>）。
注意：下面中的value和name可以互换，value有默认值，name没有默认值
输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
(1)文本域
文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域
<form>
First name: <input type="text" value="firstname"><br>
Last name: <input type="text" value="lastname">
</form>
(2)密码字段
<form>
Password: <input type="password" value="pwd">
</form>
(3)单选按钮
<input type="radio"> 标签定义了表单单选框选项
<form>
<input type="radio" name="sex">123<br>
<input type="radio" name="sex" >456
</form>
注意：name后面的名字随便写，但是名字要相同
(4)复选框
<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项
<form>
<input type="checkbox" name="vehicle" >I have a bike<br>
<input type="checkbox" name="vehicle" >I have a car
</form>
(5)提交按钮
<input type="submit"> 定义了提交按钮.
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:
<form action="html_form_action.php" >
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
11.html框架 <iframe></iframe>
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面
<iframe src="URL"></iframe> 该URL指向不同的网页
属性说明：
(1)height和width属性用来定义iframe标签的高度和宽度，属性默认以
像素为单位，但是你可以指定其按比例显示(如：80%)
<iframe src="index.html" width="200" height="200"></iframe>
(2)frameborder 属性用于定义iframe表示是否显示边框 设置属性值为 "0" 时移除iframe的边框
<iframe src="index.html" width="200" height="200" frameborder="0"></iframe>
(3)使用iframe来显示目标链接页面 目标链接的属性必须使用iframe的属性，如下实例:
<iframe src="index.html" name="iframe_a"></iframe>
<a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a>
上面的意思就是说：将index.html的网页内容用框框起来，然后用下面的网页内容代替index.html网页的内容
12.html颜色 HTML 颜色由红色R、绿色G、蓝色B混合而成 总共有1600万种颜色
颜色值：HTML 颜色由一个十六进制符号来定义，这个符号由红色,绿色和蓝色的值组成（RGB）,颜色的最小值是0（十六进制：#000）,最大值是255（十六进制：#FFF）
相对于使用rgb(255,255,0)，使用rgba(255,255,0,0.5)可以实现设置颜色透明度的功能，这里的0.5表示透明度，范围0~1。
<p style="background-color:rgb(255,255,0,0.25)">
通过 rbg 值设置背景颜色
</p>
其实颜色的表示方法不需要什么进制啊，rgb来表示，如下图表示即可，但是不可以表示透明度：<p style="background-color:red ">123</p> 这样写就OK了
13.html字符实体
HTML 中的预留字符必须被替换为字符实体。
一些在键盘上找不到的字符也可以使用字符实体来替换
(1)音标符
(2)字符实体 注意：html5区分字母大小写
14.html 同一资源定位器（URL）
URL 是一个网页地址。
Web浏览器通过URL从Web服务器请求页面
当您点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址
URL可以由字母组成，如"runoob.com"，或互联网协议（IP）地址： 192.68.20.50 大多数人进入网站使用网站域名来访问，因为 名字比数字更容易记住
其实吧，记住www就行了，别的用的不多
url字符编码
URL 只能使用 ASCII 字符集.
来通过因特网进行发送。由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。
URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。
URL 不能包含空格。URL 编码通常使用 + 来替换空格。
其实吧，没啥卵用，编码都不用看了
本文出自 “新网学会博客” 博客，请务必保留此出处http://xwxhvip.blog.51cto.com/13020757/1971521
原文地址：http://xwxhvip.blog.51cto.com/13020757/1971521
