第一次接触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基础要怎么自学小程序开发
小程序开发环境搭建和布署