前端之--HTML【基础】

693579551 · 发表于 2017-6-22 08:11:09

什么是 HTML？
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页

HTMl基础
HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
<h4>这是一个标题</h4>
<h5>这是一个标题</h5>
<h6>这是一个标题</h6>
例如：

　　 
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
<h4>这是一个标题</h4>
<h5>这是一个标题</h5>
<h6>这是一个标题</h6>

HTML段落
HTML 段落是通过 <p> 标签进行定义的。
<p>这是一个段落</p>
<p>这是另外一个段落</p>

<p>这是一个段落</p>
<p>这是另外一个段落</p>

HTML连接
HTML 链接是通过 <a> 标签进行定义的.
<a href="http://www.google.com">这是一个Google连接</a>

<a href="http://www.google.com">这是一个Google连接</a>

HTML图像
HTML 图像是通过 <img> 标签进行定义的。
<img src="123.png" width="300" height="200">

<img src="123.png" width="300" height="200">

HTML属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定。
<a href="http://www.google.com"></a>
href就是<a>标签的属性

<a href="http://www.google.com"></a>

HTML标题
标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
<h1> 定义最大的标题。<h6> 定义最小的标题。
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
属性       值                   描述
class    classname             规定元素的类名（classname）
id       id                      规定元素的唯一 id
style    style_definition    规定元素的行内样式（inline style）
title    text                规定元素的额外信息（可在工具提示中显示）


<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

HTML段落
HTML水平线
<hr /> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
<p>这是一个段落</p>
<hr />
<p>这是一个段落</p>
<hr />
<p>这是一个段落</p>
标签                描述
<html>             定义 HTML 文档。
<body>             定义文档的主体。
<h1> to <h6>       定义 HTML 标题
<hr>             定义水平线。
          定义注释。

<p>这是一个段落</p>
<hr />
<p>这是一个段落</p>
<hr />
<p>这是一个段落</p>

HTML格式化
文本格式化标签
标签             描述
<b>             定义粗体文本。
<big>       定义大号字。
<em>          定义着重文字。
<i>             定义斜体字。
<small>          定义小号字。
<strong>    定义加重语气。
<sub>       定义下标字。
<sup>       定义上标字。
<ins>       定义插入字。
<del>       定义删除字。
<s>             不赞成使用。使用 <del> 代替。
<strike>    不赞成使用。使用 <del> 代替。
<u>             不赞成使用。使用样式（style）代替。
“计算机输出”标签
标签                描述
<code>          定义计算机代码。
<kbd>             定义键盘码。
<samp>          定义计算机代码样本。
<tt>             定义打字机代码。
<var>             定义变量。
<pre>             定义预格式文本。
<listing>       不赞成使用。使用 <pre> 代替。
<plaintext>          不赞成使用。使用 <pre> 代替。
<xmp>             不赞成使用。使用 <pre> 代替。
引用和术语定义
标签                描述
<abbr>          定义缩写。
<acronym>       定义首字母缩写。
<address>       定义地址。
<bdo>             定义文字方向。
<blockquote>    定义长的引用。
<q>                   定义短的引用语。
<cite>          定义引用、引证。
<dfn>             定义一个定义项目。


<b>文本加粗</b>
<br/>
<strong>文本加粗</strong>
<br/>
<big>文本变大</big>
<br/>
<em>文本变斜</em>
<br/>
<i>文本变斜</i>
<br/>
<small>小号字体</small>
<br/>
来个下标
<sub>定义下标文字</sub>
<br/>
来个上标
<sup>定义上标文字</sup>

<pre>
这是
预格式文本。
它保留了    空格
和换行。
</pre>
<p>pre 标签很适合显示计算机代码：</p>
<pre>
for i = 1 to 10
print i
next i
</pre>

HTML样式
标签             描述
<style>       定义样式定义。
<link>    定义资源引用。
<div>    定义文档中的节或区域（块级）。
<span>    定义文档中的行内的小块或区域。
<font>    规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。
<basefont> 定义基准字体。不赞成使用。请使用样式。
<center> 对文本进行水平居中。不赞成使用。请使用样式。

HTML表格
表格由 <table> 标签来定义。
每个表格均有若干行（由 <tr> 标签定义），
每行被分割为若干单元格（由 <td> 标签定义）。
字母 td 指表格数据（table data），即数据单元格的内容。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格标签
表格             描述
<table>          定义表格
<caption>    定义表格标题。
<th>          定义表格的表头。
<tr>          定义表格的行。
<td>          定义表格单元。
<thead>          定义表格的页眉。
<tbody>          定义表格的主体。
<tfoot>          定义表格的页脚。
<col>       定义用于表格列的属性。
<colgroup>    定义表格列的组。


