【WEB基础】HTML & CSS 基础入门(1)初…
2019-05-22 06:30:05来源:博客园 阅读 ()
前面
我们每天都在浏览着网络上丰富多彩的页面,那么在网页中所呈现出的绚丽多彩的内容是怎么设计出来的呢?我们想要自己设计一个页面又该如何来做呢?对于刚刚接触网页设计的小伙伴来说,看到网页背后的一堆符号和代码,是不是会感到有些凌乱。“看这里、看这里”,其实HTML并不复杂,严格意义上它并不是编程,它只是一些标记,也可以说是和浏览器的一些“约定”,就是告诉浏览器,要显示什么内容,这些内容是什么样式。
好了,不废话了,来个例子看下:
一个 HTML 小例子
第一步:新建“记事本”,把下面这段代码复制到记事本中去,然后保存。
<!DOCTYPE HTML> <html> <head> <title>网页的标题</title> </head> <body> <p>左手程序Z右手诗</p> </body> </html>
第二步:将记事本后缀名“.txt”改为“.html”。
第三步:点击“新建文本文档.html”这个HTML文件,就可以在浏览器打开了。
OK,是不是很简单,我们看一下过程:
通过上面的几行代码,不难看出,HTML就是由一些用尖括号围起来并且成对出现的标签组成。不错,HTML就是由若干标签及其包含的内容组成,这些标签一般都是成对出现的,有开始和结束,但也有部分自闭合标签例外,HTML的基本结构由以下几个部分组成:
- 标记符<html>和</html>,表明该文件是用HTML来描述的,声明了文档的开头和结尾。
- 标记符<head>和 </head>,表示HTML文档头部信息的开始和结尾。头部信息主要包括页面的标题、相关说明等内容,它不作为网页的内容在浏览器中显示。
- 标记符<body>和</body>,网页中要显示的实际内容就在这两个标记符之间,它是网页的主体部分。
我们再对前面记事本里的代码加上注释,就会看的更明白。
<!DOCTYPE HTML> <!--声明这是一个HTML文档--> <html> <!--告诉浏览器网页是从这里开始的--> <head> <!--这是网页的头部开始--> <title></title> <!--这是网页的标题,这里为空--> </head> <!--这是网页的头部结束--> <body> <!--这是网页的主体部分开始--> <p>左手程序Z右手诗</p> <!--这是要在浏览器上显示的内容--> </body> <!--这是网页的主体部分结束--> </html> <!--告诉浏览器网页在这里结束了-->
HTML 小总结
HTML(Hypertext Markup Language) 是用来描述网页的一种语言。
HTML 指的是超文本标记语言,不是一种编程语言,而是一种标记语言,标记语言是一套标记标签 (markup tag)。
HTML 使用标记标签来描述网页。
简单说来,HTML 就是我们与浏览器用来沟通交流的语言,我们通过 HTML 告诉浏览器让它按照我们的意愿展示出我们期望的内容及效果。
认识一下 CSS
大概了解了一下 THML,我们在来看一下 CSS,其实 CSS 就是一个标准的“颜值党”,它基本决定了网页的外观样式。HTML 和 CSS 相辅相成,它们一个负责网页上要显示的内容,另一个负责这些内容的布局和样式。
看个小例子,比如我要调整前面记事本里 HTML 所显示文字的字体、颜色和大小,如下:
<!DOCTYPE HTML> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>网页的标题</title> <!--下面是CSS样式代码,与HTML在同一个文档中 --> <style type="text/css"> p { font-family: 微软雅黑; /*设置标签P里面字体*/ font-size: 12pt; /*设置标签P里面字体大小*/ color: white; /*设置标签P里面字体颜色*/ background-color: green; /*设置标签P背景颜色*/ } </style> </head> <body> <p>左手程序Z右手诗</p> </body> </html>
先看一下在浏览器中的显示效果:
不难看出,在 HTML 文档的头部,就是<head></head>标记的里面加上了<style></style>,在这里定了<p></p>的样式,字体是“微软雅黑”,大小是“12pt”,颜色是“白色”,背景是“绿色”。
最后
OK!看完的小伙伴应该大概了解 HTML 和 CSS 是干什么的了吧,稍微总结一下,HTML就是一堆标签,这些标签告诉浏览器要显示的内容的是什么,CSS 就是告诉浏览器要如何显示这些内容。列一下前面例子里出现过的标签:
<html><!--HTML 页面开始标签--> <head><!--页面头部标签--> <!--在头部标签里一般放置“标题标签”、“CSS样式”、“JS代码”等内容--> <title></title><!--页面标题标签--> <style type="text/css"> /*页面样式标签*/ /*type是个属性,是说明样式的内容类型,一般固定就是“text/css”*/ /*在这里可以设置页面各个元素的样式*/ </style> </head><!--页面头部结束标签--> <body><!--HTML 页面主体标签,要在网页上显示的内容都要放在这里面--> <p></p><!--p标签表示一个段落--> </body><!--主体标签结束标记--> </html><!--HTML 页面结束标签-->
一点说明
代码加注释是非常必要且重要的,它能提高代码的可读性。注释不参与编译,不会被执行,THML注释同样也不会在浏览器里显示,它只是代码的说明。
HTML注释:“<!--”表示注释的开始,“-->”表示注释的结束。
CSS注释:“/*”表示注释的开始,“*/”表示注释的结束。
------------------END
原文链接:https://www.cnblogs.com/nnzhang/p/10894141.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:前端之CSS2
下一篇:手把手教你grid布局
- DIV居中的经典方法 2020-06-13
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- HTML骨架 2020-06-10
- 转行Web前端工程师要掌握的学习知识汇总 2020-06-10
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash