目录
前言:
系统的总结了一下HTML+CSS+JS知识,本篇博客为HTML和XHTML,其中的具体方法和属性可以去w3cshool查看。
直通车:
硬核归纳HTML+CSS+JS系列之CSS部分(W3C标准)
硬核归纳HTML+CSS+JS系列之JavaScript部分(W3C标准)
一、了解最基本的格式和注释,之后往后扩展
一般的格式都是这样的:
<!DOCTYPE html>
<html>
<head>
<!--我们设置为中文,因为可能有些浏览器默认GBK-->
<meta charset="UTF-8">
<title>
页面标题</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
用DOCTYPE html开头规范浏览器解析,然后是成对出现的head,body,title和其它标签。注释格式是这样的<!-- -->
二、标签
标签是用来标记HTML元素的,简单来说,看到的<>括号例如<b>就是标签,它们一般成对出现。而元素就是<b>好啊</b>
这样的,始于标签,结束语标签。
为了之后更好的学习和代码规范,我们都用小写。
1、标题
首先我们使用的就是<h1></h1>
这些作为标题,数字就代表几级标题(1~6)。
2、段落
段落使用<p></p>
标签定义
3、换行符
换行符在常用不过了,这里我们就使用<br>
,这个是一个空白标签,按理说没有关闭标签,但是为了规范,我们对于空白标签使用<br/>
来关闭。
如果你有markdown的经验,你会发现HTML会裁掉文本中所有的空格,任何数量的空格都会被按一个空格计数。所以不要不要通过添加空格和空行来在编辑器中格式化文本。
4、水平线
写博客的时候也经常用到水平线来分隔文章的小节,<hr><hr/>
也是一个空白标签。
三、属性
我们经常用到上面的标签,对于word也是这样,但是很少用到里面的属性,这里我们就来熟悉属性。
HTML标签拥有属性,属性为HTML提供附加信息,以键值对的(名称/值)的形式出现,这个很好理解的,例如name = "value",并且它总是在HTML元素的开始标签中规定。我们一般都用双引号,如果属性值含有双引号,那么必须使用单引号。
1、居中排列标题
那么我们直接在开始标签这里使用,例如<h1 align="center">
2、背景颜色
使用<body bgcolor="yellow">
。
四、文本格式化
上面简单的提及了标签和属性,如果仅仅是这个是不足够支持我们编写一个合格的文本的。所以我们这里列出各种标签,用到的时候可以提取。
标签 | 描述 |
---|---|
<b> |
定义粗字文本 |
<big> |
定义大字号 |
<em> |
定义着重字 |
<small> |
定义小字号 |
<sub> |
定义下标字 |
<sup> |
定义上标字 |
<strong> |
定义加重语气 |
<ins> |
定义插入字 |
<del> |
定义删除字 |
当然,上面的标签其实已经够用了,只是有些时候我们可能使用到计算输出或者引用术语定义,所以接下来给出定义
<code> |
定义代码 |
---|---|
<kbd> |
定义键盘码 |
<samp> |
定义计算机代码样本 |
<tt> |
定义打字机代码 |
<var> |
定义变量 |
<pre> |
定义预格式文本 |
<abbr> |
定义缩写 |
<acronvm> |
定义首字母缩写 |
<address> |
定义地址 |
<bdo> |
定义文字方向 |
<blockquote> |
定义长引用 |
<q> |
定义短引用 |
<cite> |
定义引用、引证 |
<dfn> |
定义一个定义项目 |
五、字符实体
即使有了上面的标签,我们也不能万事大吉,因为相对于平时所用的文本,我们还是需要一些字符实体的,例如大于小于符号等。
字符实体有三部分:一个和号&,一个实体名称或#和一个实体编号,以及一个分号(;)。
显示结果 | 描述 | 实体名称 |
---|---|---|
空格 | |
|
< | 小于 | < |
> | 大于 | > |
& | 和号 | & |
'' | 引号 | " |
' | 撇号 | &apos |
¢ | 分 | ¢ |
£ | 镑 | £ |
¥ | 日元 | ¥ |
§ | 节 | § |
© | 版权 | © |
® | 注册商标 | ® |
× | 乘号 | × |
÷ | 除号 | ÷ |
六、链接
当然,在网上冲浪的你肯定会在不同网页之间跳转,这里就有锚标签和Href属性。HTML使用<a>
来创建另一个文档的链接,可以是一张HTML页面,一幅图像,一个声音或视频文件等等。
例如:<a href="http://www.baidu.com/" target="_blank">百度!</a>
当然我们这里来介绍一些属性。
1、Target属性,定义被链接的文档在何处显示。例如当前页面或者创建一个空白页面。
2、Name属性
我们有<a name="tipes">Useful Tips Section</a>
,之后我们将#符合和锚名称添加到URL的末端,就可以直接链接到tips这个 节,就像这样:
<a href="http://www.w3school.com.cn/html_links.asp#tips"Jump to the Useful Tips Section </a>
这样做我们可以创建直接跳转到页面的某个节的链接,不需要滑动页面来寻求信息。注意,我们书写链接的时候,总是将正斜杠添加到子文件夹,不然服务器会产生两次HTTP请求。
七、框架
上面我们已经可以构成一个很好的文本了,但是宏观上的布局我们还是没办法实现的,这里我们就介绍框架知识。
这里给出一个简单的例子:
<html>
<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">
</frameset>
</html>
上面是垂直框架,通过使用框架,可以在同一个浏览器中显示不止一个页面,每份HTML文档被称为一个框架,每个框架都独立于其他的框架。
这里也给出水平框架的例子:
<html>
<frameset rows="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</html>
八、表格
表格列表表单的重要性就不需要我多说了,我们也总是以此收集用户的数据。这里我们来看看如何创建表格,当然,除了最基本的表格之外,我们也需要属性去调整。
定义表格之前,我们需要想一下,如果我们现在设计一个表格,要怎么去画,我们可能需要对表格有一个命名,需要知道一共几行几列,需要知道每个单元格大概多宽,是否有边框等等。那么我们就从总体的几行几列开始:
表格由<table></table>
来定义,每个表格有若干行<tr>
定义,每行分为若干单元格,由<td>
定义。所以有例子为:
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
一看就知道是两行两列的格子
1、表格和边框属性
如果不定义边框属性,表格将不显示边框。需要显示,我们只需要在开始标签那里用border来定义即可。
2、表格的表头
我们使用<th>
来定义表头:
至于如果有空白单元格,我们可以使用空格占位符来填充空白单元格,这样看起来比较友好。
3、跨行或跨列的表格单元格
我们总是有着合并行或者列的要求,那么也是可以实现的,看下面的例子:
<html>
<body>
<h4>横跨两列的单元格:</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>横跨两行的单元格:</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
你会发现我们是使用colspan和rowspan来实现的。当然,我们还有caption带标题,Cell padding单元格边距,Cell spacing单元格间距
4、其它有用的标签
表格 | 描述 |
---|---|
<caption> |
定义表格标题 |
<th> |
定义表格的表头 |
<thead> |
定义表格的页眉 |
<tbody> |
定义表格的主体 |
<tfoot> |
定义表格的页脚 |
<col> |
定义用于表格列的属性 |
<colqroup> |
定义表格列的组 |
九、列表
对于我来说,word里面除了各种标题和文字之外,列表是必不可少的。我们这里就有无序列表、有序列表和自定义列表。
1、无序列表
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
2、有序列表
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
3、定义列表
我们使用<dl><dt><dd>
开始,分别是定义列表、定义项目、定义的描述;
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
十、表单
这部分我认为是很重要的,可以结合后端开发来使用。我们见过太多的格式,例如按钮、单选、复选、文本域等等。这里我们介绍一下:
首先我们是使用<form></form>
来定义此区域的。
1、文本域
我们用<input>
标签定义,输入类型由type定义,例如:
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>
2、单选按钮
<form>
<input type="radio" name="sex" value="male"> Male
<input type="radio" name="sex" value="female"> Female
</form>
3、复选框
<form>
<input type="checkbox" name="bike">
I have a bike
<br>
<input type="checkbox" name="car">
I have a car
</form>
4、表单的动作属性(Action)和确认按钮
<form name="input" action="html_form_action.asp" method="get">
Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>
这个就及其的重要,上面的意思是方法为get(我们一般有get、post),上面代码的意思为,填入信息点击Submit之后,信息会发送到html_form_action.asp页面上。
十一、图像
当然,有些时候我们总是会插入一些图片来美化页面。
1、图像标签和源属性
定义图像的语法是:<img src="url"
2、替换文本属性
alt属性用来为图像定义一串预备的可替换的文本。
<img src="boat.gif" alt="Big Boat">
3、其它标签
当然我们还有<map><area>
等标签,定义图形地图、定义图像地图中可点击的区域。
十二、HTML样式
你可能想使用背景或者定义字体,是的HTML是可以的,但是我们将使用CSS来进行定义。所以首先我们需要知道如何使用样式:
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、内联样式
当特殊的样式需要应用到个别元素时,就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
我们上面用到了几个标签,这里介绍一下:
标签 | 描述 |
---|---|
<style> |
定义样式定义 |
<link> |
定义资源引用 |
<div> |
定义文档中的一个节 |
<span> |
定义文档中的一个节 |
十三、脚本和事件
但是你又知道了,有些时候我们需要让页面相应我们,让它动起来。所以这里我们展会上如何插入脚本。
比如这样的:
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
</body>
</html>
为了应对老式的浏览器,我们可以将脚本嵌套在注释中。这样新的浏览器是可以支持的,老的浏览器可以忽略,或者用<noscript>
来代替,意味在脚本无法执行的情况下替代的文本。
<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
更多的事件就可以去JS中学习使用。
十四、标准属性
下面的提供除了base,head,html,meta,param,script,style,title元素,其它标签都有的属性。
属性 | 值 | 描述 |
---|---|---|
class | class_rule或style_rule | 元素的类 |
id | id_name | 元素的特定id |
style | 样式定义 | 内联样式定义 |
title | 提示文本 | 显示于提示工具中的文本 |
XHTML
以上部分就完成了HTML的学习,但是我们应该去了解XHTML,它是更严谨更纯净的HTML版本,我们主要针对差异来学习。
一、XHTML
我们知道HTML是超文本标记语言,那么对XHTML也要了解,它是可扩展超文本标签语言,因为存在着一些很糟糕的HTML,所以我们需要更严格的语法。最主要的不同在于:
1.XHTML元素必须被正确的嵌套
2.XHTML元素必须被关闭
3.标签名必须用小写字母
4.XHTML文档必须拥有根元素。
这一个可以解释一下,意思是所有的元素都必须被嵌套与<html>
根元素中。
二、XHTML语法
1、XHTML除了我们知道的属性名称等必须小写,属性值必须加引号外(这个我们在HTML中已经规范了),还要知道,XHTML中使用id属性替代name属性。
2、强制使用XHTML元素
例如:
<!DOCTYPE Doctype goes here>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title goes here</title>
</head>
<body>
</body>
</html>
3、语言属性
Lang属性应用于几乎所有的XHTML元素。它定义元素内部的内容所用语言的类型。如果在某元素中使用lang属性,就必须添加额外的xml:lang像这样:
<div lang="no" xml:lang="no"> Heia Norge!</div>
4、文件类型说明
-
STRICT(严格类型)
-
TRANSITIONAL(过渡类型)
-
FRAMESET(框架类型)
1)XHTML 1.0 Strict
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2)XHTML 1.0 Transitional
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3)XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/`xhtml1-frameset.dtd">
三、升级HTML至XHTML
1、添加文件类型声明:
这里使用严格DTD:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2、注意小写属性
3、空标签替换为这样的形式,例如:<hr>
用<hr />
替换
4、验证站点
5、至于其中的事件我们在JavaScript再学习。
后记:
HTML和XHTML部分就结束了,如果对你有帮助的话点个赞哦,谢谢~