14-前端开发之HTML
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 中有三种 <!DOCTYPE> 声明。在 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 rel="shortcut icon" href="image/favicon.ico" />
2.导入CSS
<link rel="stylesheet" href="css/css_model.css" />
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" title="大美女" style="height: 200px;width: 200px;" alt="美女">
</a>
3. a标签之：锚
锚的作用是类似于读书时候的书签，当你你点击这个“锚”=“书签”，的时候就跳转到指定的位置
<body>
<a href="#i1">第1章</a><br>
<a href="#i2">第2章</a><br>
<a href="#i3">第3章</a><br>
<!--在标签里，ID是这个标签的唯一的值，我们在做锚的时候指定他的ID即可-->
<!--<a href="#a2"> 上面的代码href="#要跳转的标签"-->
<div id="i1" style="height: 600px;">我是第1章</div>
<div id="i2" style="height: 600px;">我是第2章</div>
<div id="i3" style="height: 600px;">我是第3章</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>
<!--selected="selected"表示默认选择深圳-->
</select>
显示效果如下：
2. 滚动单选菜单
<select size="3">
<option>香港</option>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
显示效果如下：
3. 滚动多选菜单
还是上面的滚动菜单，加上multiple="multiple"就可以多选了
<select multiple="multiple" size="3">
<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 值不同时，它们可以多选，这特么就不是单选框了。
<!--对于input标签来说只要，radio的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">
<!--这里加一个标识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">
<!--这里action是告诉html提交到那里-->
<!--method是通过什么方法去action指定的地址-->
<!--表单会把所有获取输入的数据存成一个json提交到后台-->
<input type="text" name="user" />
<input type="text" name="email" />
<input type="password" name="pwd" />
<input type="button" value="button1" />
<input type="submit" value="提交"/>
<!--这里按提交才有反映，submit是用来提交当前的表单的，当然可以有多个表单-->
<!--但是，这个submit需要写入表单内，那么提交的时候是提交的当前表单-->
</form>
lable 标签
在不使用label标签的时候，我们在登录界面输入用户名等数据只能点进框体里去，否则就不能输入或选择，这样用户体验不是很好。
使用label标签的时，选择文字就会进入到相应的框体，他类似一个跳转，目前多数网站登录页面都可以这样。
<label for="username">用户名：</label>
<input id="username" type="text" name="user" />
<br />
<label for="pwd">密码：</label>
<input id="pwd" type="text" name="user" />
列表（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>
<!--dt是标签，dd是标签里的内容-->
<dd>石家庄</dd>
<dd>衡水市</dd>
<dt>山东省</dt>
<!--dt是标签，dd是标签里的内容-->
<dd>济南市</dd>
<dd>烟台市</dd>
</dl>
显示效果如下：
表格
1. 基本的九宫格
<table border="1">
<!--border这里是加上边框-->
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<!--一个tr是1行，一个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">
<!--border这里是加上边框-->
<tr>
<td colspan="3">1</td>
<!--这里colspan，就告诉html解析的时候占3个格-->
</tr>
<!--一个tr是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 id="username" type="text" name="user" />
<br />
<label for="pwd">密码：</label>
<input id="pwd" type="text" name="user" />
</fieldset>
显示效果如下：
参考以下文章：
感谢！
14-前端开发之HTML的更多相关文章
- ＃笔记＃ 移动前端开发之viewport
一般移动设备的浏览器都默认设置了一个 viewport ,并初始定义一个虚拟的layout viewport(布局视口),用于解决早期的页面在手机上显示的问题.下面我们来认识几个与 viewport ...
- 移动前端开发之viewport,devicePixelRatio的深入理解
移动前端开发之viewport的深入理解 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的met ...
- Sea.js创始人玉伯的前端开发之路
在Web应用程序的用户体验越来越被重视的今天,前端开发的地位也上升到了前所未有的高度,而随之而来的也有更多的挑战. 为了将前端开发者繁重的工作变得简单,框架应运而生.国内也不乏一些非常优秀的前端开发框 ...
- 【开源专访】Sea.js创始人玉伯的前端开发之路
摘要:玉伯,淘宝前端类库 KISSY.前端模块化开发框架SeaJS.前端基础类库Arale的创始人.本期[开源专访]我们邀请玉伯来为我们分享一些关于前端框架.前端开发的那些事,以及前端大牛是如何炼成的 ...
- 前端开发之JavaScript篇
一.JavaScript介绍 前端三剑客之JavaScript,简称js,可能是这三个里面最难的一个了.很早以前,市面上流通着三种js版本,为了统一,ECMA(欧洲计算机制造协会)定义了规范的版本, ...
- 前端开发之jQuery库
使用jquery开发的时候,如果我们不想使用自己的jquery文件,那么可以引用现成的地址.方便日常开发使用 jquery-2.0以上版本 (注!不再支持IE 6/7/8) jquery-2.0.0百 ...
- 前端开发之jQuery效果篇
主要内容: 1.显示与隐藏效果 2.滑动效果 3.淡入与淡出效果 4.动画效果 5.弹出广告效果 一.显示与隐藏 显示与隐藏即 show() 和 hide() ,能够控制元素显示或隐藏. 实例: &l ...
- 前端开发之javascript BOM篇
主要内容: 1.BOM输出 2.BOM的对象 3.client的相关属性 4.offset的相关属性 5.scroll的相关属性 前情提要: 何谓BOM? 所谓 BOM 指的就是浏览器对象模型 Bro ...
- 前端开发之JavaScript基础篇三
主要内容: 1.创建对象的几种方式 2.JavaScript内置对象 3.JavaScript错误--Throw.Try 和 Catch 4.JavaScript 表单验证 一.创建对象的几种方式 1 ...
- 前端开发之JavaScript基础篇一
主要内容: 1.JavaScript介绍 2.JavaScript的引入方法和输出及注释 3.javaScript变量和命名规则 4.五种基本数据类型 5.运算符 6.字符串处理 7.数据类型转换 ...
随机推荐
- JdbcTemplate进行查询
1.jdbcTemplate.queryForInt() 和 jdbcTemplate.queryForLong() 例如:下面使用queryForInt()方法传回user表中的记录数: jdbcT ...
- 分享20款移动开发中很有用的 jQuery 插件
今天,很显然每个网站都需要有一个移动优化的界面以提高移动用户的使用体验.在开发任何移动项目时,要尽可能保持每一种资源尺寸都尽可能的小,以给最终用户提供一个好的体验是非常重要的.在这篇文章中我们已经编制 ...
- 总结常见的ES6新语法特性
前言 ES6是即将到来的新版本JavaScript语言的标准,他给我们带来了更"甜"的语法糖(一种语法,使得语言更容易理解和更具有可读性,也让我们编写代码更加简单快捷),如箭头函数 ...
- [原][C#][winForm]分级基金折溢价WinForm网络计算器
分级基金折溢价WinForm网络计算器 通过子/母基金代码,从 [ 东方财富网,天天基金网,新浪 ] 抓取分级基金的子母基金数据(代码,名称,净值,价格), 并计算出子基金(A基金,B基金)以及母基金 ...
- iOS 字号转换问题
一,ps和pt转换 px:相对长度单位.像素(Pixel).(PS字体) pt:绝对长度单位.点(Point).(iOS字体) 公式如下: pt=(px/96)*72. 二,字体间转换 1in = 2 ...
- Android:Toast
Toast是Android中用来显示显示信息的一种机制,和Dialog不一样的是,Toast是没有焦点的,而且Toast显示的时间有限,过一定的时间就会自动消失.而且Toast主要用于向用户显示提示消 ...
- [css]我要用css画幅画(七) - 哆啦A梦
接着之前的[css]我要用css画幅画(六),今天画的有所不同,画的是哆啦A梦,我们小时候对他的称呼其实是小叮当机器猫. (PS:这次我要做的事情,很多人已经做过,这并不是什么创新,我只是在学习并记录 ...
- AjaxHelper简介
在Asp.Net MVC中提供了AjaxHelper类: Ajax.ActionLink 创建一个超链接,点击时,使用Ajax提交数据到一个指定的控制器 Ajax.RouteLink 和ActionL ...
- ORACLE定期清理INACTIVE会话
ORACLE数据库会话有ACTIVE.INACTIVE.KILLED. CACHED.SNIPED五种状态.INACTIVE状态的会话表示此会话处于非活动.空闲.等待状态.例如PL/SQL Dev ...
- Linux启动报错missing operating system
用UltraISO制作了一个Red Hat Enterprise Linux Server release 5.7系统的U盘启动盘,然后在一台PC上安装,由于安装过程中在干别的事情,有些选项没有细看. ...