以下均是参考MDN web docs，总结出来的比较重要的知识点，与君共勉。不妥之处，还望大家及时提出！

什么是HTML？

是一种告诉浏览器如何组织页面的标记语言。它由一系列元素组成。

HTML元素

1. 开始标签 eg: <p>

2. 结束标签 eg: </p>

3. 内容 标签中间写的即内容。

4. 元素 以上三者相结合就是一个完整的元素。

着重强调 - 加粗[strong]，斜体[em]，下划线[ins]

<p>追寻<strong>梦想</strong>的<em>脚本</em>不<ins>停歇</ins></p>

追寻梦想的脚本不停歇

块级元素和内联元素

块级元素：通常用于展示页面上结构化的内容，eg：段落、列表、导航菜单、页脚等。一般会独占一行，其后的内容会挤到下一行显示。

内联元素：通常出现在块级元素中并环绕文档内容的一小部分，不会导致换行。

eg: <em>首先</em><em>其次</em><em>最后</em>
首先其次最后

空元素

也可以理解为单标签，eg:<img src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg" height="80"/>

注意：width/height属性一般只改一个，即可等比例缩放。

属性

<p class="edit-p"></p> 其中class即使p元素的属性，格式：一空格二等于号三引号，其中引号是单引号/双引号都可，看个人习惯。

当然，也有一些无值属性，下面的disabled属性使得input框变成灰色，禁止用户输入。

eg:<input type="text" disabled/>

eg:<input type="text" />

超链接-强大的a标签

<p>数理不分家 诺贝尔官方公布<a href="https://www.baidu.com/" title="爱因斯坦简介">爱因斯坦</a>数学成绩单：真学霸无疑</p>

数理不分家 诺贝尔官方公布爱因斯坦数学成绩单：真学霸无疑

统一资源定位符（URL）是一个定义了在网络上的位置的一个文本字符串。使用路径查找文件。
file.html与当前文件是同一目录。
返回上一级目录用 ../ 表示。

注意：

1.链接要尽可能短，尽可能使用相对链接。

2.链接到非HTML资源，要留下清晰的指示。

<p><a href="http://www.example.com/large-report.pdf">下载销售报告（PDF,10MB）</a></p>

下载销售报告（PDF,10MB）

3.下载链接时使用download属性

  1. <a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=zh-CN"
  2.    download="firefox-latest-64bit-installer.exe">
  3.   下载最新的 Firefox 中文版 - Windows（64位）
  4. </a>

下载最新的 Firefox 中文版 - Windows（64位）

4.电子邮件链接

<a href="mailto:nowhere@mozilla.org">向nowhere发邮件</a>

其中，邮件地址是可选的，若你忘了也没关系，用户可以发送给他们选择的地址邮件。

下面是一个包含cc(抄送),bcc,主题和主体的实例：

  1. <a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
  2.   Send mail with cc, bcc, subject and body
  3. </a>

注：使用 ?分隔主URL与参数值，以及使用 &来分隔 mailto:中的各个参数。这是标准URL查询标记方法。

绝对URL和相对URL

projects是根目录

绝对URL：http://www.example.com/projects/index.html其中，http://www.example.com是web服务器站点的域名。

相对URL：pdfs/projext.pdf其中，pdfs是projects的子目录，projext.pdf是pdfs的子目录。（对应的绝对URL是http://www.example.com/projects/pdfs/project-brief.pdf）

HTML文档

  1. <!DOCTYPE html>
  2. <html>
  3.       <head>
  4.             <meta charset="UTF-8">
  5.             <title>我的第一个Blog</title>
  6.       </head>
  7.       <body>
  8.             <p>我们的未来都不是梦，终究会实现！We can do it.</p>
  9.       </body>
  10. </html>

其中，是文档声明。

html元素是根元素，包裹着整个完整的页面。

head元素是一个容器，内容不在页面显示。

meta元素中的charset一般写'UTF-8'就可，它囊括了人类大部分的文字。

title元素设置页面标题。

body元素包含了你访问页面时所有显示在页面上的内容。

HTML中的空白

（看下面代码，实质是只相差一个空格，那些空格不起作用，HTML会将连续出现的空白字符当做一个空格符处理。）

  1. <p>一直在路上，故有无限的可能。</p>
  2. <p>一直在路上，
  3.               故有无限的可能</p>

一直在路上，故有无限的可能。

一直在路上，
故有无限的可能

HTML中的特殊字符

原义字符 等价字符引用
< &lt;
> &gt;
" &quot;
' &apos;
& &amp; 
  1. <p>左家垅<p>的夏天</p>
  2. <p>左家垅&lt;p&gt;的夏天</p>

左家垅

的夏天

左家垅 < p > 的夏天

HTML注释

<!-- <p>用户看不见，但很有用！</p> -->

head标签中有什么？

页面加载完成时，head标签里的内容不会在页面显示，但它的作用是保存页面的一些元数据。