<table border="1">
<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>
<tr>
<td> </td>
<td> </td>
</tr>
　　<table/>

HTML列表
html列表分为有序列表和无序列表
无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li>。
有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
列表标签
标签       描述
<ol>    定义有序列表。
<ul>    定义无序列表。
<li>    定义列表项。
<dl>    定义定义列表。
<dt>    定义定义项目。
<dd>    定义定义的描述。
<dir>    已废弃。使用 <ul> 代替它。
<menu>    已废弃。使用 <ul> 代替它。
HTML <div> 和 <span>
可以通过 <div> 和 <span> 将 HTML 元素组合起来。



<ul>
<li>coffee</li>
<li>milk</li>
</ul>

<ol>
<li>coffee</li>
<li>milk</li>
</ol>

<dl>
<dt>coffee</dt>
<dd>lack hot drink</dd>
<dt>milk</dt>
<dd>white cold drink</dd>
</dl>

HTML 块元素
大多数 HTML 元素被定义为块级元素或内联元素。
编者注：“块级元素”译为 block level element，“内联元素”译为 inline element。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：<h1>, <p>, <ul>, <table>
HTML 内联元素
内联元素在显示时通常不会以新行开始。
例子：<b>, <td>, <a>, <img>
HTML <div> 元素
HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
HTML <span> 元素
HTML <span> 元素是内联元素，可用作文本的容器。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

网站布局
大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。
可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。
提示：即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML布局</title>
<style>
#container{
width: 500px;
}
#header{
background-color: #99bbbb;
}
#menu{
background-color: #ffff99;
height: 200px;
width: 100px;
float: left;
}
#content{
background-color: #eeeeee;
height: 200px;
width: 400px;
float: left;
}
#footer{
background-color: #99bbbb;
clear: both;
text-align: center;
}
h1{
margin-bottom: 0;
}
h2{
margin-bottom: 0;
font-size: 14px;
}
ul{
margin: 0;
}
li{
list-style: none;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>这是网页的头部</h1>
</div>
<div id="menu">
<h2>菜单</h2>
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
</div>
<div id="content">这是网页内容部分</div>
<div id="footer">这是网页尾部</div>
</div>
</body>
</html>

HTML表单和输入
HTML 表单用于搜集不同类型的用户输入。
文本域:用户可以在文本域中写入文本。
密码域:写入不是明文显示
表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。
表单使用表单标签（<form>）定义。
<form>
...
  input 元素
...
</form>
单选按钮
当用户从若干给定的的选择中选取其一时，就会用到单选框。
复选框（Checkboxes）
当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。
表单的动作属性（Action）和确认按钮
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
表单标签
标签             描述
<form>       定义供用户输入的表单
<input>          定义输入域
<textarea>    定义文本域 (一个多行的输入控件)
<label>          定义一个控制的标签
<fieldset>    定义域
<legend>    定义域的标题
<select>    定义一个选择列表
<optgroup>    定义选项组
<option>    定义下拉列表中的选项
<button>    定义一个按钮
<isindex>    已废弃。由 <input> 代替。



<form>
名字:
<input type="text" /><br/>
电话:
<input type="text" />
</form>
<br/>

<form>
用户:
<input type="text" name="user" /><br/>
密码:
<input type="password" name="pwd" />
</form>
<br/>

<form>
<input type="radio" name="sex" value="male" />male
<input type="radio" name="sex" value="female" />female
</form>
<br/>

<form>
<input type="checkbox" name="bike" />自行车
<br/>
<input type="checkbox" name="car" />小汽车
</form>

<form name="input" action="html布局.html" method="get">
username:
<input type="text" name="user" />
<input type="submit" value="提交">
</form>

账号		自动登录	找回密码
密码			立即注册

VMware vcenter+vSphere 6.5 U2共享

【跟谁学】韩宇极简英语课-技术人员不得不

用Zabbix通过JMX方式监控weblogic

winhex数据恢复教程（非常巨大，内容丰富）

Symantec Backup Exec 2015 2016/2012 BE20

NetScaler VPX部署之：NetScaler Gateway调

zabbix3.4.1安装部署+微信推送信息+大屏显

[经验分享] 前端之--HTML【基础】

扫码加入运维网微信交流群