轻松搞定网页设计之html

一、HTML介绍

1. HTML概念

HTML(Hyper Text Markup Language)，即超文本标记语言。是目前网络上应用最为广泛的语言，是构成网页文档的主要语言。

HTML文本是由HTML组成的描述性文本，HTML命令可以说明/描述文字、图形、动画、声音、表格、链接等。

HTML的结构包括头部（head）、主体（body）两部分，其中头部描述浏览器所需的信息，而主体则包含需说明的具体内容。

1.1 HTML是什么

HTML是超文本标记语言，主要的用处是制作网页。通过HTML语言的描述，可以在网页上显示文字、图像、视频和声音等内容。

1.2 HTML可以做什么

HTML可以编写静态网页，该静态网页可以包含文字、图形、动画、声音、表格、链接等内容，从而构成一个精美的网页。

网页分为静态网页（html页面）和动态网页（php/jsp/asp/asp.net/cgi页面）。

静态网页：用于向用户呈现内容信息，不能与用户进行数据交互。静态网页中可能包含flash动画内容，或者是通过Javascript网页能够产生“动态效果”，但依旧还是静态网页。

动态网页：不仅能够向用户呈现内容，能够与用户进行数据交互。与静态网页的区别在于动态网页带有“功能”。如，用户发帖功能的实现，就需要使用到动态网页技术，接收用户提交的发帖内容，经过程序处理，将用户发的帖子内容显示在论坛中。

2. html发展历史

2.1 html发展历史

蒂姆·伯纳斯·李万维网之父，html的设计者，W3C组织的创始人。

1993年标记语言第一版；

1995年html2.0；

1996年html3.2 W3C推荐标准；

1999年html4.0.1 W3C推荐标准；

2000年xhtml1.0 W3C推荐标准；

2001年xhtml1.1；

2008年html5...

说明：1999年html逐渐向xml发展，出现了xhml。xhtml可以理解成html的加强版。html语法要求简单，而xml语法要求非常严格，xhtml可以算是html向xml过渡的中间物。

2.2 W3C组织介绍

W3C是英文world wide web consortium的缩写，译为W3C理事会或万维网联盟。W3C于1994年10月在麻省理工学院计算机科学实验室成立，创建者是万维网发明者Tim Berners-Lee。

W3C组织是专门制定网络标准的一个非盈利组织，像HTML、XHTML、CSS、XML的标准就是由W3C来制定。W3C会员包括生产技术产品及服务的产商、内容供应者、团体用户、研究实验室、标准制定机构和政府部门，一起协同工作，致力于在万维网发展方向上达成共识。

2.3 HTML和XHTML的区别

发展方向：html→xhtml→xml。

html语言本身存在一些缺陷（比如，内容和样式不能分离，标记单一，数据不能复用等），随着XML的兴起，XML越来越受到国际认可，所以人们希望用XML来弥补HTML的不足，但是目前已有成千上万的网页都是基于Html编写的，使用XML来完全代替存在很大难度，于是W3C组织在2000年推出XHTML1.0。

建立XHTML标准的目的就是为了在HTML向XML过渡时更加平滑。

3. HTML运行原理

3.1 html文件的运行方式

html文件的运行有2种方式：本地运行和远程访问运行。

本地运行：选中html文件，单击鼠标右键选择使用浏览器打开，即可以看到执行结果。html文件可以存放到电脑磁盘上的任意文件夹中。

远程运行：浏览器地址栏输入“远程服务器的IP地址+路径+html文件名”访问执行指定html文件。html文件必须存放在服务器下指定的文件夹中，如apache服务下的www/htdocs文件夹中。

案例：

demo.html，位于C:\html\目录（打开电脑的C盘，在C盘新建一个名称为html的文件夹）下，写下如下代码。

<html>

<head>

	<meta http-equiv="content-type" content="text/html;charset=utf-8">

	<title>HTML运行方式</title>

</head>

<body>

Hello,world

</body>

</html>
浏览器相关知识

使用浏览器打开demo.html文件，我这里的使用的是ie11浏览器，浏览器信息如下：

浏览器组成介绍：以ie11浏览器为例，介绍浏览器的组成。

  1. 地址栏；输入地址可以访问网页。
  2. 标题栏；显示网页的标题。
  3. 常用/快捷命令栏；第一个表示快捷打开主页，第二个表示快捷收藏网页，第三个表示快捷设置。
  4. 菜单栏；通过菜单栏可以对浏览器进行设置。
  5. 收藏栏；显示用户收藏的网页。
  6. 命令栏；
  7. 状态栏；显示浏览网页时的页面状态。
  8. 内容区。
  9. 最大化、最小化、关闭按钮位于浏览器的右上角；可以最大化、最小化、关闭浏览器窗口。
  10. 下拉按钮；当内容区有很多的显示内容，浏览器内容区因窗口大小限制，无法一次性显示页面全部内容。浏览器的右侧会出现一个下拉按钮，鼠标拖动下拉按钮可以查看更多的内容。
