HTML入门

142 阅读2分钟

一丶HTML是哪来的

在很久以前(1990年)有个大佬:“蒂姆”·伯纳斯-李爵士(Tim Berners-Lee),就简称为李爵士,他想通过一种方式来完成在互联网上的交互,发明了HTML丶HTTP丶URL实现了HTTP代理与服务器的第一次通讯.

二丶编写网站的第一步

<!DOCTYPE html> <!-- HTML 5规范 文档类型 -->
<html lang="en"> <!-- html语言类型 -->
<head> <!-- 头部 -->
  <meta charset="UTF-8"> <!-- 文件的字符编码 UTF-8可以通用的 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 移动端 -->
  <title>Document</title> <!-- 标题 -->
</head>
<body><!-- 内容 -->
</body>
</html>

需要创建以上的内容信息在你的编辑器中,才能进行下一步的编辑操作,此串代码告诉浏览器该文件是
1.以HTML语言的文本
2.语言是欧洲标准语言
3.用的字符编码是UTF-8
4.对移动端也进行了设置宽度尺寸

三丶常用层级标签

此处会给出一些常用的表示文章/书的层级

<h1>-<h6> <!-- 标题 -->
<section></section> <!-- 章节 -->
<article></article> <!-- 文章 -->
<p></p> <!-- 段落 -->
<header></header> <!-- 头部 -->
<footer></footer> <!-- 脚部 -->
<main></main> <!-- 主要内容 -->
<aside></aside> <!-- 旁支内容 -->
<div></div> <!-- 划分 -->

以上标签仅代表部分常用标签,如需查看更多标签请去MDN查找

四丶常用全局属性

  1. class
<div class="test"></div>

增加class属性,可以通过.test的形式去查找到此div标签


2. contenteditable

<div class="test" contenteditable></div>

增加contenteditable属性意味着用户可以在网页上直接编辑所展示的内容
3. hidden

<div class="test" hidden></div>

增加hidden属性后该代码块内的内容都将不会显示出来
4. id

<div id="test"></div>

增加id属性后,可以通过#test的形式去查找到此div标签
!切记一个文档中的id起名要慎重,切不可重复否则极难进行查找修复
5. style

<div id="test" style="border: 1px solid red"></div>

style属于给标签增加了一个内联样式,在该属性内可以直接修改标签的样式
!一般不建议直接写在内联样式中,不易调试
5. title

<div id="test" title="我是title来看我吧"></div>

title是给标签增加了一个文字说明,当鼠标放在该块代码中会浮出一个说明文字

五丶常用内容标签

<ol>
  <li></li> <!-- 此为有序列表的展示将会看到数字 -->
</ol>
<ul>
  <li></li> <!-- 此为无序列表的展示将会看到圆点 -->
</ul>
<pre></pre> <!-- 在HTML中多个空格回车会被合并成一个空格, 该便签内的代码不会忽略多个空格-->
<code></code> <!-- 让每个字符等宽 -->
<hr> <!-- 分隔线 -->
<br> <!-- 换行 --> 
<a href=""></a> <!-- 超链接的一种形式,具体的属性会在以后的文章中提及敬请期待 -->
<strong></strong> <!-- 该标签是一种含义上的强调形式 -->
<em></em> <!-- 该标签是语气上的强调形式和strong还有区别 -->
<blockquote></blockquote> <!-- 该引用为块引用 会独占一行 -->


!以上标签仅为博主比较常用的标签,在HTML中还有大量的标签等您去研究,记得持续学习,不断跟进