一丶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查找
四丶常用全局属性
- 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中还有大量的标签等您去研究,记得持续学习,不断跟进