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)。

显示结果 描述 描述 实体编号
空格 空格 &nbsp;  
< 小于号 &lt; <
< 大于号 &gt; >
& 和号 &amp; &
" 引号 &quot; "

更多符号请访问: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>

显示效果如下:


参考以下文章:

罗天帅博客

W3School

感谢!

14-前端开发之HTML的更多相关文章

  1. #笔记# 移动前端开发之viewport

    一般移动设备的浏览器都默认设置了一个 viewport ,并初始定义一个虚拟的layout viewport(布局视口),用于解决早期的页面在手机上显示的问题.下面我们来认识几个与 viewport  ...

  2. 移动前端开发之viewport,devicePixelRatio的深入理解

    移动前端开发之viewport的深入理解 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的met ...

  3. Sea.js创始人玉伯的前端开发之路

    在Web应用程序的用户体验越来越被重视的今天,前端开发的地位也上升到了前所未有的高度,而随之而来的也有更多的挑战. 为了将前端开发者繁重的工作变得简单,框架应运而生.国内也不乏一些非常优秀的前端开发框 ...

  4. 【开源专访】Sea.js创始人玉伯的前端开发之路

    摘要:玉伯,淘宝前端类库 KISSY.前端模块化开发框架SeaJS.前端基础类库Arale的创始人.本期[开源专访]我们邀请玉伯来为我们分享一些关于前端框架.前端开发的那些事,以及前端大牛是如何炼成的 ...

  5. 前端开发之JavaScript篇

    一.JavaScript介绍  前端三剑客之JavaScript,简称js,可能是这三个里面最难的一个了.很早以前,市面上流通着三种js版本,为了统一,ECMA(欧洲计算机制造协会)定义了规范的版本, ...

  6. 前端开发之jQuery库

    使用jquery开发的时候,如果我们不想使用自己的jquery文件,那么可以引用现成的地址.方便日常开发使用 jquery-2.0以上版本 (注!不再支持IE 6/7/8) jquery-2.0.0百 ...

  7. 前端开发之jQuery效果篇

    主要内容: 1.显示与隐藏效果 2.滑动效果 3.淡入与淡出效果 4.动画效果 5.弹出广告效果 一.显示与隐藏 显示与隐藏即 show() 和 hide() ,能够控制元素显示或隐藏. 实例: &l ...

  8. 前端开发之javascript BOM篇

    主要内容: 1.BOM输出 2.BOM的对象 3.client的相关属性 4.offset的相关属性 5.scroll的相关属性 前情提要: 何谓BOM? 所谓 BOM 指的就是浏览器对象模型 Bro ...

  9. 前端开发之JavaScript基础篇三

    主要内容: 1.创建对象的几种方式 2.JavaScript内置对象 3.JavaScript错误--Throw.Try 和 Catch 4.JavaScript 表单验证 一.创建对象的几种方式 1 ...

  10. 前端开发之JavaScript基础篇一

    主要内容: 1.JavaScript介绍 2.JavaScript的引入方法和输出及注释 3.javaScript变量和命名规则 4.五种基本数据类型 5.运算符 6.字符串处理 7.数据类型转换   ...

随机推荐

  1. Java Class.cast方法

    1.Java api public T cast(Object obj); Casts an object to the class or interface represented 解释的比较笼统, ...

  2. 巧用CSS实现分隔线

    下面是几种简单实现分隔线的方法,个人比较喜欢第二种,我也给出了最后第五种比较2的写法,请大家拍砖,或者提供其他好的方法. 单个标签实现分隔线: 点此查看实例展示 .demo_line_01{ padd ...

  3. 本周进步要点20161023(含李笑来第二场live笔记要点)

    本周主要忙于去武汉参加iDOF2016智能数字油田会议,会上做了题为“油田SOA及云平台的系统思考与实践”的报告,为了准备这篇报告,用到了一些以前学过的知识,具体内容见“参加iDOF2016会议的收获 ...

  4. tabbarItem字体及图片颜色设置

    tabbarItem设置图片后运行往往与我们原始图片颜色有出入,这是因为在默认情况下,未选中状态图片和字体颜色为灰色,选中状态下图片和字体颜色为蓝色.   UIImage 在呈现(render)时会选 ...

  5. sourceTree忽略文件

    *~.DS_Store*.xcworkspacexcuserdata Podfile.lockPods

  6. Java获取XML节点总结之读取XML文档节点

    dom4j是Java的XML API,用来读写XML文件的.目前有很多场景中使用dom4j来读写xml的.要使用dom4j开发,需要下载导入dom4j相应的jar文件.官网下载:http://www. ...

  7. SQL SERVER中关于OR会导致索引扫描或全表扫描的浅析

    在SQL SERVER的查询语句中使用OR是否会导致不走索引查找(Index Seek)或索引失效(堆表走全表扫描 (Table Scan).聚集索引表走聚集索引扫描(Clustered Index ...

  8. windows系统快捷操作の高级篇

    上次介绍了windows系统上几个比较好用的软件和系统快捷键,虽然有些很方便,但是毕竟还是太少了,而且无法自定义专属于自己的快捷键.所以我写了这么一篇教程,主要介绍两个神器:windows平台上的au ...

  9. SQLServer复制(二)--事务代理作业

    之前的一篇已经介绍了如何配置复制,介绍了发布者.分发者和订阅者以及事务日志运行的简单关系.其中提到了复制代理,我们这篇将详细介绍复制代理,它是什么?在事务复制的步骤中起到了什么作用? 代理和工作 首先 ...

  10. 在Dell R720服务器上安装ESXI5.5时会出现卡在LSI_MR3.V00的解决方法

    接近年底,公司各种活动,各种加班,导致没有太多时间写博客,今抽了点时间将前几天搭建虚拟化服务时所出现的一个问题描述下: 服务器配置:CUP E5-2609     内存32G          硬盘5 ...