HTML基础
HTML指的是超文本标记语言 (Hyper Text Markup Language)， HTML不是一种编程语言，而是一种标记语言 (markup language) ，HTML使用标记标签来描述网页。
HTML 文档是由 HTML 元素定义的。HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
注释：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。空元素在开始标签中进行关闭（以开始标签的结束而结束），大多数 HTML 元素可拥有属性。
HTML 实例
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。HTML 标签对大小写不敏感：<P> 等同于 <p>。推荐使用小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。
<p> 元素定义了 HTML 文档中的一个段落。<body> 元素定义了 HTML 文档的主体。<html> 元素定义了整个 HTML 文档。
HTML 属性
属性为 HTML 元素提供附加信息，属性总是以名称/值对的形式出现，比如：name="value"。属性总是在 HTML 元素的开始标签中规定。
属性实例：
<a href="http://www.cnblogs.com">This is a link</a>链接的地址在 href 属性中指定
<h1 align="center"> 拥有关于对齐方式的附加信息。
<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。
<table border="1"> 拥有关于表格边框的附加信息
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，
HTML 标准属性：http://www.w3school.com.cn/tags/html_ref_standardattributes.asp
HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。HTML 链接是通过 <a> 标签进行定义的。HTML 图像是通过 <img> 标签进行定义的。HTML 水平线：<hr /> 标签在 HTML 页面中创建水平线。
元素标签
HTML 注释：可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
<!-- This is a comment -->
段落是通过 <p> 标签定义的。HTML 折行，如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签：
<p>This is<br />a para<br />graph with line breaks</p>
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
显示预排<pre>标签，文字标签<font>，加粗<b>，斜体<i>，下划线<u>，下标<sup>，上标<sub>，<strong> 标签和<em> 标签一样，用于强调文本，但它强调的程度更强一些。<big> 标签和其相应的 </big> 标签之间的文字，其字体比周围的文字要大一号。<small>要小一号。
“计算机输出”标签 ：
<code>Computer code</code>
<kbd>Keyboard input</kbd>
<tt>Teletype text</tt>
<samp>Sample text</samp>
<var>Computer variable</var>
缩写和首字母缩写：
<abbr title="etcetera">etc.</abbr>
<acronym title="World Wide Web">WWW</acronym>
如果浏览器支持 bi-directional override (bdo)，会从右向左输出：
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
显示：Here is some Hebrew text
块引用：
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>
<q>
这是短的引用。
</q>
使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
删除字效果和插入字效果：
<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>
<p>大多数浏览器会改写为删除文本和下划线文本。</p>
HTML 样式
使用添加到 <head> 部分的样式信息对 HTML 进行格式化：
<html>
<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>
<body>
<h1>header 1</h1>
<p>A paragraph.</p>
</body>
</html>
没有下划线的链接：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<a href="/example/html/lastpage.html" style="text-decoration:none">
这是一个链接！
</a>
</body>
</html>
链接到一个外部样式表：
<html>
<head>
<link rel="stylesheet" type="text/css" href="/csstest.css" >
</head>
<body>
<h1>我通过外部样式表进行格式化。</h1>
<p>我也一样！</p>
</body>
</html>
有三种方式来插入样式表：外部样式表、内部样式表、内联样式。
HTML 链接
将图像作为链接：
<html>
<body>
<p>
您也可以使用图像来作链接：
<a href="/example/html/lastpage.html">
<img border="0" src="/eg_buttonnext.gif" />
</a>
</p>
</body>
</html>
有两种使用 <a> 标签的方式：
通过使用 href 属性 - 创建指向另一个文档的链接；通过使用 name 属性 - 创建文档内的书签；使用 Target 属性，你可以定义被链接的文档在何处显示。
提示：您可以使用 id 属性来替代 name 属性，命名锚同样有效。假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。
邮件链接：
<a href="mailto:test@126.com">发送邮件</a>
另一个负载的 mailto 链接：
<a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件！</a>
HTML 图像
<img src = "路径" alt = "文字说明" width = "宽" height = "高" border = "边框" align = "对齐方式"/>
背景图片：<body background="/i/eg_background.jpg">
创建图像映射，每个区域都是一个超级链接：
<img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<!-- map -->
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14"
href ="/example/html/venus.html" target ="_blank" alt="Venus" />
<area shape="circle" coords="129,161,10"
href ="/example/html/mercur.html" target ="_blank" alt="Mercury" />
<area shape="rect" coords="0,0,110,260"
href ="/example/html/sun.html" target ="_blank" alt="Sun" />
</map>
把一幅普通的图像设置为图像映射：
<img src="/i/eg_planets.jpg" ismap />
请把鼠标移动到图像上，看一下状态栏的坐标如何变化。
HTML 表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border = "" height = "" width = "" align = "" cellpading = "" frame = "" >
<caption>我的标题</caption>
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
</table>
cellpading表示单元格内容与其边框之间的空白；cellspacing表示单元格之间的距离；使用 "frame" 属性来控制围绕表格的边框；表格的表头使用 <th> 标签进行定义。属性：colspan 跨列；rowspan 跨行。
HTML 列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
<ul type = "">
<li>Coffee</li>
<li>Milk</li>
</ul>
有序列表也是一列项目，列表项目使用数字进行标记。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
HTML <div> 和 <span>
可以通过 <div> 和 <span> 将 HTML 元素组合起来。大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）。例子：<h1>，<p>，<ul>，<table>；内联元素在显示时通常不会以新行开始。例子：<b>，<td>，<a>，<img>。
HTML <div> 元素
HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。<div> 元素的另一个常见的用途是文档布局。
HTML <span> 元素
HTML <span> 元素是内联元素，可用作文本的容器。<span> 元素也没有特定的含义。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
HTML 布局
使用 <div> 元素的网页布局:
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="gb2312"/>
<style type="text/css">
div#container{width:500px}
div#header {background-color:#99bbbb;}
div#menu {background-color:#ffff99;height:200px;width:150px;float:left;}
div#content {background-color:#EEEEEE;height:200px;width:350px;float:left;}
div#footer {background-color:#99bbbb;clear:both;text-align:center;}
h1 {margin-bottom:0;}
h2 {margin-bottom:0;font-size:18px;}
ul {margin:0;}
li {list-style:none;}
</style>
</head> <body>
<div id="container">
<div id="header">
<h1>Main Title of Web Page</h1>
</div>
<div id="menu">
<h2>Menu</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<div id="content">Content goes here</div>
<div id="footer">Copyright W3School.com.cn</div>
</div>
</body>
</html>
HTML 表单和输入
<form>
用户：
<input type="text" name="user">
<br />
密码：
<input type="password" name="password">
</form>
表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。输入:多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
文本域（Text Fields）当用户要在表单中键入字母、数字等内容时，就会用到文本域。<input type="text" name="name" />
单选按钮（Radio Buttons）当用户从若干给定的的选择中选取其一时，就会用到单选框。<input type="radio" name="sex" value="male" />
复选框（Checkboxes）当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。<input type="checkbox" name="bike" />
表单的动作属性（Action）和确认按钮：
<!-- text.htm -->
<html>
<body>
<form action ="post.php" method ="post">
Name: <input type="text" name="username" />
<input type ="submit" value="ok" />
</form>
</body>
</html>
<!-- post.php -->
<html>
<body>
You are <?php echo $_POST["username"]?>.
</body>
</html>
简单的下拉列表:
<form>
<select name="cars">
<option value="volvo" selected="selected">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
创建按钮:
<form>
<input type="button" value="Hello world!">
</form>
在数据周围绘制一个带标题的框:
<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
</form>
HTML的特殊符号
  空格; < <; & & ; > > ; &quat ";