<meta charset="UTF-8">

如果你将charset设置为GBK（中国大陆国标字符集），则页面将会出现乱码。

注：Chrome浏览器会自动修正错误的编码，你或许看不到。

在HTML中应用CSS和JavaScript，分别使用<link>和<script>元素.

<link>经常位于文档的头部，有2个属性，rel="stylesheet"表示这是文档的样式表，href包含了样式表文件的路径。

<link rel="stylesheet" href="my-css-file.css">

<script>放在文档的尾部就可（body之前），这样可确保加载脚本前已解析了HTML内容。

<script src="my-js-file.js"></script>

HTML文字处理

六个标题元素标签如下，其中h1最好使用一次，这是顶级标题，每页不要超过3个标题：

  1. <h1>淋雨一直走</h1>
  2. <h2>张韶涵</h2>
  3. <h3>有梦就别怕痛</h3>
  4. <h4>淋雨一直走</h4>
  5. <h5>是道阳光就该暖和</h5>
  6. <h6>人都应该有梦</h6>

淋雨一直走

张韶涵

有梦就别怕痛

淋雨一直走

是道阳光就该暖和
人都应该有梦

列表

无序列表

  1. <ul>
  2.    <li>鸡蛋</li>
  3.    <li>牛奶</li>
  4.    <li>狗不理</li>
  5. </ul>
  • 鸡蛋
  • 牛奶
  • 狗不理

有序列表，可以嵌套

  1. <ol>
  2.    <li>面条</li>
  3.    <li>米饭</li>
  4.       <ul>
  5.          <li>辣白菜</li>
  6.          <li>红烧肉</li>
  7.       </ul>
  8.    <li>鱼粉</li>
  9. </ol>
  1. 面条
  2. 米饭
    • 辣白菜
    • 红烧肉
  3. 鱼粉

高阶文字排版

描述列表

  1. <dl>
  2.    <dt>内心独白</dt>
  3.       <dd>戏剧中，某个角色对自己的内心活动......</dd>
  4.    <dt>语言独白</dt>
  5.       <dd>戏剧中，某个角色把自己的想法.....</dd>
  6.    <dt>旁白</dt>
  7.       <dd>戏剧中，为渲染幽默或戏剧性效果而进行的.......</dd>
  8. </dl>
内心独白
戏剧中，某个角色对自己的内心活动......
语言独白
戏剧中，某个角色把自己的想法.....
旁白
戏剧中，为渲染幽默或戏剧性效果而进行的.......

其中，描述列表使用 dl 标签 ，每一项用 dt 闭合，每个描述用 dd 闭合。浏览器的默认样式会在描述列表的描述部分和描述术语之间产生缩进。一个术语 dt 可以同时有多个描述 dd。

引用

块引用 用 <blockquote>元素包裹，并在 cite属性里用URL来指向引用的资源。

行内引用 用 <q>元素包裹，并在 cite属性里用URL来指向引用的资源。

缩略语 <abbr>

<p>我们使用 <abbr title="超文本标记语言（Hypertext Markup Language）">HTML</abbr>来组织网页文档。</p>

我们使用 HTML来组织网页文档。

当光标移到HTML上时会出现提示。

上标<sup>和下标<sub>

<p>咖啡因的化学方程式是C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>. 方程式X<sup>2</sup>=4</p>

咖啡因的化学方程式是C8H10N4O2. 方程式X2=4

标记时间和日期

<time datetime="2020-10-10">2020年10月10日</time>

2020年10月10日

HTML布局元素细节

  • <main>存放每个页面独有的内容，每个页面只能用一次，且直接位于 <body>中，最好不要把它嵌套进其他元素。
  • <article>包围的内容即一篇文章。
  • <section>与<article>类似，但<section>更适用与组织页面按其功能分块。
  • <aside>包含一些间接信息（术语条目、作者简介、相关链接等等）。
  • <header>若是body元素的子元素，则是网站的全局页眉；若是article/section的子元素，则是这些部分特有的页眉。
  • <nav>主导航。
  • <fotter>页脚。

无语义元素

<p>少年自由少年狂<span class="editor-note">[编辑批注：此刻舞台灯光应变亮]</span></p>

这里，‘编辑批注’仅对舞台剧导演提供额外指引；没有具体语义。

<div>块级无语义元素，eg:一个电子商务网站页面上有一个一直显示的购物车组件，不能用aside/section，因为它既和主内容没多大关联，也不是页面上主内容的一部分，这种情况下要用div。注意：在没有更好的语义方案时才选择它，尽可能少用，否则维护成本太高。

换行和水平分割线

<br>可在段落中换行。

<hr>在文档中生成一条水平分割线。

实战：规划一个简单的网站(下一篇博客见！)

