HTML入门笔记1

最新推荐文章于 2025-04-05 22:19:51 发布

UntilTheCore

最新推荐文章于 2025-04-05 22:19:51 发布

阅读量270

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.youkuaiyun.com/UntilTheCore/article/details/105815862

版权

HTML 专栏收录该内容

2 篇文章

订阅专栏

HTML系列--入门

1.HTML是怎么产生的？

Tim Berners-Lee – 万维网的创建者

探寻互联网的初始，那么就必然要了解一下李老爷子本人，这位牛人为如今精彩纷呈的互联网世界打下了坚实的地基。1989年他开发了世上第一个浏览器和第一个服务器，由此种下了互联网世界的种子，而且他发明的WWW、URL、HTTP一直延续至今。

那这个东西到底是怎么产生的呢？1、因为一杯咖啡，这让我联想到了java；2、为了可以上网冲浪；

2.HTML怎么快速开始

现代的编辑器配合Emmet语法可以快速创建一个HTML的骨架，虽然这节省了我们书写骨架代码的时间，但还是有必要了解一下这些内容是什么。
HTML骨架解读
在vscode中创建一个HTML的文件，使用Emmet语法输入! + tab键即可快速生成html骨架。

3.HTML常用的章节标签有哪些？

章节标签	介绍
h1~h6	文章内容标题
section	相对于article元素更加广泛，每个区块都可以使用，比如页面里的导航菜单、文章正文、文章的评论等。
article	代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客、一篇帖子、一段用户评论
p	段落
header	头部
footer	页脚
main	主要内容。内容主体区域，放在在header和footer中间
aside	旁支内容
div	划分

4.HTML常用的内容标签有哪些？

内容标签	介绍
ol + li	ordered list + list item。无序列表
ul + li	unordered list + list item。有序列表
dl+ dd + dt	description list + term + data。自定义列表
pre	被 pre 包裹的内容以原始内容输出。比如内容有多个空格以及换行都正常显示
hr	分隔线
br	换行
a	超链接标签
em	语气上强调
strong	表示内容重要
code	内容字体等宽。一般包裹代码块
quote	引用。行内引用
blockquote	块级引用。被包裹的内容与上一行内容有一个缩进

5.HTML的全局属性有哪些？

全局属性即所有标签都会有的属性。

全局属性	介绍
class	类。给元素取一个类名，一般配合 css 设置样式
id	全局唯一id，一般配合 js 使用，但是由于多处使用了浏览器也不报错，所以慎用
style	内联样式
title	鼠标移到标签上会在鼠标旁显示title的值
hidden	控制标签的隐藏
tabindex	如果元素需要被键盘tab键选中，可以设置值。值 < 0，表示不被tab选中；值 == 0，表示最后被选中；值 > 0 表示按值大小顺序选中
contenteditable	使标签可被直接编辑。想要更直观看到这个属性的效果可以点击这里修改样式试试看，或者复制下面的代码运行一下。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<!-- 将style放入body并设置display为block再开启元素可编辑即可在网页上编辑页面样式 -->
  <style style="display:block;" contenteditable>
    header {
      background-color: pink;
    }
  </style>
  <header>我是头部</header>
  <section contenteditable>我是章节</section>
  <footer>我是页脚</footer>
</body>
</html>