无名阁,只为技术而生。流水不争先,争的是滔滔不绝。

html5代码大全 网页制作(从入门到精通)

前沿技术 Micheal 7个月前 (11-23) 209次浏览 已收录 0个评论

html5代码大全 网页制作(从入门到精通)

html5代码大全 网页制作(从入门到精通)

什么是 HTML5?

HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。那什么又是HTML呢?HTML 是用来描述网页的一种语言。HTML的上一个版本诞生于1999年。自从那以后,Web 世界已经经历了巨变。HTML 指的是超文本标记语言: Hyper Text Markup Language。HTML 不是一种编程语言,而是一种标记语言。而标记语言是一套标记标签 (markup tag)。HTML 使用标记标签来描述网页,HTML 文档包含了HTML 标签及文本内容,因此HTML文档也叫做 web 页面。

HTML5 是如何创建的?

HTML5 是 W3C 与 WHATWG 合作的结果。W3C 致 的是World Wide Web Consortium,也就是万维网联盟。而WHATWG 致 Web Hypertext Application Technology Working Group。WHATWG 致力于 web 表单和应用程序,而 W3C 专注于 XHTML 2.0。在 2006 年的时候,双方决定进行合作,来创建一个新版本的 HTML。

为 HTML5 建立的一些新规则

新特性基于 HTML、CSS、DOM 以及 JavaScript;减少对外部插件的需求(比如 Flash);更优秀的错误处理;更多取代脚本的标记;HTML5 应该独立于设备;开发进程应对公众透明。

为 HTML5 建立的一些新特性

用于绘画的 canvas 元素;用于媒介回放的 video 和 audio 元素;对本地离线存储得更好地支持;新的特殊内容元素,比如 article、footer、header、nav、section新的表单控件,比如 calendar、date、time、email、url、search。

HTML 编辑器

专业的 HTML 编辑器来编辑 HTML:Adobe Dreamweaver、Microsoft Expression Web、CoffeeCup HTML Editor、Sublime Text 。不过,我们同时推荐使用文本编辑器来学习 HTML,比如 Notepad (PC) 或 TextEdit (Mac)。我们相信,使用一款简单的文本编辑器是学习 HTML 的好方法,高手们都是用记事本写的~~~~

而本人使用的是Adobe Dreamweaver(下文中提到简称DW),大家可以自己尝试各种编辑器,再选择自己喜欢的。本教程是实用性类,不会长篇大论阐述理论,会留一些问题供大家去理解,不了解的话百度谷歌。

还需要的软件就是浏览器的准备,大家肯定知道什么是浏览器啦,现在谷歌,微软新版浏览器以及360等众多浏览器都是支持查看网页源代码的。鼠标右键选择查看源代码即可。

学习资料推荐:

在本文中,需要理解的点,在下面讲解中可能会混着讲,所以大家要看完教程之后自己去总结。

  1. HTML文档是什么样
  2. 如何新建一个HTML文档
  3. 怎么打开HTML文档

首先打开DW,新建一个HTML文件,就是后缀是html结尾的文件。

用DW这样的HTML专业软件有个好处就是新建的文件已经自动写好的一个HTML文件的基本结构。文档标题在页面中间上部的标题处可以修改,也可以保存后自己再修改。

保存名字为教程1,可以看到文件是这样的。

之后,我们尝试用记事本打开这个文件。

用记事本打开的样子。跟DW打开是一样。

在body部分输入文字,内容随意,然后保存。

再用浏览器打开,我这边用的谷歌浏览器。打开之后可以看到如下图所示。相信大家对HTML文件已经有了一点点概念了。

再回到DW打开,可以看到,文件下边是代码,上边是结果。如果只看到代码,这是因为在页面左上角传视图的方式选择。选择拆分即可。

在DW中新建一个文件之后,你其实就已经看到一个HTML的基本结构了,这是我们刚才新建的教程1