01 关于HTML基础-构建Web，这些你都知道吗？（很全）的更多相关文章

  1. 2020年12月-第01阶段-前端基础-认识WEB

    认识WEB 1.认识网页 网页主要由文字.图像和超链接等元素构成.当然,除了这些元素,网页中还可以包含音频.视频以及Flash等. 思考: 网页是如何形成的呢? 总结 网页有图片.链接.文字等元素组成 ...

  2. 零基础学python之构建web应用（入门级）

    构建一个web应用 前面的学习回顾: IDLE是Python内置的IDE,用来试验和执行Python代码,可以是单语句代码段,也可以是文本编辑器中的多语句程序. 四个内置数据结构:列表.字典.集合和元 ...

  3. 01 基础版web框架

    01 基础版web框架 服务器server端python程序(基础版): import socket server=socket.socket() server.bind(("127.0.0 ...

  4. 零基础学习Web前端开发

    目录 技术背景 开发环境 学习过程 参考资料 结束语 技术背景 什么是前端开发? 前端开发是创建Web页面或App等将界面呈现给用户的过程.通过使用 HTML,CSS,JavaScript,以及它们衍 ...

  5. 构建Web API服务

    返回总目录<一步一步使用ABP框架搭建正式项目系列教程> 构建动态Web API控制器 ABP可以自动地为应用层生成Web API 层.比如说我们之前创建的应用层: namespace N ...

  6. 《深入浅出Node.js》第8章 构建Web应用

    @by Ruth92(转载请注明出处) 第8章 构建Web应用 一.基础功能 请求方法:GET.POST.HEAD.DELETE.PUT.CONNECT GET /path?foo=bar HTTP/ ...

  7. 基于MVC4+EasyUI的Web开发框架经验总结（2）- 使用EasyUI的树控件构建Web界面

    最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...

  8. Eclipse中使用maven构建web项目中遇到的问题

    构建过程参考: http://blog.csdn.net/smilevt/article/details/8215558/ http://www.cnblogs.com/dcba1112/archiv ...

  9. Node.js高级编程读书笔记 - 4 构建Web应用程序

    Outline 5 构建Web应用程序 5.1 构建和使用HTTP中间件 5.2 用Express.js创建Web应用程序 5.3 使用Socket.IO创建通用的实时Web应用程序 5 构建Web应 ...

  10. 高效构建Web应用 教你玩转Play框架 http://www.anool.net/?p=577

    Play 框架是一个完整的Web应用开发框架,覆盖了Web应用开发的各个方面.Play 框架在设计的时候借鉴了流行的 Ruby on Rails 和 Grails 等框架,又有自己独有的优势.使用 P ...

随机推荐

  1. ID生成器实现方式的优缺点比较以及最优的ID生成器原理剖析

    引用:https://blog.csdn.net/luoyang_java/article/details/90679456 本文的重点主要是ID发号器相关的知识,介绍了雪花算法,以及他的基本原理和实 ...

  2. oracle 高级队列

    转载:http://www.idevelopment.info/data/Oracle/DBA_tips/Advanced_Queuing/AQ_2.shtml Overview This artic ...

  3. SpringBoot 配置内部tomcat https双向验证

    1.在application.properties或者application.yml配置文件中加入 server: port: 8443 ssl: key-store: classpath:xxxx. ...

  4. egg开发系列--模板语法

    在这里列一下 nunjucks 常用的模板内容 首先需要在plugin.js 当中引入 exports.nunjucks = { enable: true, package: 'egg-view-nu ...

  5. APP数据指标体系分析

    一.APP的数据指标体系主要分为五个维度,包括用户规模与质量.参与度分析.渠道分析.功能分析和用户属性分析. 1.用户规模和质量 用户规模和质量是APP分析最重要的维度,其指标也是相对其他维度最多,数 ...

  6. Ubuntu PostgreSQL数据库忘记密码

    1. find / -name pg_hba.conf2. sudo vi /etc/postgresql/13/main/pg_hba.conf 3. 拉到最下面,把postgres所在行的md5改 ...

  7. 1.Easy Touch 3.1

    Easy Touch 3.1 Hedgehog Team(导入 Easy Touch 插件时自动在菜单栏) Extensions: 拓展 Adding a new joytick: 虚拟摇杆 Addi ...

  8. Linux详解

    什么是操作系统?1.操作系统:(Operating System,OS)是计算机系统中的一个系统软件,它们管理和控制计算机系统中的硬件及软件资源,为用户提供一个功能强大.使用方便的和可扩展的工作环境. ...

  9. maven（web）项目,不自动出现overlays的上级web项目

    不自动出现overlays目录,如下: 上面选择一项, 最后部署至tomcat或是其他中间件上面,overlays的上关联的上级项目就会出现

  10. ORACLE 数据库备份脚本（数据泵2-指定用户）

    #!/bin/bash export NLS_LANG=AMERICAN_AMERICA.ZHS16GBK #定义字符集RQ=`date +20%y-%m-%d` #创建数据泵目录directory, ...