猫史档案馆


【DSDL Lab】网页设计教程·1

用户:LiangYinLiangYin查看:12 回复:5 评论:12 创建时间:2020-04-16T14:42:00


俗话说,要学好网页设计,你至少要会以下三个东西:

H喵L[超文本标记语言]------用于描述你的网页,目前最新的标准是H喵L5

CSS[层叠样式表]------用于优化H喵L的布局,目前最新的标准是CSS3

JavaScript[JS脚本]------控制网页的行为

emotion_雷电猴_疑问

如果这里你没有看懂,那么我来打比方了:

H喵L相当于你在源码编辑器中制作各种界面,只不过H喵L需要你用’文字’来描述这些界面

CSS相当于改善你在源码编辑器的界面,比如调整界面的颜色,属性,字体等…

JavaScript相当于你在源码编辑器中拖拽积木,编写代码达到用户可以与UI互动,而不是一个只有界面,不能互动的网页

emotion_雷电猴_嗯嗯

好了大概的概念你也已经知道了,现在我们来一个H喵L网页的基础模板,我会逐个模块进行讲解。

<!DOCTYPE h喵l>

<h喵l>

<head>

<meta charset="utf-8">

<title>HelloWorld!</title>

</head>

<body>

HelloWorld!

</body>

</h喵l>

这就是一个完整的页面,你可以将内容复制到记事本中,并把后缀改为.h喵或.h喵l在浏览器中打开就回有页面。[具体编辑器的内容我会在下一次帖子中提到]

[注意:H喵L与Python,C++等不同,他不是编程语言,是一个标记语言,任何浏览器就可以看到效果,浏览器的作用就是解析这些标记,并将标记绘制出来]

那么在基础的页面里,我们不需要CSS与JavaScript,现在我们来逐步分析上面的内容

  1. <!DOCTYPE h喵l>这个是向浏览器声明此页面为H喵L5标准,H喵L5与H喵L4年代相差久远,而H喵L5有很多新功能与优化
  2. <h喵l>内容</h喵l>代表一个H喵L页面的开始与结束,头元素与身体元素都包含在里面
  3. <head></head>头元素的开始与结束,头元素包含了文档的元数据,如<meta charset="utf-8"> 定义了网页的编码格式为 utf-8
  4. <title> 我是标题</title>Title的中文是标题,所以此行声明了网页的标题
  5. <body>内容</body>身体元素的开始与结束,身体元素包含了可见的页面内容

PS:不是所有的浏览器都支持H喵L5新标准,如IE9以下.但是H喵L5比4是跨喵的改进

如果看了还有什么不懂的地方,欢迎留言,我会第一时间回复。


回复

上一页1 页 / 共 1下一页
JackuXLJackuXL

H™L

点赞0


评论


编程猫编程猫

tm

点赞0


评论


LiangYinLiangYin

请自行将喵更换为TM,受BCM屏蔽词影响,没有办法[doge]

第二期链接:https://shequ.codemao.cn/community/275977

点赞0


评论


kkk_AC工作室toby小号kkk_AC工作室toby小号

html

HTML

htMl

html

点赞0


评论


xiao998xiao998

点赞0


评论