红色的矩形框内部的内容,我们称为<!DOCTYPE> 声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的,以下方式均可:

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

通用声明

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

http://www.w3.org/TR/html4/loose.dtd”&gt;

XHTML 1.0

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

查看完整网页声明类型 DOCTYPE 参考手册。

<!DOCTYPE> 声明之后就是 <html> …..</html> 中间的那些我们暂时忽略。这两个尖括号之间的内容就告诉了浏览器,这段内容是html页面的内容。

在html页面中,哪些是被显示的,哪些是代码?相信通过第一节大家已经有所认识了,在HTML中,标签是通过”< >”表现的。而每一个标签都以对应的“</ >”来结束,如<html></html>,<head></head>,<title></title>…..。(当然也有例外,之后再说)

接下来就是在 <html> ,</html>之间编辑整个页面的头部和身体了.

头部用<head></head>来表示,之间的内容一般包含meta 和title,meta大家可以自己去了解,如果没有这一块,显示可能会出现乱码。一些预先的设置都会放在头部里,样式表等,就像是C语言程序中的头文件。title标签就是整个网页的标题。

编辑好了头部,就进入页面的身体啦。用body标签来表示很直观,也不需要刻意去记了。在实例1中body的内容很简单,只有一行文字,之后的内容也就是教大家如何将body丰富起来~~

掌握三个标签

1.HTML 标题<h1>-<h6>

2.HTML 段落<p>

3.HTML <br/>

HTML 标题

在 HTML 文档中,标题很重要。

标题是通过 <h1> – <h6> 标签进行定义的.

<h1> 定义最大的标题。 <h6> 定义最小的标题。

看看实例效果

关于查看文件的效果,大家可以保持浏览器打开,当DW中保存过文件以后,在浏览器中刷新一下,就可以看到效果。

HTML 段落

HTML 可以将文档分割为若干段落。段落是通过 <p> 标签定义的。在<p> </p>中输入如下内容,并在浏览器打开看一下效果。

如果我缩小浏览器的宽度,效果如下。

现在大家可以发现,html语言是一种排版语言,他会保证你可以看到内容的全部,随着浏览器的变化,文字排版也会跟着变化。你自己敲的空行,是不会显示出来。那么如何自己定义断行呢?介绍一个新的标签<br/>

<br/>标签

英文brake的缩写,很显然,就是打断的意思。因为这个标签是放在内容的结尾的,所以它的开始就是结束,因此他没有结束标签,所以没有</br>,只有<br/>,大家要记清楚~

这时就能看到断行啦。

HTML 水平线

<hr> 标签在 HTML 页面中创建水平线。<hr>标签与<br>标签一样,没有结束标签。所以也可以写成<hr/>.

属性

在设置完水平线之后,我们还可以及设置水平线的宽度。

代码<hr width=50%> 这里的50%是指页面的50%,也可以设置一个具体的数值,比如50,是指50个像素,大家可自行尝试。

这里的width就是这个标签的属性。像这样的属性值,还有,align,size。但不同的效果,大家可以试试。这些效果学了CSS之后,都建议通过CSS样式表来实现。

<hr width=50>设定绝对长度;

<hr align=left>设置左对齐,当然也可以设置右对齐。

<hr size=1>这表示线宽;

曾有有一段时间属性值“=”后面是需要加引号的,<hr width=“50”>,但现在所有浏览器都支持不加引号,大家看到有引号不要觉得是错误的。

<标签名 属性名=color> – 指定颜色

比如我可以给水平线设置颜色

在DW中输入color=“之后会弹出颜色选择,可以只选择颜色,DW会自动生成颜色代码。


代码为:

<h3>第四节 水平线</h3>

<hr width=90% color=”#FF0000“>

插入一条水平线

效果如下:

字体样式

我们会举例说一些,但是在学习CSS之后,字体样式等于格式有关的功能,都会通过CSS样式表来实现。所以,这里大家只要稍微了解下就好。

