三小时学会网页设计使用HTML编辑网

北京青春痘好的医院 http://pf.39.net/bdfyy/bdfzj/210311/8736666.html

第一次接触HTML设计的可以先看看前面几期的内容:《HTML简介》、《HTML的标签和属性》、《HTML的常用标签和属性(2)》,这里是HTML基础教程的最后一期(没错,一共就四期,所以你不用觉得它有多难)。

html的基本结构下面是一个标准的HTML文档结构:

!DOCTYPEhtml         //文档类型声明

htmlxmlns=”   //xmlns命名空间

head       //页面头部起始标签

metacharset="UTF-8"       //charset编码格式

titleDocument/title         //页面标题栏

/head         //页面头部闭合标签

body         //页面内容起始标签

 //这里是写网页内容代码的位置

/body         //页面内容闭合标签

/html         //html闭合标签

!DOCTYPE标签

!DOCTYPE声明指的是该页面是使用哪个HTML版本进行编写的。

这里的html后面没有版本号所以默认的就是最新版本。

html标签

告知浏览器其自身是一个HTML文档。

xmlns属性可以在文档中定义一个或多个可供选择的命名空间。

其中的xmlns=”表态本页面所有的代码都是以这个网站为标准的。

head标签

用于定义文档的头部,它是所有头部元素的容器。页面的标题等内容都写在这个标签里。

meta标签

meta元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。

charset属性规定在外部脚本文件中使用的字符编码。

这里规定页面文字编码格式是UTF-8

title标签

网页标题。

body标签

定义文档的主体。

网页中的所有内容代码都写在这里。

常用格式标签

注释

!--这里用来写注释内容--,注释的内容不会在网页里显示

段落

p这里用来写段落里的代码/p

换行

br/这个标签不是成对的

粗体

b这里用来写想要加粗字体的内容/b

斜体

i这里用来写想要倾斜字体的内容/i

下划线

u这里用来写想要加下划线字体的内容/u

删除线

s这里用来写想要加删除线字体的内容/s

上标

sup这里用来写想要目标字体效果的内容/sup

下标

sub这里用来写想要下标字体效果的内容/sub

实战:编写一个留言板的HTML页面

下面我们根据前几期所讲过的内容:HTML简介、HTML的标签和属性、HTML的常用标签和属性(2)及上面所提到的内容及来写一个标准的HTML文件。

代码:

!DOCTYPEhtml

htmllang="zh-cmn"

head

metacharset="UTF-8"

title留言本/title

/head

body

!--发表留言区--

div

textareacols="50"rows="5"/textarea

br/

inputtype="text"/

inputtype="submit"value="发表留言"/

/div

!--显示留言区--

div

div

用户名1、留言时间1

br/

留言内容1

/div

div

用户名2、留言时间2

br/

留言内容2

/div

/div

/body

/html

lang="zh-cmn"表示声明元素内容的语言为简体中文

cols="50"rows="5"表示多行文本输入框的长和宽

效果:

到这里HTML的基本语法就算是基本完了。

关于HTML语言中的其它代码写法跟我们这几期所讲到的基本类似,所不同的就只是HTML的元素、属性及属性值的作用不同而已。

所以现在大家已经具备基本的前端HTML开发能力了。

如果想要深入学习也只需要自行去http://www.wschool.com.cn查询并了解相关元素、属性及属性值的作用就行了。

Thisisnottheend.Itisnoteventhebeginningoftheend.Butitis,perhaps,theendofthebeginning.

更多分享

0基础教程丨PHP网站开发

Web网站的工作原理

开发前的准备工作

MAC系统怎么搭建自带的PHP开发环境

HTML丨语言简介

HTML丨标签和属性

HTML丨基本结构与常用格式标签

HTML丨网页编辑实战

CSS丨简介与引入方式

CSS丨选择器

CSS丨样式

CSS丨布局

CSS丨网页美化实战

PHP丨第一个PHP程序

PHP丨变量

PHP丨数据类型

PHP丨数组

PHP丨数据的发送与接收

效率工具

AutoCAD(附软件+注册机)

AdobeCC破解全系列(WIN+MAC)

Office早期预览版(免激活)

免费看VIP视频,高速下载百度云,听高清网易云...你只差一个小插件

平面设计自学指南

小众电影

美国往事丨如果你的一生只能看一部电影的话,那就看这一部吧

蝴蝶丨我比你年轻,我还有余力等你(les题材)

东京夜空最深蓝丨活着吧,要活到死才对

荒野生存丨我想那么年轻,干净,那么寂寞地活着,直到可以突然失踪在马路上的那一天

0基础教程丨小程序开发

0基础要怎么自学小程序开发

小程序开发环境搭建和布署




转载请注明:http://www.aierlanlan.com/tzrz/930.html