发现以前欠下的web知识太多鸟,只有重头开始好好学吧,恶补第一站就是html知识啦!

html指的是超文本标记语言,它不是编程语言,而是一种标记语言;标记语言是一套标记标签(markup tag),html使用标记标签来描述网页.

html标记标签称为html标签(html tag);html tag是由<>包围的关键词,其是成对出现的,比如<b>和</b>,分别称为开始(开放)标签和结束(闭合)标签.

html文档 == 网页;html文档描述网页,其包含html标签和纯文本,html文档也称为网页;web浏览器作用是读取html文档,以网页形式显示.浏览器不会显示html标签,而用标签来解释页面的内容.

<html></html> 之间的文本描述网页

<body></body>之间文本是可见的页面内容

<h1></h1>之间的文本被显示为标题

<p></p>之间的文本被显示为段落

<a></a>之间文本定义链接 : <a href="xxx">this is a link</a>

<img></img>之间文本定义图像: <img src="x.jpg" width="110" height="110" />,图像的名称和尺寸是以属性形式提供的.

html文档是由html元素定义的.html元素指的是从开始标签到结束标签的所有代码.元素内容是开始标签与结束标签之间的内容;某些html元素具有空内容(empty content),空元素在开始标签中进行关闭:<br/>,大多数html元素可拥有属性;大多数html元素可以嵌套.

html标签对大小写不敏感;W3C在html4中推荐使用小写,而在未来(X)html版本中强制使用小写.

html标签可以拥有属性;属性以名称/值对的形式出现:name="hopy";属性总是在html元素的开始标签中规定:

<h1 align="center">xxx</h1> , <body bgcolor="yellow"></body>,<table border="1"></table>

属性值应该始终被包括在引号内,单双引号皆可.若属性值本身含有双引号,则必须使用单引号.

网页中标题是通过<h1> - <h6>等标签定义的,<h1>定义最大的标题,<h6>定义最小的标题;默认情况下,html会自动在块级元素前后添加一个额外的空行,比如段落,标题元素前后;搜索引擎使用标题为网页的结构和内容编制索引.

<hr />标签在html页面中创建水平线.

可将注释插入html代码中,浏览器会忽略注释: <!-- comment -->

<br />表示插入一个空行.

对于html,无法通过在html代码中添加额外的空格或换行来改变输出效果:当页面显示时,浏览器会移除源代码中多余的空格和空行,所有连续的空格或空行对会被当做一个空格来显示.段落的行数依赖于浏览器窗口的大小,若改变窗口的大小,将改变段落中的行数.

<b>定义粗体文本

<big>定义大号字

<em>定义着重文字

<i>定义斜体字

<small>定义小号字

<strong>定义加重语气

<sub>定义下标字

<sup>定义上标字

<ins>定义插入字

<del>定义删除字

<pre>定义预格式文本,它保留了空格和换行.

<bdo>控制文字显示的方向

<q></q>短引用

<blockquote></blockquote>长引用

通过使用html4.0,所有的格式化代码均可移出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>

当浏览器读到一个样式表,就会按照该样式表来对文档进行格式化,有三种方式插入样式表:

1:外部样式表.当样式需要被很多页面应用时,通常采用外部样式表;通过外部样式表可以更改一个文件来改变整个站点的外观.

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

2:内部样式表.单个网页需要特别样式时,可以使用内部样式表:

<head>

<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

3:内联样式.当特殊的样式需要应用到个别元素时,可以使用内联样式.方法是在相关的标签中使用样式属性.样式属性可以包含任何css属性:

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

<style>定义样式定义

<link>定义资源引用

<div>定义文档中的节或区域(块级)

<span>定义文档中的行内小块或区域

<font>定义文本的字体,字体大小,字体颜色(不赞成使用,请使用样式)

<center>对文本进行水平居中(不赞成使用,请使用样式)

html使用超链接与网络上另一个网页相连.超链接可以是字符也可以是一幅图像,点击这些内容跳转到新的文档或当前文档中的某个部分.通过<a>标签在html中创建链接,有2种方式:

1.通过href属性,创建指向另一个文档的链接

2通过name属性,创建文档内的书签

使用target属性,可以定义被链接的文档在何处显示.下面一行代码在新窗口打开链接,如果用_top则表示跳出框架:

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

name属性规定锚(anchor)的名称.可以使用name属性创建html页面中的书签.书签对读者是不可见的.命名锚的语法:

