14-前端开发之HTML

冰恋 · 发表于 2017-6-22 08:37:47

1. 什么是HTML？

HTML (Hyper Text Mark-up Language) 即超文本标记语言，是用来描述网页的一种语言。
它不是一种编程语言，而是一种标记语言 (markup language)
Web 浏览器通过读取 HTML 文档，并以网页的形式显示出它们。

　　一个网页一般由 HTML 和 CSS 两部分组成：

HTML负责描述网页的结构和内容（如标题，导航栏等）
CSS则负责网页的表现（外观，如：背景颜色，字体样式等）。

　　标签主要分为2类：

自闭合标签，如：<meta charset="UTF-8">
主动闭合标签，如：<title>标题</title>

2. HTML文档
<!DOCTYPE html>　　
<html lang="en">
　　
<head>
　　<meta charset="UTF-8">
　　<title>Title</title>
　　
</head>
　　
<body>
　　

　　
</body>
　　
</html>
　　我们先简单解释一下上面的代码：

<html></html>是说明这个是一个网页，告诉浏览器这个网页的开始和结束，他包含了之后的 head 和 body 两个元素。
<head>和</head>之间的内容，是元信息和网站的标题，元信息一般是不显示出来的，但是记录了你这个 HTML 文件的很多有用的信息。
<body>和</body>之间的内容，是浏览器呈现出来的，用户看到的页面效果。也就是说这里是网页的主体。

2.1 DOCTYPE
　　HTML语言需要一个标准，当我们在第一行指定了<!DOCTYPE html>的时候，当浏览器去访问我们的代码的时候就就按照 HTML 代码里指定的标准去读取和渲染给我们展现的页面。

定义和用法

声明必须是 HTML 文档的第一行，位于标签之前。
声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

　　在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
　　HTML5 不基于 SGML，所以不需要引用 DTD。
　　在 HTML 4.01 中有三种声明。在 HTML5 中只有一种：
<!DOCTYPE html>　　更多关于 DOCTYPE 的说明请点击这里了解。

2.2 Head（头部）

Meta(metadata information)
　　提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词。

1.页面编码（告诉浏览器是什么编码）
<meta charset="UTF-8" />
2.刷新和跳转
　　每30秒刷新一次：
<meta http-equiv="Refresh" Content="30" />　　5秒后自动跳转到京东首页开始买买买：
<meta http-equiv="Refresh" Content="5; Url=http://www.jd.com" />
3.关键字
　　关键字的作用：一般是让爬虫之类的收录程序，当他们在爬你的网站的时候，如果你有关键字，那么他们会优先把关键字收录到他们的记录中，比如百度：如果他们收录之后，别人搜索你的关键字的时候，就能找到你的网站啦。
<meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,京东" />
4.描述
　　看看京东商城的描述：
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
5.X-UA-Compatible
　　X-UA-Compatible 这个是IE8特有的，知道即可，因为做前端的同学都很害怕IE因为他们问题比较多各个版本问题很诡异，当IE8的时候微软想把各个版本的统一，那么这个参数就出现了，他为了向下兼容，如下的代码如果使用IE8的时候他会以IE7的模式运行。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Title（标题）
　　标题会显示在浏览器的标签页上，如下图：

<title>京东(JD.COM)-综合网购首选</title>
Link

1.网页头部的图标
<link>
2.导入CSS
<link>
Style

1.在当前文件中写 CSS 样式
　　例如：
<style type="text/css">　　
.bb{
　　background-color: red;
　　}
　　
</style>

2.使用上述的Link标签导入CSS

Script

1.在当前文件中写 JS
<script type="text/javascript"> ... </script>
2.导入 JS
<script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script>
2.3 body（主体）

常用标签
　　body里面分为两类标签：

块级标签：占用整行大小。

　　主要有：div（白板）、H系列（标题）、p标签（段落）

内联标签，占用实际使用的大小。

　　主要有：span（白板）

标签之间可以嵌套使用，标签存在的意义：css操作，js操作。

