程序员

前端学习笔记1-HTML基础

2018-01-30  本文已影响0人  一百万小可爱

HTML(Hypertext Markup language)不是一种编程语言,正如其英文全称所示,HTML仅是一种标记语言,它有许多元素,这些元素标签按照一定规则组合在一起形成的文档将告知浏览器我们所访问的网页的结构。网页开发者使用HTML元素以某种样式去展示想要展示的内容,可以强调某些内容,可以插入链接,可以展示文章等等。
1、HTML元素结构:
<p>这是一个段落标签</p>
HTML元素由基本的开始标签、内容和结束标签组成。除此之外,开始标签可以包含相应的属性/值对。
注意元素属性值的引号要对应,且不能遗漏,否则将导致浏览器错误解释成非理想结果。
2、HTML元素主要分为块级标签和行内标签两种。
块级元素:前后均有换行,独占一块内容。


块级标签.png

行内元素:和前后元素之间没有空格,紧挨着显示在一行。


行内标签.png
块级元素和行内元素的嵌套规则:块级元素不能嵌套于行内元素中,而行内元素和某些块级元素可以嵌套于块级元素中。(不是所有的块级元素均可嵌套于另一块级元素中的,如<div>标签不能嵌套于<p>标签中)。
3、简单的HTML页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>

<body>
<p>This is my page</p>
</body>
</html>


<!DOCTYPE html>:文档类型说明,非HTML标签。
<html></html>:<html>元素,将包含网页的所有内容,也称为根元素。
<head></head>:<head>元素,里面包含的内容不在网页上显示出来,如标题,元数据,css内联样式或外联样式,字符集说明,说明内容,搜索关键词,作者,时间等等信息。
<meta charset="utf-8">:这个元素及属性表面网页所用的字符集为utf-8。
<title></title>:<title>元素,网页标题,添加收藏夹时也会显示该标题。
<body></body>:<body>元素,该标签中将包含网页中将要展示的所有内容。


以上简单介绍了HTML的基本内容,HTML文档的基本结构很简单,但展示丰富的网页内容需要开发者灵活运用各类标签及属性样式。内容简单,后续将继续学习探讨。打好基础是继续学习的坚实基础。

千里之行始于足下,不积跬步无以至千里。

上一篇下一篇

猜你喜欢

热点阅读