前言
其实我这个人不是很会做笔记，而且喜欢偷工减料，不是真的偷工减料，是简化，该留着的还是会留着。那废话不多说开始进入正题。
个人喜欢《剑来》所以以后会附赠一句剑来或者雪中悍刀行里面我认为比较好的句子。
所有难熬又熬过去的苦难，就是在心头砸下一个坑，坑越大，以后就可以容纳更多。
HTML简介
HTML 是一种相当简单的、由不同元素组成的标记语言，它可以被应用于文本片段，使文本在文档中具有不同的含义（它是段落吗？它是项目列表吗？它是表格吗？），将文档结构化为逻辑块（文档是否有头部？有三列内容？有一个导航菜单？），并且可以将图片，影像等内容嵌入到页面中。本模块将介绍前两个用途，并且介绍一些 HTML 的基本概念和语法。
HTML标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
eg:
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为
utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落HTML元素语法
HTML 文档由 HTML 元素定义。
HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性
属性
属性是 HTML 元素提供的附加信息。
HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：class=".css"。
class 为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id 定义元素唯一的id值
style 规定元素的行内样式
title 描述了元素的额外信息 (作为工具条使用)
HTML常用标签
HTML标题
标题（Heading）是通过 <h1> - <h6> 标签进行定义的。
<h1>这是标题 1</h1>
<hr>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
<hr>是水平线
HTML段落
通过标签定义
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<b> 定义粗体文本
<b>我是粗字体</b>
<em> 定义着重文字
<em>强调文本，我比加粗字体稍细一些</em>
<i> 定义斜体字
<i>我是斜体</i>
<small> 定义小号字
<small>我是小号字体</small>
<sub> 定义下标字
<sub>我是下标字</sub>
<strong> 定义加重语气
<strong>我是加重语气(加粗)</strong>
<sup> 定义上标字
<sup>我是上标字</sup>
<ins> 定义插入字
<p>你好，<ins>我是插入字</ins>!</p>
<del> 定义删除字
<del>我是删除字</del>
HTML超链接
<a href="url">点击访问百度</a>
target属性
<a href="http://www.baidu.com" target="_blank" rel="noopener noreferrer">访问百度 </a>
_blank在新窗口或选项卡中打开链接的文档
_self在与单击相同的框架中打开链接的文档（默认设置）
_parent在父框架中打开链接的文档
_top在整个窗口中打开链接的文档
HTML<head>
<head>元素
包含了所有的头部标签元素，在<head>元素中你可以插入脚本（script），样式文件（css），及各种
meta信息
可以添加在头部区域端地元素标签为：<title>,<style>,<meta>,<link>,<script>,<noscript>和<base>
<title>元素
<title>标签定义了不同文档的标题
<title>元素：
定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题
base元素
标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接：
<head> <base href="http://www.baidu.com/" target="_blank"> </head>
link元素
标签定义了文档与外部资源之间的关系 标签通常用于链接到样式表：
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
style元素
标签定义了HTML文档的样式文件引用地址
在<style>元素中可以直接添加样式来渲染HTML文档：
<head>
<style type="text/css">
body {background-color:yellow} 主体背景改成黄色
p {color:blue} 段落颜色改成蓝色
</style>
</head>
meat元素
一些基本的元数据 不显示在页面上 会被浏览器解析 一般用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据
为搜索引擎定义关键词：
为网页定义描述内容：
每30秒刷新当前页面：
<script>元素
标签用于加载脚本文件，如：javascript
HTML图像-图像标签
（<img>）和源属性（Src）
<img>是空标签，意思是说，他只包含属性，并没有闭合标签
要在页面上显示图像，就需要使用源属性（src），src指"source"，源属性的值是图像的URL地址
语法：<img src="图像地址" alt="如果无法加载图片，这以文本显示">
属性
height（高度）与width（宽度）属性用于设置图像的高度与宽度
属性值默认单位为像素：
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
如果没有指定图片的大小，加载页面时有有可能会破坏页面的整体布局
标签
HTML表格
HTML表格和边框属性
如果不定义边框属性，表格将不显示边框，使用边框属性来显示一个带有边框的表格
HTML表格表头
表格的表头使用<th>标签进行定义
大多数浏览器会把表头显示为粗体居中的文本
<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>创建表格
HTML表格标签
HTML列表
HTML无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点进行标记；
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
HTML有序列表
有序列表也是一列项目，列表项目使用数字进行标记，有序列表始于
标签，每个列表项始于
1. 标签
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
HTML自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合；
自定义列表以<dl>标签开始，每个自定义列表项以<dt>开始，每个自定义列表项的定义以<dd>开 始；
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML列表标签
HTML<div>和<span>
html可以通过<div>和<span>将元素结合起来
描述
div
定义了文档的区域，块级 (block-level)
span
用来组合文档中的行内元素， 内联元素(inline)
区块元素
大多数html元素被定义为块级元素和内联元素
块级元素在浏览器显示时，通常会以新行来开始（和结束）
实例：<h1>,<p>,<ul>,<table>
内联元素
内联元素在显示时通常不会以新行开始
实例：<b>,<td>,<a>,<img>
<div>元素
div元素是块级元素，他可用于组合其他html元素的容器；
div元素没有特定的含义，由于它属于块级元素，浏览器会在其前后显示折行；
如果于css一同使用，div元素可用于对大的内容块设置样式属性；
<span>元素
span元素是内联元素，可用作文本的容器；
span元素也没有特定的含义；
当于css一同使用时，span元素可用于为部分文本设置样式属性；
HTML布局
网站布局
大多数网站会把内容安排到多个列中（像杂志或报纸那样）；
大多数网站可以使用div或者table元素来创建多列，css用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观；
HTML表单和输入
html表单用于收集不同类型的用户输入
HTML表单
表单是一个包含表单元素的区域
表单元素是允许用户在表单中输入内容，比如：文本域（textarea），下拉列表，单选框（radio
buttons），复选框（checkboxes）等等；
表单使用表单标签<form>来设置
<form> input 元素 .</form>
HTML 表单-输入元素
多数情况下被用到的表单标签是输入标签（
<input>）；
输入类型是由类型属性（type）定义的；
文本域（Text Fields）
文本域通过<input type="text">标签来设定，当用户要在表单中键入字符，数字等内容时，就会用到文本域；
<form action=""> First name:
<input type="button" name="firstname">
<br> Last name:
<input type="text" name="lastname">
</form>
密码字段
密码字段通过标签<input type="password">来定义；
<form> Password:
<input type="password" name="pwd"> </form>
单选按钮（Radio Buttons）
标签定义了表单单选框选项；
<form>
<input type="radio" name="sex" value="male">
Male<br>
<input type="radio" name="sex" value="female">
Female
</form>
复选框（Checkboxes）
<input type="checkbox">定义了复选框，用户需要从若干给定的选择中选取一个或若干选项；
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
提交按钮（Submit Button）
<input type="submit">定义了提交按钮；
当用户点击确认按钮时，表单的内容会被传输到另一个文件，表单的动作属性定义了目的文件的文件名；
由动作属性定义的这个文件通常会对接收到的输入数据进行相关处理；
<form name="input" action="html_form_action.php" method="get">
Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>
表单标签
HTML框架
iframe语法：
<iframe src="url"></iframe> //该url指向不同的网页
iframe - 设置高度与宽度
height和width属性用来定义iframe标签的高度与宽度；
属性默认以像素为单位，但可以指定按比例显示（如："80%"）；
<iframe src="demo_iframe.html" width="200" height="200"></iframe>
iframe - 移除边框
frameborder属性用于定义iframe表示是否显示边框；
设置属性值为"0"移除iframe的边框；
<iframe src="demo_iframe.html" frameborder="0"></iframe>
显示目标链接页面
iframe可以显示一个目标链接的页面；
目标链接的属性必须使用iframe的属性；
<iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a
href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>
662
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
