前端学习笔记1-HTML基础

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文档的基本结构很简单,但展示丰富的网页内容需要开发者灵活运用各类标签及属性样式。内容简单,后续将继续学习探讨。打好基础是继续学习的坚实基础。

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,826评论 1 92
  • HTML基础 本文包括 HTML基本知识与结构 HTML常见标签 标签写法与嵌套的讨论 HTML、CSS、java...
    廖少少阅读 2,133评论 2 21
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,645评论 32 459
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,352评论 1 41
  • 今天机缘巧合想起来看书,过敏性紫癜,ITP,这是一种免疫病,可有遗传,主要是因为血液里面的血小板数量减少,所以受到...
    l晴洛洛阅读 254评论 2 0