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 ...
随机推荐
- elasticSearch(六)--全文搜索
数据案例 1.匹配查询 a.单词查询 执行match步骤: ·检查field类型:title字段为(analyzed)字符串,所以搜索时,title需要被分析. ·分析查询字符串:QUICK! 经过标 ...
- 接口设置ip跨域
// 允许跨域请求的地址'allowUrls' => [ 'http://localhost:8080', 'http://192.168.2.224', 'http://192.168.2.2 ...
- Java语言程序设计课后小结
运行结果:Size s = Size.SMALL;此时,s = SMALL.Size t = Size.LARGE:此时t = LARGE. System.out.println(s==t).由于s和 ...
- Java基础之标识符和关键字
关键字 标识符 Java所有的组成部分都需要名字.类名.变量名以及方法名都被称为标识符. Java 中标识符是为方法.变量或其他用户定义项所定义的名称.标识符可以有一个或多个字符. 标识符注意点: 在 ...
- redhat用unbound配置DNS
redhat配置unbound 1.配置IP地址 2.配置本地yum 3.安装unbound,没有nslookup命令自行安装bind-utlis 4.配置unbound.conf(vi /etc/u ...
- JS篇(001)-document load 和 document ready 的区别
答案: 页面加载完成有两种事件 1.load是当页面所有资源全部加载完成后(包括DOM文档树,css文件,js文件,图片资源等),执行一个函数 问题:如果图片资源较多,加载时间较长,onload后等待 ...
- nginx服务器有什么作用？什么叫反向代理？为什么要使用反向代理？
1 背景介绍 1.1 Nginx是什么? Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器.其特点是占有内存少,并发能力强,事实上nginx的并发能力确 ...
- 用Python中的hashlib实现md5和sha加密
文章目录 一.用 pandas 读取 Excel 数据 二.加密库 hashlib 三. pandas中的 map() 方法 四.数据加密工具 本文分享知识: pandas读取Excel数据 read ...
- linux 第一节（linux发展）
人间走一趟,天天奔向上. 开源: 1.使用自由 2.复制自由 3.传播自由 4.修改自由 5.创建衍生品自由 6.收费自由 1970年 UNIX 1979 AT&T 1984 gnu(开放源 ...
- Typora --Markdown 文本工具
标题: #+空+name 一级 ##+空+name 二级 ###+空+name 三级 ......------六级 (可排版折叠) 字体: 粗体:两边加** 斜体:两边加* 斜体加粗:*** ...