<a name="tips">基本的注意事项 - 有用的提示</a>

锚的名字任意,可以使用id属性代替name属性,效果相同.

跳转到当前页面中的命名锚

<a href="#tips">有用的提示</a>

跳转到其他页面中的命名锚

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

请始终将正斜杠添加到子文件加后面,如果这样写链接:href=http://www.csdn.net/doing,就会想服务器产生2次http请求,这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求.

假如浏览器找不到已定义的命名锚,则会定位到文档顶端而不会有错误发生.

还可以创建一个邮件链接:

<html>

<body>

<p>
这是邮件链接：
<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
</p>

<p>
<b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
</p>

</body>
</html>

使用html可以在文档中插入图像:

<p>
来自另一个文件夹的图像：
<img src="/i/ct_netscape.jpg" />
</p>

<p>
来自 W3School.com.cn 的图像：
<img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" />
</p>

图像由<img>定义,该tag是空标签. <img src="url" />;alt属性用来为图像定义一个可替换的文本,当无法载入图像时,浏览器将显示该替换文本:

<img src="boat.gif" alt="Big Boat">

如果某个网页包含10个图像,则显示该网页需要加载11个文件.

<map>定义图像地图

<area>定义图像地图中的可点击区域

每个表格由<table>开始，表格每行由<tr>开始,每个表格项由<td>开始。td指table data，内容可以包括文本，图片，列表，段落，表单，水平线，表格等。使用边框属性来显示表格边框:<table border="1">;表格头使用<th>标签定义。为了避免空td的边框不显示，可以在空td中添加一个空格占位符:&nbsp;

<caption>定义表格标题

<thead>定义表格页眉

<tbody>定义表格主体

<tfoot>定义表格页脚

<col>定义用于表格列的属性

<colgroup>定义表格列的组

无序列表是一个项目的列表，使用粗体圆点进行标记；无序列表始于<ul>标签,每个列表项始于<li>

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

有序列表和无序列表类似，不过使用数字进行标记；有序列表始于<ol>标签，么个列表项始于<li>

自定义列表以<dl>开始，每个自定义列表项以<dt>开始，每个自定义列表项的定义以<dd>开始。

可以通过<div>和<span>将html元素组合起来。html块元素(block level element)通常会以新行开始和结束；html内联元素（inline element）通常不会以新行开始。<div>是块级元素，可作为组合其他html元素的容器。若与css一同使用，可以对大的内容块设置样式属性。<div>的另一个常见的用途是文档布局，它取代了使用表格定义布局的老式方法。<span>元素是内联元素，可作为文本容器，当与css一同使用时，可为部分文本设置样式属性。

表单是一个包含表单元素的区域，表单元素允许用户在表单中(文本域，复选框等等)输入信息的元素。表单使用表单标签<form>定义。

文本域 <input type="text" ...>

单选按钮 <input type="radio" ...>

复选框 <input type="checkbox" ...>

当单击确认按钮时，表单内容会被传送到另一个文件；表单动作属性定义了目的文件的名称，由动作属性定义处理方法。

<textarea>定义文本域

<label>定义控制标签

<fieldset>定义域

<legend>定义域的标题

<select>定义一个选择列表

<optgroup>定义选项组

<option>定义下拉列表中的选项

<button>定义按钮

使用框架你可以在同一个浏览器窗口中显示不止一个页面。每个html文档称为一个框架，且每个框架都独立于其他框架。使用框架的坏处：

1.开发人员必须同时跟踪更多html文档

2.很难打印整张页面

框架结构标签<frameset>定义如何将窗口分割为框架，每个frameset定义了一系列行或列。frame标签定义了放置在每个框架中的html文档。用户可以拖动框架边框来改变其大小，可以在<frame>加入noresize="noresize"固定框架大小。还可以为不支持框架的浏览器添加<noframes>标签。

