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 ...
随机推荐
- R8051_simulation
1 下载 git clone https://github.com/risclite/R8051.git 2 编辑文件 mkdir work && mv sim tb flist .. ...
- HttpClient psot和get请求
private String backAllUserInfo(String uid) throws IOException { //this.setInterfaceurl("/idm/js ...
- 781. 森林中的兔子 (Medium)
问题描述 781. 森林中的兔子 (Medium) 森林中有未知数量的兔子.提问其中若干只兔子 "还有多少只兔子与你(指被提问的兔子)颜色相同?" ,将答案收集到一个整数数组 an ...
- Django设计模式(MVC/MVT)
Django设计模式(MVC/MVT) 目的:了解什么是MVC,MVT 思考:为什么要用设计模式 分工.解耦,让不同的代码块之间降低耦合,增强代码的可扩展性和可移植性,实现向后兼容. MVC: M全拼 ...
- 使用骨架创建maven的web工程 maven工程servlet实例之间指定web资源包 实例之导入项目依赖的jar包 maven工程servlet实例之jar包冲突解决
使用骨架创建maven的web工程 操作一样把勾进行勾选找到webapp选项 下一步创建就行 创建好会有显示 目录结构其余的都需要自己手动补齐 有小蓝点的才是一个web项目, 如果上面都正确的话没有 ...
- 记事本默认编码改为UTF-8
前端时间发现用记事本直接创建的记录目标信息的TXT文本再用sublime打开变成了乱码,才发现编码有问题,记事本直接创建的文本编码竟然是ANSI编码. 于是动手将记事本默认编码改为UTF-8. 记事本 ...
- IDEA+SpringBoot整合Swagger2创建API文档
------------恢复内容开始------------ 1.创建SpringBoot项目 2.选择快捷方式创建springboot项目 3.工程文件树形图 4.pom.xml中导入Swagger ...
- Windows D3D渲染到纹理
D3D渲染到纹理 1 #include <d3dx9.h> 2 3 //---------------------------------------------------------- ...
- http和https有什么区别?网站有没有必要启用https
最近在浏览文章的时候发现,很多站长都在纠结网站到底要不要做https的问题.作为个人站长,也一直关注着这块.最近查阅了很多资料,对https也有了更进一步的认识,这里对https的有关问题做了一个总结 ...
- 为什么javac后加.java，java后不加.class？
Javac和java命令的用法:javac需要文件,Java需要执行类或jar文件javac用法: java用法 例子 Java命令后的"test.Test.class"会被认为是 ...