举几个例子

加粗<b></b>;斜体<i></i>;下划线<ins></ins>;变小<small></small>;在html中,标签是可以嵌套的。大家可以仔细对比,以下代码,和效果。

短语格式

以下标签的显示结果是由浏览器和样式表决定的,这些标签标识的意思而不是效果。这句话可能有一些难以理解,大家学习久了就会有所体会。

<em>强调</em>;<strong>着重</strong>;<dfn>definition</dfn>;<code>表示这一行是源代码,仅用于小部分代码。</code>;<samp>例子代码</samp>;<kbd>用户输入</kbd>;<bar>变量</bar>;<site>引用</site>

我们试着输入这些代码。

列表

掌握几个标签<ul><li><ol><dl><dt><dd>,标签是可以嵌套的,大家自己可以试一试。

无序列表 <ul>和<li>标签

<ul>un-odered list <li>list item,一项

将 <ul> 标签与 <li> 标签一起使用,创建无序列表。将<ol>标签与<li>标签一起使用,创建有序列表。

代码:

ol和ul可以嵌套自动缩进ul缩进每层标记不一样会有实心和空心等不同的标记。

<dl>、<dd>和<dt>标签

定义:<dl> 标签定义了定义列表(definition list)。<dd> 在定义列表中定义条目的定义部分。<dt> 标签定义了定义列表中的项目(即术语部分)。

用法:<dl> 标签用于结合 <dt> (定义列表中的项目)和 <dd> (描述列表中的项目)。

举例代码:

<dl>

<dt>计算机</dt>

<dd>用来计算的仪器 … …</dd>

<dt>显示器</dt>

<dd>以视觉方式显示信息的装置 … …</dd>

</dl>

浏览器中的效果如下:

table 标签 — 代表HTML表格

  • table标签是成对出现的,以<table>开始,以</table>结束
  • 引用网址:http://www.dreamdu.com/xhtml/tag_table/
  • 属性
    • Common — 一般属性
    • summary — 代表表格的摘要说明
    • width– 代表表格的宽度
    • border — 代表表格边框(此属性应该使用CSS实现)
    • cellspacing — 代表表格边框与表格内容填充的距离,也是内容填充之间的距离(此属性应该使用CSS实现)
    • cellpadding — 代表内容填充的宽度(此属性应该使用CSS实现)
  • table,中文”表格”的意思

示例

<table width="80%" border="1"> <tr> <th>www.dreamdu.com</th> <th>.com域名的数量</th> <th>.cn域名的数量</th> <th>.net域名的数量</th> </tr> <tr> <td>2003年</td> <td>1000</td> <td>2000</td> <td>3000</td> </tr> <tr> <td>2004年</td> <td>4000</td> <td>5000</td> <td>6000</td> </tr> <tr> <td>2005年</td> <td>7000</td> <td>8000</td> <td>9000</td> </tr> </table>

HTML表格示例 — 可以尝试编辑

  • HTML table 标签示例
  • HTML th 标签示例
  • HTML cellpadding cellspacing 属性示例
  • HTML rowspan 属性示例
  • HTML colspan 属性示例
  • HTML colgroup col示例

说明

  • width– 是表格的宽度,可以使用象素px或者百分比
  • border– 是表格的边框的宽度,使用px表示,此属性应该使用CSS实现
  • tr — 代表一行
  • th — 代表表格头
  • td — 代表一个单元格

由于篇幅有限,今天的内容就介绍这么多。如果你有什么想法或者建议,欢迎评论交流!

网页编辑器 markdown空格换行语法完整教程(图文详解1)

喜欢 (0)
[]
分享 (0)
关于作者:
流水不争先,争的是滔滔不绝
发表我的评论
取消评论

评论审核已启用。您的评论可能需要一段时间后才能被显示。

表情 贴图 加粗 删除线 居中 斜体 签到