HTML 超文本标记语言，使用标记标签来描述网页。
1.第一个html代码
<!DOCTYPE html> --声明为HTML5文档
<html> --HTML页面的根元素
<head> --包含文档的元meta数据
<meta charset="utf-8"> --防止中文乱码
<title>菜鸟教程</title> --描述文档标题
</head>
<body> --可见的页面内容
<h1>第一个标题</h1>
<p>第一个段落</p>
<hr/> --我是水平线分隔符
<p>第二个段落</p>
<a href="http://www.runoob.com/html/html-basic.html" target="_blank">这是链接</a>
<img src="/html/Fengjing.jpg" width="258" height="39"/>
<img src="file://D:/job/PC评价页面JPG/PC评价页面JPG/1.jpg" > --读取电脑本地图片
</body>
</html>
标题是通过<h1>-<h6>标签来定义的。
段落是通过<p>标签来定义的，块级元素，会自动在段落的前后添加空行。
链接是通过<a>标签来定义的。
图像是通过<img>标签来定义的。
<!--这是一个注释--> 注释
2.属性
属性一般描述于开始标签，总是以名称/值对的形式出现。name="value"
class
id
style
title
target="_blank"定义打开新窗口
3.文本格式化
<b>定义粗体
<i>定义斜体
<strong>定义加重语气，加粗
<em>定义着重文字，斜体
<small>定义小号字
<sub>定义下标字
<sup>定义上标字
<ins>定义插入字
<del>定义删除字
<pre>定义预格式文本，保留空格和空行，用于描述计算机代码
<dfn>定义项目</dfn>
<code>定义计算机代码</code>
<var>定义变量</var>
<samp>定义计算机样本</samp>
<kbd>定义键盘码</kbd>
<abbr titie="world health organization>定义缩写
<address>定义地址
<dbo dir="rtl">定义文字方向
<blockquote>长的引用
<q>短的引用，会有双引号
<cite>定义引用，引证，斜体
4.链接
<a href="http://www.runoob.com/html/html-basic.html" target="_blank">这是链接</a>
target属性定义链接的文档显示在何处，_blank=打开新窗口
id属性定义一个html文档的书签标记
<a id="tips">有用的提示</a>
<a href="#tips">访问有用的提示</a>
不在同一个页面中<a href="www.runoob.com/"target="_blank">访问有用的提示</a>
链接到一个邮件
<a href="mailto:haoye@wealink.com?Subject=Hello" target="_top">发送邮件</a>
5.html头部
title 标题
base 定义html文档中所有链接标签的默认链接。
meta定义html文档中的描述，关键词，作者和字符集等
link定义文档与外部资源之间的关系
<head>
<base href="http://www.runoob.com/html/html-head.html" target="_blank">
<title>文档标题</title>
<meta charset="utf-8">
<link rel="stylesheet" style="text/css" href="style.css">
</head>
调用:<a href>链接</a>
6.样式 -css
CSS: cascading style sheets
1)内联样式 元素中使用style属性
<p style="background-color:blue">这是一个段落</p>
2）内部样式表 <head>区域使用<style>元素来包含css
<head>
<style type="text/css">
p {color:yellow}
body {back-ground-color:red}
</style>
</head>
3)外部引用 使用外部css文件
<head>
<link rel="stylesheet" style="text/css" href="mystyle.css">
</head>
背景颜色 background-color
字体：font-family
字体大小：font-size
对齐方式：text-align
7.图像
<img src="url" alt="text" width="300" height="200" align="top">
url定义图像的位置
alt定义图像无法载入时的替换文本信息
align对齐方式 top顶部对齐middle bottom
style="float:left" 图像浮动在段落的左边
border="10" 定义图像边框
map 创建图像映射
<img src="url" usermap="#plantmap">
<map name="plantmap">
<area shape="rect" coords="x1,y1,x2,y2" alt="sun" href="sun.htm"> 矩形
<area shape="circle" coords="x1,y1,r" alt="Mercury" href="mercury.htm"> 圆形
<area shape="poly" coords="x1,y1,x2,y2,..." href=url> 多边形
</map>
8.表格
<table border="1" cellpadding="10"></table>定义表格<tr></tr>定义行<td></td>定义列<th colspan="2"></th>定义表头<caption></caption>定义标题
<thead></thead>页眉<tfoot></tfoot>页脚<tbody></tbody>表格主体
colspan=“2”单元格跨两列
rowspan=“2”单元格跨两行
cellpadding 单元格边距
cellspacing 单元格间距
colgroup定义表格列的组 col 定义列属性
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:green">
</colgroup>
9.列表
列表可以嵌套
<ul></ul>无序列表<ol></ol>有序列表 <li></li>每个列表
<dl></dl>自定义列表 <dt></dt>自定义列表项 <dd></dd>列表项定义
type属性定义有序列表类型 有序：A、a、I、i
style属性定义无序列表类型 list-style-type:disc（圆点）\circle\square（正方形）
<dl>
<dt>Coffee</dt>
<dd>--black hot drink</dd>
<dt>Milk</dt>
<dd>--white cold drink</dd>
</dl>
10.区块
块级元素 <h1><p><ul><table> <div>文档布局
内联元素<a><img><b><td> <span>部分文本样式
11.表单
表单是一个包含表单元素的区域。表单元素允许用户在表单中输入内容，比如：文本域、下拉列表、单选框、复选框等等。
<form>
input元素
</form>
<input type="text" >文本
<input type="password">密码
<input type="radio"> 单选
<input type="checkbox">复选
<select>
<optgroup>
<option></option>
</optgroup>
</select> 下拉列表
<textarea></textarea>
<input type="submit">提交
<button type="button"></button>按钮
<fieldset></fieldset>边框
<form action="html_form_action.php" method="get" >
<fieldset>
<legend>Personal information</legend>
username:<input type="text" name="username" placeholder="请输入用户名"><br/>
password:<input type="password" name="password"placeholder="请输入密码"><br/>
<input type="radio" name="sex" value="female">female<br/>
<input type="radio" name="sex" value="male" checked="checked">male<br/>
<input type="checkbox" name="vehicle" value="Bike">Bike<br/>
<input type="checkbox" name="Bus" value="Bus" checked="checked">Bus<br/>
<input type="checkbox" name="Car" value="Car">Car<br/>
<select name="cars">
<optgroup label="Swedish">
<option value="volvo">volvo</option>
<option value="saab" >saab</option>
</optgroup>
<optgroup lable="German">
<option value="fiat" selected>fiat</option>
</optgroup>
</select><br/>
<textarea rows="10" cols="20">我是文本框
</textarea><br/>
<input type="button" value="helloworld"><br/>
<input list="browsers">
<datalist id="browsers">
<option value="IE">
<option value="chorme">
<option value="Opera">
<option value="Safari">
</datalist>
</fieldset>
<input type="submit" value="Submit">
</form>
12.框架
直接显示一个页面
<iframe src="Fengjing.jpg" frameborder="0" width="200" height="200"></iframe>
显示一个目标链接页面
<iframe src="demo_iframe.htm" name="iframe_a" frameborder="0" width="200" height="200"></iframe>
<p><a href="Fengjing.jpg“” target="iframe_a">任意文本</p>
13颜色
颜色由红、绿、蓝混合而成，用十六进制符号来定义。每种颜色最小值#00，最大值#FF.
<p style="background-color:#FFFF00">背景色是黄色的写法1</p>
<p style="background-color: Yellow">背景色是黄色的写法2</p>
<p style="background-color: rgb(255,255,0)">背景色是黄色的写法3</p>
14.插入脚本
<script>document.write("hello")</script>
<noscript>这是文本</noscript>
当浏览器不显示脚本或禁用脚本时，显示<noscript>中的内容。
<p id="demo">js能改变元素内容和颜色</p>
<script>
function myfunction() {
// document.getElementById("demo").innerHTML="lalala"
document.getElementById("demo").style.color="red"
}
</script>
<button type="button" value="点我" onclick="myfunction()">点我</button>
15.字符实体
小于号 < < <
大于号 >
空格  
16.URL统一资源定位器
格式：scheme://host.domain:port/path/filename
scheme-定义因特网服务的类型，常见http。
host-定义域主机，http默认www
domain-定义因特网域名，比如runoob.com
port-定义主机上的端口号,http默认80
path-定义服务器上的路径
filename-定义文档资源的名称
http 超文本传输协议 用于普通http://开头的网页
https 安全超文本传输协议，加密所有信息交换
ftp文本传输协议，文件下载或上传至网站
file 本地文件
浙公网安备 33010602011771号