恶补web之一:html学习(1)的更多相关文章

  1. 恶补web之三:http学习

    http是超文本传输协议的简称,该协议设计目的是保证客户机与服务器之间的通信.http的工作方式为客户机与服务器之间的请求-应答协议. 一般来说web浏览器是客户端,计算机上的网络应用程序可能作为服务 ...

  2. 恶补web之一:html学习(2)

    iframe用于在网页内显示网页:<iframe src="URL"></iframe>,iframe可用作链接的目标: <!DOCTYPE html ...

  3. 恶补web之五:dhtml学习

    dhtml是一种使html页面具有动态特性的艺术.对于多数人来说dhtml意味着html(html DOM),样式表和javascript的组合. dhtml不是w3c标准.dhtml指动态html, ...

  4. 恶补web之四:xhtml学习

    xhtml是更严格更纯净的html代码,它与html4.01兼容.xhtml是以xml重构额html4.01 xhtml与2000年1月26日成为w3c标准,w3c将xhtml定义为最新的html版本 ...

  5. 恶补web之八:jQuery(3)

    jquery和其他js框架.jQuery使用$作为jQuery的简写,但是还有很多js框架,比如: MooTools,Backbone,Sammy,Cappuccino,Knockout,JavaSc ...

  6. 恶补web之六:javascript知识(2)

    若要向html添加新元素,必须首先创建该元素,然后向一个已存在的元素追加该元素 <div id="div1"> <p id="p1">这 ...

  7. 恶补web之八:jQuery(2)

    jquery中非常重要的部分,就是操作dom的能力: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括html标记) val() - 设置或返回表单字段 ...

  8. 恶补web之八:jQuery(1)

    jquery是一个js库,极大的简化了js编程.jquery是一个写的更少,但做的更多的轻量级js库. jquery位于一个js文件中,其中包含了所有jquery函数,可以用如下标记把jquery添加 ...

  9. 恶补web之二:css知识(3)

    css有3种定位机制:普通流,浮动和绝对定位. 除非专门指定,否则所有框都在普通流中定位,即普通流中的元素位置由元素在(x)html中的位置决定. 通过使用position属性,可以选择4种不同类型的 ...

随机推荐

  1. JAVA之旅（三十四）——自定义服务端，URLConnection，正则表达式特点，匹配，切割，替换，获取，网页爬虫

    JAVA之旅(三十四)--自定义服务端,URLConnection,正则表达式特点,匹配,切割,替换,获取,网页爬虫 我们接着来说网络编程,TCP 一.自定义服务端 我们直接写一个服务端,让本机去连接 ...

  2. Android缩放动画

    Android缩放动画 核心方法 public void startAnimation(Animation animation) 执行动画,参数可以是各种动画的对象,Animation的多态,也可以是 ...

  3. Cocos2D结合CoreGraphics实现RPG人物中空黑洞吸入效果

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 之前的博文中我们实现了RPG人物的复古效果. 现在我们再完点h ...

  4. 08 BaseAdapter 和ListView总结

    第八天 ListView 列表视图 一,特点: >垂直滚动列表,是ViewGroup(容器),列表项使用Adapter填充 二,属性 > android:divider="@dr ...

  5. Ubuntu 15.10下Qt5的安装实战

    写照篇博客的目的就是因为最近要使用Qt,但是由于本人的系统是Ubuntu的,而网上大部分的讲解全是基于Windows的,所以就花费一些时间总结了一下我的安装过程,当然也是也为了能帮助到更多的博友. 第 ...

  6. WebLogic11g-负载分发

    负载均衡的实现方式有很多种,这里只介绍三种相对来说成本较低的方案(维护成本以及费用成本)weblogic自带的proxy.apache.nginx  1.weblogic自带的proxy方式:  1) ...

  7. 通过Canvas及File API缩放并上传图片

    原文地址:Resize an Image Using Canvas, Drag and Drop and the File API 示例地址:Canvas Resize Demo 原文作者:Dr. T ...

  8. 最简单的基于FFMPEG+SDL的音频播放器 ver2 （采用SDL2.0）

    ===================================================== 最简单的基于FFmpeg的音频播放器系列文章列表: <最简单的基于FFMPEG+SDL ...

  9. UNIX环境高级编程——I/O多路转接（select、pselect和poll）

    I/O多路转接:先构造一张有关描述符的列表,然后调用一个函数,直到这些描述符中的一个已准备好进行I/O时,该函数才返回.在返回时,它告诉进程哪些描述符已准备好可以进行I/O. poll.pselect ...

  10. RabbitMQ消息队列的小伙伴: ProtoBuf（Google Protocol Buffer）

    什么是ProtoBuf? 一种轻便高效的结构化数据存储格式,可以用于结构化数据串行化,或者说序列化.它很适合做数据存储或 RPC 数据交换格式.可用于通讯协议.数据存储等领域的语言无关.平台无关.可扩 ...