01 关于HTML基础-构建Web，这些你都知道吗？（很全）
以下均是参考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>
3.下载链接时使用download属性
<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=zh-CN"
download="firefox-latest-64bit-installer.exe">
下载最新的 Firefox 中文版 - Windows（64位）
</a>
下载最新的 Firefox 中文版 - Windows（64位）
4.电子邮件链接
<a href="mailto:nowhere@mozilla.org">向nowhere发邮件</a>
其中，邮件地址是可选的，若你忘了也没关系，用户可以发送给他们选择的地址邮件。
下面是一个包含cc(抄送),bcc,主题和主体的实例：
<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">
Send mail with cc, bcc, subject and body
</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文档
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一个Blog</title>
</head>
<body>
<p>我们的未来都不是梦，终究会实现！We can do it.</p>
</body>
</html>
其中，是文档声明。
html元素是根元素，包裹着整个完整的页面。
head元素是一个容器，内容不在页面显示。
meta元素中的charset一般写'UTF-8'就可，它囊括了人类大部分的文字。
title元素设置页面标题。
body元素包含了你访问页面时所有显示在页面上的内容。
HTML中的空白
（看下面代码，实质是只相差一个空格，那些空格不起作用，HTML会将连续出现的空白字符当做一个空格符处理。）
<p>一直在路上，故有无限的可能。</p>
<p>一直在路上，
故有无限的可能</p>
一直在路上，故有无限的可能。
一直在路上，
故有无限的可能
HTML中的特殊字符
| 原义字符 | 等价字符引用 |
|---|---|
| < | < |
| > | > |
| " | " |
| ' | ' |
| & | & |
<p>左家垅<p>的夏天</p>
<p>左家垅<p>的夏天</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个标题：
<h1>淋雨一直走</h1>
<h2>张韶涵</h2>
<h3>有梦就别怕痛</h3>
<h4>淋雨一直走</h4>
<h5>是道阳光就该暖和</h5>
<h6>人都应该有梦</h6>
淋雨一直走
张韶涵
有梦就别怕痛
淋雨一直走
是道阳光就该暖和
人都应该有梦
列表
无序列表
<ul>
<li>鸡蛋</li>
<li>牛奶</li>
<li>狗不理</li>
</ul>
- 鸡蛋
- 牛奶
- 狗不理
有序列表，可以嵌套
<ol>
<li>面条</li>
<li>米饭</li>
<ul>
<li>辣白菜</li>
<li>红烧肉</li>
</ul>
<li>鱼粉</li>
</ol>
- 面条
- 米饭
- 辣白菜
- 红烧肉
- 鱼粉
高阶文字排版
描述列表
<dl>
<dt>内心独白</dt>
<dd>戏剧中，某个角色对自己的内心活动......</dd>
<dt>语言独白</dt>
<dd>戏剧中，某个角色把自己的想法.....</dd>
<dt>旁白</dt>
<dd>戏剧中，为渲染幽默或戏剧性效果而进行的.......</dd>
</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，这些你都知道吗？（很全）的更多相关文章
- 2020年12月-第01阶段-前端基础-认识WEB
认识WEB 1.认识网页 网页主要由文字.图像和超链接等元素构成.当然,除了这些元素,网页中还可以包含音频.视频以及Flash等. 思考: 网页是如何形成的呢? 总结 网页有图片.链接.文字等元素组成 ...
- 零基础学python之构建web应用（入门级）
构建一个web应用 前面的学习回顾: IDLE是Python内置的IDE,用来试验和执行Python代码,可以是单语句代码段,也可以是文本编辑器中的多语句程序. 四个内置数据结构:列表.字典.集合和元 ...
- 01 基础版web框架
01 基础版web框架 服务器server端python程序(基础版): import socket server=socket.socket() server.bind(("127.0.0 ...
- 零基础学习Web前端开发
目录 技术背景 开发环境 学习过程 参考资料 结束语 技术背景 什么是前端开发? 前端开发是创建Web页面或App等将界面呈现给用户的过程.通过使用 HTML,CSS,JavaScript,以及它们衍 ...
- 构建Web API服务
返回总目录<一步一步使用ABP框架搭建正式项目系列教程> 构建动态Web API控制器 ABP可以自动地为应用层生成Web API 层.比如说我们之前创建的应用层: namespace N ...
- 《深入浅出Node.js》第8章 构建Web应用
@by Ruth92(转载请注明出处) 第8章 构建Web应用 一.基础功能 请求方法:GET.POST.HEAD.DELETE.PUT.CONNECT GET /path?foo=bar HTTP/ ...
- 基于MVC4+EasyUI的Web开发框架经验总结（2）- 使用EasyUI的树控件构建Web界面
最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...
- Eclipse中使用maven构建web项目中遇到的问题
构建过程参考: http://blog.csdn.net/smilevt/article/details/8215558/ http://www.cnblogs.com/dcba1112/archiv ...
- Node.js高级编程读书笔记 - 4 构建Web应用程序
Outline 5 构建Web应用程序 5.1 构建和使用HTTP中间件 5.2 用Express.js创建Web应用程序 5.3 使用Socket.IO创建通用的实时Web应用程序 5 构建Web应 ...
- 高效构建Web应用 教你玩转Play框架 http://www.anool.net/?p=577
Play 框架是一个完整的Web应用开发框架,覆盖了Web应用开发的各个方面.Play 框架在设计的时候借鉴了流行的 Ruby on Rails 和 Grails 等框架,又有自己独有的优势.使用 P ...
随机推荐
- 【STM32】串口收发驱动Drv_Uart|学习笔记
一.什么事串口? 大家常说串口,其实串口有很多种UART,SPI,IIC都是串口,一般大家口中的串口就是UART(Universal Asynchronous Receiver/Transmitter ...
- XJTUOJ #1323. [L2-2]三倍满世界
题目 https://oj.xjtuicpc.com/problem/1323 思路 题目说明有点绕. 然后我们仔细观察一下,这个东西很显然是一个天然的树形结构. 我们可以把一个空间(或者一个数)当成 ...
- Codeforces Round #781 (Div. 2) - D. GCD Guess
GCD + 位运算 [Problem - 1665D - Codeforces](https://codeforces.com/problemset/problem/1627/D) 题意 交互题,有一 ...
- unittest框架数据驱动
一.目录 数据驱动概述 环境准备 使用unittest和ddt驱动 使用数据文件驱动 使用Excel驱动 使用XML驱动 使用MySQL驱动 二.数据驱动概述 数据驱动的定义: 相同的测试脚本使用不同 ...
- stm32的boot0和boot1
stm32的boot0和boot1 TM32三种启动模式对应的存储介质均是芯片内置的,它们是: 1)用户闪存 = 芯片内置的Flash.2)SRAM = 芯片内置的RAM区,就是内存啦.3)系统存储器 ...
- 2022-3-16内部群每日三题-清辉PMP
1.项目经理正在为客户管理一个跨国项目,拟采用最新技术替换其电信基础设备.项目经理得知,在某些国家,必须遵循特定的环境规定来处置被替换的硬件.在制定商业论证时,未考虑到这些规定,项目经理应该怎么做? ...
- 数据驱动DDT（Data-Driven Tests）：测试数据的参数化
准备第三方库: 首先安装ddt库,其次在脚本中引入ddt 打开官网 https://pypi.org/project/ddt/ from ddt import ddt,data,unpack @ddt ...
- Study python_03
函数 基本思想---函数是用来重复使用的 def shili(input_): print("我了个去 %s"%input_) shili('你竟然') 当一个函数中即有默认参数, ...
- 国内 IoT 物联网平台终局的思考：未来只会有 3家
随着物联网成为国家十四五规划的新型基础设施,许多企业纷纷投资物联网赛道,希望能提前布局物联网平台,打造一个新的生态出来. 十年后,那些投入重金的物联网平台最终能存活下来几家呢? 01. 公有云IoT平 ...
- TypeScript系列 -> 遇到报错 Cannot find name ‘console‘. Do you need to change your target library?ging the ‘lib‘ compiler option
学习ts遇到的报错 Cannot find name 'console'. Do you need to change your target library?ging the 'lib' compi ...