各种符号
　　在 HTML 中，某些字符是预留的，不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
　　如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。

显示结果
描述
描述
实体编号
空格
空格
 
 
<
小于号
<
<
<
大于号
>
>
&
和号
&
&
"
引号
"
"　　更多符号请访问：HTML 实体符号参考手册

p 和 br

1. p标签：段落标签，每一对p标签为一段,默认段落之间是有间隔的
<p>段落内容1</p>　　
<p>段落内容2</p>

2. br标签：换行标签，有一个<br/>为一个换行
我爱北京天安门<br/>天安门上太阳升
a 标签
　　<a></a>标签的作用主要是：跳转和锚

1. 点击文字跳转到链接
　　下面的代码点击“买买买”将会在当前页面打开京东首页
<a href="http://www.jd.com/">买买买</a>　　如果想用一个新的标签打开链接地址，可以这样实现：
<a target="_blank" href="http://www.jd.com/">买买买</a>
2. 点击图片跳转到链接
<a href="http://www.jd.com/">
　　<img src="image/1.jpg">　　
</a>

3. a标签之：锚
　　锚的作用是类似于读书时候的书签，当你你点击这个“锚”=“书签”，的时候就跳转到指定的位置
<body>　　<a href="#i1">第1章</a><br>
　　<a href="#i2">第2章</a><br>
　　<a href="#i3">第3章</a><br>
　　
　　

　　<div>　　<div>　　<div>　　
</body>

H 标签
　　即标题标签，1级标题到6级标签将按照从大到小排列，代码如下:
<body>　　<h1>H1</h1>
　　<h2>H2</h2>
　　<h3>H3</h3>
　　<h4>H4</h4>
　　<h5>H5</h5>
　　<h6>H6</h6>
　　
</body>
　　显示效果如下：

select 标签

1. 下拉单选菜单
<select>　　<option value="1">北京</option>
　　<option value="2">上海</option>
　　<option value="3" selected="selected">深圳</option>
　　
　　
</select>
　　显示效果如下：

2. 滚动单选菜单
<select><option>香港</option>
　　<option>北京</option>
　　<option>上海</option>
　　<option>深圳</option>
　　
</select>
　　显示效果如下：

3. 滚动多选菜单
　　还是上面的滚动菜单，加上multiple="multiple"就可以多选了
<select multiple="multiple"><option>香港</option>
　　<option>北京</option>
　　<option>上海</option>
　　<option>深圳</option>
　　
</select>
　　显示效果如下：

4. 菜单分组
<select>　　<optgroup label="中国">
　　<option>北京</option>
　　<option>上海</option>
　　</optgroup>
　　<optgroup label="美国">
　　<option>纽约</option>
　　<option>洛杉矶</option>
　　</optgroup>
　　
</select>
　　显示效果如下：

input 系列标签

1. 单选框（radio）
　　radio 标签只有当 name 值相同时它们才会互斥，才是真正的单选框；
　　当你不写 name 值或是 name 值不同时，它们可以多选，这特么就不是单选框了。
　　
<p>请选择性别：</p>
　　
男：<input type="radio" name="gender" value="1" />
　　
女：<input type="radio" name="gender" value="2" />
　　
妖：<input type="radio" name="gender" value="3" />
　　显示效果如下：

2. 复选框（checkbox）
<p>请选择体育爱好：</p>　　
篮球：<input type="checkbox" name="favor" value="1">
　　
足球：<input type="checkbox" name="favor" value="1">
　　
乒乓球：<input type="checkbox" name="favor" value="1" checked="checked">
　　
羽毛球：<input type="checkbox" name="favor" value="1" checked="checked">
　　

　　显示效果如下：

3. 输入框（text & password）
　　
<input type="text"/>
　　

　　
<input type="password"/>
　　显示效果如下：

4. 提交按钮（button & submit）
　　
<input type="button" value="提交"/>
　　

　　
<input type="submit" value="提交"/>
　　

　　
<input type="reset" value="重置" />
　　显示效果如下：