HTML 框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
使用框架的坏处：开发人员必须同时跟踪更多的HTML文档;很难打印整张页面。
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
为不支持框架的浏览器添加 <noframes> 标签。重要提示：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。
<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>
</frameset>
HTML 内联框架：
<iframe src="/eg_landscape.jpg" width="200" height="200" frameborder="0"></iframe>
使用 iframe 作为链接的目标：
<iframe src="pic/blue02.jpg" name="iframe_a"></iframe>
<p><a href="http://www.cnblogs.com/houkai/" target="iframe_a">侯凯</a></p>
HTML基础的更多相关文章
- java基础集合经典训练题
第一题:要求产生10个随机的字符串,每一个字符串互相不重复,每一个字符串中组成的字符(a-zA-Z0-9)也不相同,每个字符串长度为10; 分析:*1.看到这个题目,或许你脑海中会想到很多方法,比如判 ...
- node-webkit 环境搭建与基础demo
首先去github上面下载(地址),具体更具自己的系统,我的是windows,这里只给出windows的做法 下载windows x64版本 下载之后解压,得到以下东西 为了方便,我们直接在这个目录中 ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- Golang， 以17个简短代码片段，切底弄懂 channel 基础
(原创出处为本博客:http://www.cnblogs.com/linguanh/) 前序: 因为打算自己搞个基于Golang的IM服务器,所以复习了下之前一直没怎么使用的协程.管道等高并发编程知识 ...
- [C#] C# 基础回顾 - 匿名方法
C# 基础回顾 - 匿名方法 目录 简介 匿名方法的参数使用范围 委托示例 简介 在 C# 2.0 之前的版本中,我们创建委托的唯一形式 -- 命名方法. 而 C# 2.0 -- 引进了匿名方法,在 ...
- HTTPS 互联网世界的安全基础
近一年公司在努力推进全站的 HTTPS 化,作为负责应用系统的我们,在配合这个趋势的过程中,顺便也就想去搞清楚 HTTP 后面的这个 S 到底是个什么含义?有什么作用?带来了哪些影响?毕竟以前也就只是 ...
- Swift与C#的基础语法比较
背景: 这两天不小心看了一下Swift的基础语法,感觉既然看了,还是写一下笔记,留个痕迹~ 总体而言,感觉Swift是一种前后端多种语言混合的产物~~~ 做为一名.NET阵营人士,少少多多总喜欢通过对 ...
- .NetCore MVC中的路由（1）路由配置基础
.NetCore MVC中的路由(1)路由配置基础 0x00 路由在MVC中起到的作用 前段时间一直忙于别的事情,终于搞定了继续学习.NetCore.这次学习的主题是MVC中的路由.路由是所有MVC框 ...
- .NET基础拾遗（5）多线程开发基础
Index : (1)类型语法.内存管理和垃圾回收基础 (2)面向对象的实现和异常的处理基础 (3)字符串.集合与流 (4)委托.事件.反射与特性 (5)多线程开发基础 (6)ADO.NET与数据库开 ...
- .NET 基础 一步步 一幕幕[面向对象之方法、方法的重载、方法的重写、方法的递归]
方法.方法的重载.方法的重写.方法的递归 方法: 将一堆代码进行重用的一种机制. 语法: [访问修饰符] 返回类型 <方法名>(参数列表){ 方法主体: } 返回值类型:如果不需要写返回值 ...
随机推荐
- Jenkins 安装的HTML Publisher Plugin 插件无法展示ant生成的JunitReport报告
最近在做基于jenkins ant junit 的测试持续集成,单独ant junit生成的junitreport报告打开正常,使用Jenkins的HTML Publisher Plugin 插件无 ...
- Angular2入门系列教程1-使用Angular-cli搭建Angular2开发环境
一直在学Angular2,百忙之中抽点时间来写个简单的教程. 2016年是前端飞速发展的一年,前端越来越形成了(web component)组件化的编程模式:以前Jquery通吃一切的田园时代一去不复 ...
- 用scikit-learn进行LDA降维
在线性判别分析LDA原理总结中,我们对LDA降维的原理做了总结,这里我们就对scikit-learn中LDA的降维使用做一个总结. 1. 对scikit-learn中LDA类概述 在scikit-le ...
- C++内存对齐总结
大家都知道,C++空类的内存大小为1字节,为了保证其对象拥有彼此独立的内存地址.非空类的大小与类中非静态成员变量和虚函数表的多少有关. 而值得注意的是,类中非静态成员变量的大小与编译器内存对齐的设置有 ...
- NoSql数据库使用半年后在设计上面的一些心得
NoSql数据库这个概念听闻许久了,也陆续看到很多公司和产品都在使用,优缺点似乎都被分析的清清楚楚.但我心里一直存有一个疑惑,它的出现究竟是为了解决什么问题? 这个疑惑非常大,为此我看了很多分析文章, ...
- JavaScript function函数种类
本篇主要介绍普通函数.匿名函数.闭包函数 目录 1. 普通函数:介绍普通函数的特性:同名覆盖.arguments对象.默认返回值等. 2. 匿名函数:介绍匿名函数的特性:变量匿名函数.无名称匿名函数. ...
- 《Django By Example》第一章 中文 翻译 （个人学习，渣翻）
书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:本人目前在杭州某家互联网公司工作, ...
- 微信网页开发之获取用户unionID的两种方法--基于微信的多点登录用户识别
假设网站A有以下功能需求:1,pc端微信扫码登录:2,微信浏览器中的静默登录功能需求,这两种需求就需要用到用户的unionID,这样才能在多个登录点(终端)识别用户.那么这两种需求下用户的unionI ...
- EntityFramework的多种记录日志方式,记录错误并分析执行时间过长原因(系列4)
前言 Entity Framework 延伸系列目录 今天我们来聊聊EF的日志记录. 一个好的数据库操作记录不仅仅可以帮你记录用户的操作, 更应该可以帮助你获得效率低下的语句来帮你提高运行效率 废话不 ...
- MSYS2环境下编译X265
HEVC(High Efficiency Video Coding),是一种新的视频压缩标准.可以替代H.264/ AVC编码,使得保持相同质量的情况下,体积减少40%左右.目前有多种实现版本,x26 ...