今天对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 技术集合 (7个方面)
- 110个标签
- 30个必须掌握
- 新标签,新属性
- 新的通信技术:websockets,webrtc
- 离线存存储技术:Localstorge
- 图像技术:canvas,svg,webgl
- web增强技术:History ApI
- 设备相关技术:摄像头,触摸屏
- 新的样式技术:CSS3新的H恶习,Grid布局方式
HTML5开发工具
- VSCode
- WebStorm
- Chrome
- MDN文档
HTML语法
- 注释
- DOCTYPE
- 有内容标签
- 无内容标签
- 属性
HTML标签(这里列出的是从110个标签中挑选出最常用的)
- 元数据 (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键即可完成操作
章节标签
- <header><headr>顶部广告标签
<
- <footer></footer>© 版权声明标签
<
- <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一个特点:有连续多个空格会被缩成一个,有回车也会被缩成一个空格
<
- code 此标签里面的字体是等宽的 用来写代码
<
- hr 水平分割线
<
- br换行
<br>
- a 用来添加链接
<
- em 语气上的强调
<p>我们的期末考试重点是<em>Javascript</em></p>//强调Javascript效果默认字体为斜体 可以自己改
- strong 本质上的强调
<p>我们的期末考试重点是<strong>Javascript</strong></p>//强调期末考试效果默认字体为加粗体 可以自己改
- quote 内联引用
<
- blockquote 换行引用
<