目录
1、HTML 简介
HTML 指的是超文本标记语言 (Hyper Text Markup Language),它是一种标识性的语言,包括一系列标签。通过这些标签可以将网络上的文档格式统一,使分散的网络资源连接为一个逻辑整体。简单来说,我们上网所看到的网页界面基本上都用 HTML 编写的。
HTML 与 1990 年左右诞生,发明人蒂莫西·约翰·“蒂姆”·伯纳·李爵士(Tim Berners-Lee),英国计算机科学家,他是万维网(World Wide Web)的发明者,2017年,他因发明万维网、第一个浏览器和使万维网得以扩展的基本协议和算法而获得 2016 年度的图灵奖。1990 年 12 月 25 日,他和他的队友在一起成功通过 Internet 实现了 HTTP 代理与 服务器 的第一次通讯,从某种意义上说,如果没有他当时的这一举动,就不会有如今互联网的前后端岗位,可以说这是我们的祖师爷了,快来膜拜一下。
2、HTML 起步
HTML 起手式的意思是,写 HTML 时所必须的基本格式, 它包括文档类型,字符集编码,语言以及浏览器兼容等。一般在使用编译器的时候,可以通过 ! + Tab 一键配置 HTML 的基本格式,如下图所示:
3、HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag),它是由尖括号包围的关键词,比如: <html>、<head>、<body>。HTML 标签通常是成对出现的,其中一个是开始标签,一个是结束标签,比如:<html></html>、<head><head>,<body></body>,开始和结束标签也被称为开放标签和闭合标签。除了上述的双标签之外也存在单标签,比如:<img>、<input>。
英文 | 翻译 | 标签 | 英文 | 翻译 | 标签 |
heading | 标题 | <header></header> | order | 顺序、秩序 | |
body | 身体、正文 | <body></body> | ordered | 有顺序的 | <ol></ol> |
paragraph | 段落 | <p></p> | unordered | 无顺序的 | <ul></ul> |
section | 章、节 | <section></section> | description | 描述 | <dl></dl> |
article | 一篇文章 | <article></article> | term | 术语 | <dt></dt> |
main | 主要 | <main></main> | data | 数据 | <dd></dd> |
aside | 旁边的 | <aside></aside> | quote | 引用 | |
anchor | 锚、定点 | <a></a> | block | 块 | |
strong | 强壮、重要 | <strong></strong> | inline | 行内、内联 | |
emphasis | 强调、重读 | <em></em> | break | 打断 | <br> |
4、常用的章节标签
在 HTML5 版本中,新增了很多语义标签,常见的有:article、header、footer、nav、aside 和 section 标签。
标签 | 描述:标签语义化可以让结构更加有 层次感,更加清晰 |
<h1>~<h6> | 标题,h1~h6 分别表示一级标题~六级标题,字体大小逐级递减。 |
<section> | <section> 标签用来定义文档的某个区域,它和 div 标签不一样,不是用来定义局域样式的,而是用来定义一个明确的主题,通常含有一个标题(h1~h6)。但如果是文章,通常会使用 article 标签来代替。 |
<article> | <article> 标签是用来定义独立于文档且有意义的来自外部的内容,比如:一些投稿文章、新闻记者的文章,或者是摘自其它博客、论坛的信息等。 |
<main> | <main> 标签规定文档的主要内容,<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单。 |
<aside> | <aside> 标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。 |
5、常用的内容标签
6、追加一些小知识
知识 | 描述 |
contenteditable 属性 | 当标签被添加这个属性后,该标签的内容可以直接在前端页面进行编辑,这就很神奇了。 |
style 标签的内容可显示 | style 样式标签,如果将其放置到 body 标签内,可以通过 display=block 的方式在页面上显示出来,如果再给 style 标签设置上 contenteditable 属性,就可以做到在前端界面修改样式后,绑定样式的元素就可以直接同步过来,这也太神奇了。 |
tabindex 属性 | tabindex 是用来控制 tab 的顺序的,值是 number 类型,tab 访问顺序从 1 开始依次往后,0 最后访问,负数不访问。 |
文本行末省略 | 样式设置:white-space:nowrap;text-overflow:ellipsis;overflow:hidden;如果想让鼠标悬浮显示全部值,可以设置 title 属性 |
默认样式reset | 浏览器的默认样式不符合需求时,所以我们可以通过 CSS reset 将浏览器样式干掉。推荐:css reset ,推荐:normalize.css |
大厂reset样式 | 比如找到淘宝,通过控制台检查 element、找到 h1h2 字样的演示右上角的 index 标识复制到自己的项目命名为 reset.css。class 的属性都删掉,剩下的就是默认样式了。鸡贼的呦。 |
table样式设置 | table { border-collapse:collapse;border-spacing:0 },不然 table 表格的样式真的很丑的,老弟。 |