5. 提交文件（file）
<input type="file" name="fname"/>　　显示效果如下：

6. 多行文本框（textarea）
<textarea style="height: 100px;width: 100px;"></textarea>　　显示效果如下：

form 表单
　　HTML 表单用于搜集不同类型的用户输入。

表单是一个包含表单元素的区域。
表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。
表单使用表单标签<form>定义。

<form action="http://localhost:8888/index" method="get">　　
　　
　　
　　<input type="text" name="user" />
　　<input type="text" name="email" />
　　<input type="password" name="pwd" />
　　<input type="button" value="button1" />
　　<input type="submit" value="提交"/>
　　
　　
　　
</form>

lable 标签
　　在不使用label标签的时候，我们在登录界面输入用户名等数据只能点进框体里去，否则就不能输入或选择，这样用户体验不是很好。
　　使用label标签的时，选择文字就会进入到相应的框体，他类似一个跳转，目前多数网站登录页面都可以这样。
<label for="username">用户名：</label>
　　
<input>　　
<br />
　　
<label for="pwd">密码：</label>

　　
<input>
列表（ul/ol/dl）

1. ul 无序列表
<ul>　　<li>line1</li>
　　<li>line2</li>
　　<li>line3</li>
　　
</ul>
　　显示效果如下：

2. ol 顺序列表
<ol>　　<li>line1</li>
　　<li>line2</li>
　　<li>line3</li>
　　
</ol>
　　显示效果如下：

3. dl 分组列表
<dl>　　<dt>河北省</dt>
　　
　　<dd>石家庄</dd>
　　<dd>衡水市</dd>
　　<dt>山东省</dt>
　　
　　<dd>济南市</dd>
　　<dd>烟台市</dd>
　　
</dl>
　　显示效果如下：

表格

1. 基本的九宫格
　　

<table border="1">　　
　　<tr>
　　<td>1</td>
　　<td>2</td>
　　<td>3</td>
　　</tr>
　　
　　
　　<tr>
　　<td>1</td>
　　<td>2</td>
　　<td>3</td>
　　</tr>
　　<tr>
　　<td>1</td>
　　<td>2</td>
　　<td>3</td>
　　</tr>
　　
</table>
　　

　　显示效果如下：

2. 合并单元格
<table border="1">　　
　　<tr>
　　<td colspan="3">1</td>
　　
　　</tr>
　　
　　
　　<tr>
　　<td rowspan="2">1</td>
　　<td>2</td>
　　<td>3</td>
　　</tr>
　　<tr>
　　<td>2</td>
　　<td>3</td>
　　</tr>
　　
</table>
　　显示效果如下：

以上的表格标签其实还不是很标准，正常标准的标签如下：
<table border="1">　　<thead>
　　
　　<tr>
　　<th>表1</th>
　　<th>表2</th>
　　<th>表3</th>
　　</tr>
　　</thead>
　　<tbody>
　　<tr>
　　<td>1</td>
　　<td>2</td>
　　<td>3</td>
　　</tr>
　　<tr>
　　<td>1</td>
　　<td>2</td>
　　<td>3</td>
　　</tr>
　　<tr>
　　<td>1</td>
　　<td>2</td>
　　<td>3</td>
　　</tr>
　　</tbody>
　　
</table>
　　显示效果如下：

fieldset 标签
<fieldset>　　<legend>登录</legend>
　　<label for="username">用户名：</label>

　　<input>　　<br />
　　<label for="pwd">密码：</label>

　　<input>　　
</fieldset>
　　显示效果如下：

　　参考以下文章：
　　罗天帅博客
　　W3School
　　感谢！

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

VMware vcenter+vSphere 6.5 U2共享

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

用Zabbix通过JMX方式监控weblogic

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

Symantec Backup Exec 2015 2016/2012 BE20

NetScaler VPX部署之：NetScaler Gateway调

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

[经验分享] 14-前端开发之HTML

浏览过的版块

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