html分割线_HTML入门笔记1

今天对html进行简单的概述 整理一下html的基础知识 后续还会更新 ，代码对应效果图展示小白很适用哦！

HTML 是何方神圣？HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能（如 JavaScript）。

超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。

HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML 由一系列的元素（elements）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。 一对标签（ tags）可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。

HTML祖师爷 Tim Bergers -Lee。

• Tim Bergers -Lee发明了万维网。写了一篇 文章HTML TagsHTML 诞生。
• 万维网是 WORLD WIDE WEB （简称WWW）在1990年左右诞生。
• WWW=URL+HTTP+HTML
• 没有网址Tim Bergers -Lee发明了网址（URL），没有网页Tim Bergers -Lee发明了网页（HTML),为了让系统更加完善Tim Bergers -Lee发明了HTTP。

Tim Bergers -Lee可以说是前端的祖师爷，毕竟因为他才有了前端。说到这里了很多人不不知道万维网和互联网的区别。

万维网和互联网的区别是什么？

万维网是基于互联网实现输地址就能看网页的网络

HTML5 技术集合 （７个方面）

• 110个标签
• 30个必须掌握

1. 新标签，新属性
2. 新的通信技术：websockets,webrtc
3. 离线存存储技术：Localstorge
4. 图像技术：canvas,svg,webgl
5. web增强技术:History ApI
6. 设备相关技术：摄像头，触摸屏
7. 新的样式技术：CSS3新的H恶习，Grid布局方式

HTML5开发工具

• VSCode
• WebStorm
• Chrome
• MDN文档

HTML语法

• 注释
• DOCTYPE
• 有内容标签
• 无内容标签
• 属性

HTML标签（这里列出的是从１１０个标签中挑选出最常用的）

• 元数据 (title/base/link/meta/stye)
• 章节 （section/nav/artical/aside/h1~h6/header/footer/address/main/）
• 内容层次（p/hr/pre/blockquote/ol+li/ul+li/dl+dt+dd/figure+figcaption/）
• 文字（a/em/strong/q/time/code/kdb/sub/sup/mark/br/wbr/ins/del）
• 嵌入内容（img/iframe/video/audio/canvas/svg）
• 表格（table/tbody/thead/tfoot/tr/td/th）
• 表单（form/label/input/button/select/aption/textarea/progress）
• 可交互元素（summary_details/menu+menuitem）

HTML起手应该写什么？

• ！+Tab键即可完成操作

！+Tab键效果

章节标签

章节标签重要标签合集

• <header><headr>顶部广告标签

<

左边代码右边效果

• <footer></footer>&copy 版权声明标签

<

• <aside></aside>参考资料1243标签

<

• <main></main>主要内容标签

<

• tabindex标签

HTML全局属性

• class 标签 。class 用来增加样式，一个标签内可有多个class

[class=middle]
    {background:black;color:white;}

[class="middle bordered"]//这里两个属性都要写，否则没有用
    {background:black;color:white;}

这种写法可以用哪个写哪个

.middle{
       backgroung:black;
       color:white;
       }

.bordered{
         bordder:1px solid red;
         }

• contenteditable 可以使任何一个元素被编辑
• 作用 把<style></style>放进body 把 contenteditable 放进<style>:这样body里的代码用户可以直接看见并且可以编辑的代码改变页面

 contenteditable

• <hiddien>快速让一个东西看不见

<

• id不到万不得已不使用因为它不报错
• id的作用1.在css里 # xxx{ }加样式 2.在js里可以通过id获取对应元素（好多不能用记不住的话不建议使用）

id="xxxxxxx"

• style 主要用来增加样式的

<

• tabindex 控制tab的切换顺序的

tabindex=1;

• title 用来显示……里包含的完整内容

HTML內容标签

• ol+li 有序的列表。

<

• ul+li 无序的列表

<

• dl+dt+did 描述列表，其中dt代表的是描述对象，dd代表的是描述内容。

<

• pre 标签用法如果想保留空格，回车，tab，那么就需要用pre包裹起来。HTML一个特点：有连续多个空格会被缩成一个，有回车也会被缩成一个空格

<

加pre标签

• code 此标签里面的字体是等宽的 用来写代码

<

• hr 水平分割线

<

• br换行

<br>

• a 用来添加链接

<

• em 语气上的强调

<p>我们的期末考试重点是<em>Javascript</em></p>//强调Javascript效果默认字体为斜体 可以自己改

• strong 本质上的强调

<p>我们的期末考试重点是<strong>Javascript</strong></p>//强调期末考试效果默认字体为加粗体 可以自己改

• quote 内联引用

<

• blockquote 换行引用

<