HTML语言
是标记语言，非编程语言，包含了HTML 标签及文本内容
html标签通常是成对出现的，其中第一个标签是开始标签（开放标签），第二个为结束标签（闭合标签）
html网页结构（body部分为网页显示）
----------------------------------
<html>
<head>
<title>页面标题</title>
</head>
<body>
<h1>标题</h1>
<p>段落</p>
</body>
</html>
----------------------------------
<!DOCTYPE>声明有助于浏览器中正确显示网页。不区分大小写
若输出中文时乱码 则应在head部分加入<meta charset="UTF-8">
----------------------------------
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<h1>标题</h1>
<p>段落</p>
</body>
</html>
----------------------------------
段落 <p> </p>
连接 <a> <a href="URL"target="_blank">链接文本</a> href属性指定链接地址target 可以定义被链接的文档在何处显示
图像 <img> <img src="图片" width="258" height="39" />
没有内容的 HTML元素被称为空元素。空元素是在开始标签中关闭的。
在开始标签中添加斜杠，比如 <br />折行，是关闭空元素的正确方法.
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行也被显示为一个空格。
属性：
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name="value"。
属性值应该始终被包括在引号内。
在某些个别的情况下如属性值本身就含有双引号，那么必须使用单引号，例如：name='John "ShotGun" Nelson'
大多数 HTML 元素的属性:
class 为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id 定义元素的唯一id
style 规定元素的行内样式（inline style）
title 描述了元素的额外信息 (作为工具条使用)
HTML标题
HTML 标题是通过<h1> - <h6> </h1>-</h6>标签来定义的.
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
HTML水平线
<hr>标签在 HTML 页面中创建水平线。
HTML 注释
<!-- 这是一个注释 -->
折行
在不产生一个新段落的情况下进行换行，用<br />标签
文本格式化
<b>定义粗体文本
<em>定义着重文字
<i>定义斜体字
<small>定义小号字
<strong>定义加重语气
<sub>定义下标字
<sup>定义上标字
<ins>定义插入字
<del>定义删除字
"计算机输出" 标签
这些标签常用于显示计算机/编程代码。
<code>定义计算机代码
<kbd>定义键盘码
<samp>定义计算机代码样本
<var> 定义变量
<pre>定义预格式文本
HTML 引文, 引用, 及标签定义
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<abbr title="etcetera">etc.</abbr>
<!-- abbr代表缩写-->
<br />
<acronym title="World Wide Web">WWW</acronym>
<!-- acronym标记一个首字母缩写-->
<p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。仅对于 IE 5 中的 acronym 元素有效。</p>
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The worlds leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>
<!--blockquote定义长的引用-->
<p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>
</body>
</html>
HTML<head>
<head>元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息
头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, <base>
<title> 元素
<title>标签定义了不同文档的标题。
<title> 在 HTML/XHTML 文档中是必须的。
定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<base> 元素
<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接
<link> 元素
<link>标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<style> 元素
<style>标签定义了HTML文档的样式文件引用地址也可以直接添加样式来渲染 HTML 文档
head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
<meta> 元素
<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
<script> 元素
<script>标签用于加载脚本文件
HTML 样式- CSS
CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
<link rel="stylesheet" type="text/css" href="styles.css">
</style>
</head>
<body style="background-color:yellow">
<h1 style="background-color:red;">这是一个标题</h1> <!--显示为红色背景并链接到一个外部样式表-->
<p>这是一个段落。</p> <!--显示为蓝色并链接到一个外部样式表-->
<a href="URL" style="text-decoration:none;">访问链接</a> <!--制作无下划线的链接-->
</body>
</html>
font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式, text-align（文字对齐）属性指定文本的水平与垂直对齐方式
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
<h1 style="text-align:center;">居中对齐的标题</h1>
HTML图像
定义图像的语法是：
<img src="url" alt="some_text"> src是指源属性，即图像的URL地址。alt 属性用来为图像定义一串预备的可替换的文本（当无法加载图片时，浏览器将显示这个替代的文本而不是图像）
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">高度和宽度默认单位为像素，指定了高度和宽度，页面加载时就会保留指定尺寸。
<area shape="circle" coords="90,58,3" alt="Sun" href="sun.htm">定义图像地图中的可点击区域 coords为其横纵坐标
HTML表格
表格由 <table>标签来定义,每个表格均有若干行（由 <tr> 标签定义,每行被分割为若干单元格（由 <td> 标签定义),据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。
如果不定义边框属性，表格将不显示边框
<table border="4">
<caption>表表表</caption>
<colgroup>
<col span="1" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>表头1</th>
<th>表头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>
表
<thead>定义表格页眉 <tbody>定义表格主体 <tfoot>定义表格页脚<caption>定义表格标题<colgroup>定义表格列的组 <col>定义列的属性
HTML列表
HTML 支持有序、无序和定义列表
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
无序列表
此列项目使用粗体圆点（典型的小黑圆圈）进行标记，无序列表使用 <ul> 标签,每个列表项始于<li>标签
<ul>
<li>12315</li>
<li>321545</li>
</ul>
有序列表
有序列表始于 <ol>标签
自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>RPC</dt>
<dd>- 学校</dd>
<dt>网安一班</dt>
<dd>- class</dd>
</dl>
区块
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。块级元素在浏览器显示时，通常会以新行来开始和结束例: <h1>, <p>, <ul>, <table>。 内联元素在显示时通常不会以新行开始例: <b>, <td>, <a>, <img>。
<div> 元素
无特定含义，是块级元素，它可用于组合其他 HTML 元素的容器以及是文档布局。由于它属于块级元素，浏览器会在其前后显示折行。与 CSS 一同使用，可用于对大的内容块设置样式属性。
<span> 元素
无特定含义，是内联元素，可用作文本的容器，与 CSS 一同使用时，<span> 元素用于为部分文本设置样式属性。
布局
大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>布局</title>
</head>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:blue;">
<h1 style="margin-bottom:0;">主标题</h1></div>
<div id="menu" style="background-color:gray;height:200px;width:100px;float:left;">
<b>菜单</b><br>
123<br>
1234<br>
12345</div>
<div id="content" style="background-color:pink;height:200px;width:400px;float:right;">
31665131546</div>
<div id="footer" style="background-color:green;clear:both;text-align:center;">
qaqaqaq</div>
</div>
</body>
</html>
123154
HTML 表单和输入
表单用于收集不同类型的用户输入
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等。
表单使用表单标签 <form> 来设置，多数情况用到表单标签是输入标签<input>，输入类型是由类型属性（type）定义
文本域
文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。表单本身并不可见。在大多数浏览器中，文本域的缺省宽度是20个字符。
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
密码字段
密码字段通过标签<input type="password"> 来定义.密码字段字符不会明文显示，而是以*或·替代。
<form>
Password: <input type="password" name="pwd">
</form>
单选按钮,复选框
<input type="radio">标签定义了表单单选框选项,<input type="checkbox">定义了复选框,用户需要从若干给定的选择中选取一个或若干选项
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
----------------
<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>
提交按钮
<input type="submit" value="提交">定义了提交按钮.
<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 src="demo_iframe.htm" width="200" height="200"></iframe>定义iframe标签的高度与宽度
<iframe src="demo_iframe.htm" frameborder="0"></iframe> frameborder 属性用于定义iframe表示是否显示边框，将其属性值设置为0，移除iframe的边框
使用iframe显示目标链接页面
<iframe src="文件URL" name="11111"></iframe> 显示框架
<p><a href="链接URL" target="11111">链接文本</a></p>
HTML颜色
HTML颜色是由一个十六进制符号来定义的，这个符号由红色，绿色和蓝色的值组成（RGB）。
每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。
三种颜色混合而成的具体效果：
颜色值
通过十六进制设置背景颜色：
<p style="background-color:#FFFF00">
通过RBG值设置背景颜色：
<p style="background-color:rgb(255,255,0)">
通过颜色名设置背景颜色:
<p style="background-color:yellow">
颜色名：141个颜色名称是在HTML和CSS颜色规范定义的（17标准颜色，再加124）。17标准颜色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色。
HTML 脚本
<script>标签用于定义客户端脚本，比如 JavaScript。
<script> 元素既可包含脚本语句，也可通过src 属性指向外部脚本文件。
JavaScript`最常用于图片操作、表单验证以及内容动态更新。
<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容
<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>
HTML 字符实体
小于号(<)：< 或< 或 <
大于号(>)： >
引号（“）："
乘号(×):×
除号(÷): ÷
网友评论