本地运行

选中带有html后缀名的文件→单击鼠标右键→打开方式→选择浏览器。

运行结果如下：

说明：浏览器地址栏显示C:\html\demo.html，其中“C:\html\”为demo.html文件存放的磁盘路径，demo.html为文件的名称。

远程运行

浏览器地址栏输入“远程服务器的IP地址+路径+html文件名”访问执行指定html文件。

说明：

Ⅰ.127.0.0.1是服务器的ip地址，/html是demo.html文件在服务器下的存放路径，demo.html为html文件的名称。

Ⅱ.本案例中，使用的服务器是apache，demo.html文件存放在apache服务器指定的文件夹www下的html文件夹中。apache服务器的使用，在后续的PHP课程中再继续介绍。

3.2 .htm 还是 .html 文件后缀？

当您保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 文件后缀。

区别：

Ⅰ.访问一个远程网站时，该网站服务器目录下同时有index.html和index.html，默认优先访问.html后缀的文件。

Ⅱ..htm后缀是因为很久前的软件后缀名只允许包含3个字母。html后缀是为了兼容以前的dos系统“8.3”命名规范，即文件名8个字符，后缀名3个字符。

Ⅲ.对于如今的软件，2种后缀名的html文件都可以正常执行。

二、HTML基本概念

1. html开发工具选择

html网页开发其实很简单，使用windows系统自带的记事本就可以进行。

当然，也可以较为简单的编辑器，如sublime Text，edit plus，vim，frontpage，dreamweaver。

也可以使用集成的开发工具（IDE），如zend studio，eclipse等。（笔者使用的是sublime text2）

2. html文件的基本结构

<html>

<head>

</head>

<body>

	<标签 属性1="属性值" 属性2="属性值" ...>内容</标签>

	<标签 属性1="属性值" />

</body>

</html>

3. 什么是Html标签

一个html文档（文件），由多个html标签组成。

html标签也被称为html元素或html标记，这仅仅只是个人的习惯不同，其实这几种叫法并没有区别。

所以，元素、标记和标签其实是一个意思。

3.1 html标签/元素

结构：

<标签 属性1="属性值" 属性2="属性值" ...>内容</标签>

<标签 属性1="属性值" />

说明：

Ⅰ.html文档由多个html标签组成

Ⅱ.html标签用2个尖括号括起来，如<head></head>。

Ⅲ.html标签多数是双标签，包含起始标签和结束标签。如，双标签b，包含起始标签<b>和结束标签</b>。

双标签中间的文本是Html标签的内容。如，双标签b，<b>hello,world</b>，<b>和</b>中间的文本是b标签的内容。

Ⅳ.少数html标签为单标签。如，<br />、<hr />、<meta />、<input />。

3.2 Html标签属性

Html标签通常都有多个属性，给属性设置不同的属性值可以控制Html标签在浏览器中的显示效果。

HTML标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

属性总是以“名称/值”的形式出现，比如：name="value"。

属性总是在 HTML 元素的开始标签中规定。

使用小写属性：

属性和属性值对大小写不敏感。不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。而 XHTML 要求使用小写的属性/属性值。

始终为属性值加引号：

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

name='Bill "HelloWorld" Gates'，name的属性值为Bill "HelloWorld" Gates。

适用于大多数 HTML标签的属性：

属性 值 描述
class classname 规定元素的类名（classname）
id id 规定元素的唯一 id
style style_definition 规定元素的行内样式（inline style）
title text 规定元素的额外信息（可在工具提示中显示）

如，<input class=”username” />。

3.3 Html符号实体

一些字符在 HTML 中拥有特殊的含义，比如小于号 (<) 用于定义 HTML 标签的开始。

如果我们希望浏览器正确地显示这些字符，我们必须在 HTML 源码中插入字符实体。

字符实体有三部分：

一个和号 (&)，一个实体名称，或者 # 和一个实体编号，以及一个分号 (

0基础自学php教程的更多相关文章

  1. Android程序开发0基础教程(一)

    程序猿学英语就上视觉英语网 Android程序开发0基础教程(一)   平台简单介绍   令人激动的Google手机操作系统平台-Android在2007年11月13日正式公布了,这是一个开放源码的操 ...

  2. Python 0基础开发游戏：打地鼠（详细教程）VS code版本

    如果你没有任何编程经验,而且想尝试一下学习编程开发,这个系列教程一定适合你,它将带你学习最基本的Python语法,并让你掌握小游戏的开发技巧.你所需要的,就是付出一些时间和耐心来尝试这些代码和操作. ...

  3. ECMAScript 6.0基础入门教程

    ECMAScript 6.0基础入门教程 转:https://blog.csdn.net/hexinyu_1022/article/details/80778727 https://blog.csdn ...

  4. 手把手0基础Centos下安装与部署paddleOcr 教程

    !!!以下内容为作者原创,首发于个人博客园&掘金平台.未经原作者同意与许可,任何人.任何组织不得以任何形式转载.原创不易,如果对您的问题提供了些许帮助,希望得到您的点赞支持. 0.paddle ...

  5. 0基础的人如何入门 Python ？Python难么？

    人生苦短,我用Python,为啥这么说,因为我们自动化测试有金句:学完Python,便可上天 ~ 废话不多说,相信很多人都听过之前的Python进入小学课本.Python进入浙江省高考等新闻,有这么多 ...

  6. PowerShell_零基础自学课程_5_自定义PowerShell环境及Powershell中的基本概念

    PowerShell_零基础自学课程_5_自定义PowerShell环境及Powershell中的基本概念 据我个人所知,windows下的cmd shell除了能够通过修改系统参数来对其中的环境变量 ...

  7. 25个增强iOS应用程序性能的提示和技巧(0基础篇)

    在开发iOS应用程序时,让程序具有良好的性能是非常关键的. 这也是用户所期望的,假设你的程序执行迟钝或缓慢,会招致用户的差评.然而因为iOS设备的局限性,有时候要想获得良好的性能,是非常困难的. 在开 ...

  8. macOS下MySQL 8.0 安装与配置教程

    一.前言 1.本教程主要内容 适用Homebrew安装MySQL MySQL 8.0 基础适用于配置 MySQL shell管理常用语法示例(用户.权限等) MySQL字符编码配置 MySQL远程访问 ...

  9. App 图标设计 - 圆角透明效果（0 基础使用 PS）

    App 图标设计 - 圆角透明效果(0 基础使用 PS) 方法: 如果你有些基础,就不必看图文教程了: 1.使用圆角矩形工具选中,设置圆角尺寸[例如:1024*1024 px(圆角:160 px)] ...

随机推荐

  1. operator[]，识别读操作和写操作

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  2. C++中几个值得分析的小问题（2）

    下面有3个小问题,作为C++ Beginner你一定要知道错在哪里了. 1.派生类到基类的引用或指针转换一定“完美”存在? 一般情况,你很可能会认为:派生类对象的引用或指针转换为基类对象的引用或指针是 ...

  3. Deepgreen DB简介（转）

    原文链接   Deepgreen DB 全称 Vitesse Deepgreen DB,它是一个可扩展的大规模并行(通常称为MPP)数据仓库解决方案,起源于开源数据仓库项目Greenplum DB(通 ...

  4. ETL学习整理 PostgreSQL

    ETL分别是“Extract”.“ Transform” .“Load”三个单词的首字母缩写也就是“抽取”.“转换”.“装载”,但我们日常往往简称其为数据抽取. ETL是BI/DW(商务智能/数据仓库 ...

  5. 微信小程序自定义tabbar的问题

    个人感觉小程序的tab样式自定义的能力有所欠缺,不够美观,于是今天自己diy了一个tab 测试的时候发现,无论是使用navigator跳转(会出现点击的效果)还是用bindtap(触摸),因为没有定义 ...

  6. vue和react

    1. 数据渲染 vue是使用template模板进行渲染,react使用的是jsx语法,对组件进行渲染 vue模板中使用{{ this.data }} 双括号包着变量,代表变量表示的值.外面那层表示需 ...

  7. 【Keras学习】常见问题与解答

    Keras FAQ:常见问题 如何引用Keras? 如果Keras对你的研究有帮助的话,请在你的文章中引用Keras.这里是一个使用BibTex的例子 @misc{chollet2015keras, ...

  8. python常用模块之sys模块

    python常用模块之sys模块 1.sys.argv[]:命令行参数List,第一个元素是程序本身 # 写一个简单的python程序,代码如下: #!/usr/bin/python #coding= ...

  9. SSH服务及其扩展(sshpass和expect)

    SSH服务及其扩展(sshpass和expect) Linux SSH服务一共包含三个工具:ssh.scp.sftp [远程连接及执行命令] 语法:ssh -p端口 账号@IP 命令 参数说明:-o ...

  10. crm 03--->销售页面及逻辑

    基本思路 销售  ------->使用的是customer表来操作 有两个页面: 未成交的客户 公共客户页面  ---  什么属于?  --> 三天未跟进,及十五天内未成交 url    ...