为什么说是从0.5开始学前端：
因为高中时作者已经学会HTML的基本语法，前后端CSS/JavaScript/C/C++/Python都有一定的基础。现在自己有了几个想做的原创H5、小程序项目,预计3月掌握好基本的框架,就可以开始着手写前后端逻辑。所以本文节奏会比较快，语法方面不会太深，但会讨论一些细节上的技巧。以尚硅谷网课为大纲，引用部分百度百科.
HTML系列（1）
实体
标准通用标记语言下的一个应用，相当于C++的保留字，不允许在文本中使用。但如果需要使用，可加&/#+实体名称+分号。
<>&号对于Markdown适用，#号不适用。
实体对大小写是敏感的，有一些À，Â此类特殊字母名称都不一样。并且假若一段话连续输入多个空格，html只会识别出一个空格。在此时需要打出
注意c常用实体名称都要记，这一点可在开发中慢慢熟悉。
常见实体名称：
 :空格
>:大于号
<:小于号
&and:and符号
©:版权符号
META标签
通常所说的META标签，是在HTML网页源代码中一个重要的html
标签。META标签用来描述一个HTML网页文档的属性，例如作者
日期和时间、网页描述、关键词、页面刷新等。
META标签主要用于设置网页的元数据，HTML5之前META标签主要只有name属性和http-equiv属性。HTML5新增属性中name主要有viewport(优化移动浏览器的显示)、format-detection（忽略电话号码/邮箱）、浏览器内核控制、WebApp全屏模式、隐藏状态栏、设置状态栏颜色、优化不同浏览器的兼容性。http-equiv中主要有优先使用最新版本的IE和Chrome、转码申明，还有charset信息参数（设置网页字库）.
charset
定义文档的字符编码。这一块比较简单，记GB2312和UTF-8其实就够了。
<charset = GB2312><!--简体中文-->
<charset = BIG5><!--繁体中文-->
<charset = ISO-8859-1><!--英文-->
<charset = UTF-8><!--通用编码-->
name
设置元数据的名称。
name的值包括application-name,author,description,generator,keywords。
content
设置元数据的值。一般来讲name和content会放在一起声明：
<meta name="name" content="value">
content设置的好，在搜索引擎中的关联性就越好，所以content一般会像某宝商品一样去设置多个关键字。
我们可以找到B站网页源码观察一下一般是怎么设置：
http-equiv
content-type：用于定义网络文件的类型和网页的编码，决定接收方的编码读取方式。
<meta http-equiv="content-type" content="text/html; charset=utf-8">
default-style：默认值，可自行查阅文档研究
refresh：将页面重定向至另一个网站。
<meta http-equiv="refresh" content="3,url=http://www.baidu.com">
这段代码则表示3s后页面将重定向至百度.
scheme*
html5已经删除该功能，但可作为参考了解：
<meta scheme="format | URI">
URI用于标识字符串的名称。是不是看起来就好老的感觉…
<!DOCTYPE html>
<html>
<head>
<meta name="date" content="2009-01-02" scheme="YYYY-MM-DD">
<meta name="identifier" content="0-2345-6634-6" scheme="ISBN">
</head>
<body>
</body>
语义化标签
标签语义化可以提升源码的可读性，呈现比较好的网页结构，便于后续的维护。
什么意思呢？也就是说在开发中html担当的是一个结构的角色，而不是样式，通过语义化来在html中强调内容的结构，而不需要去顾虑内容的外观，毕竟外观可以到CSS层面去修改。所以说，语义化应是一种写作风格，甚至是一种代码写作的思想。
简单地说，<h1>~<h6>其实就是一种语义化。
比如说搜索引擎也会查询h1的名称（SEO），这就是网页中最重要的内容，重要的前提就是少。那么一般情况下，h1在一个网页中只能有一个，因为假若h1有好多个，搜索引擎不能正确分析内容的重要性，显示加权反而是会靠后的，往<h2>的方向去靠了。这也是WEB开发中要注意的.
HTML语义元素有大概100来个，分为结构体、文本、一致元素，使用时可查阅帮助文档.以下是常见元素.
<header>网页头部
<main>网页的主体
<footer>网页的底部
<nav>网页导航
<aside>和主体相关的其他内容
<article>一个独立的文章
<section>一个独立的区块，上述标签不能表示时再使用
<p>标签的p表示一个段落，相当于一个块元素.
<em>标签是斜体。<strong>是粗体。强调内容.
<blockquote>表示引用.<q>表示一个短引用.
<br>表示换行.
开发时请注意charset避免乱码.
块和行内
两大重要元素：块元素和行内元素。
块元素对网页进行布局，着重宏观上的布置；行内元素主要用于点缀文字，着重细节上的修饰.
一般情况下，我们会在块元素中插入行内元素，但不会在行内元素中放置块元素。这样做是为了不本末倒置，造成很奇怪的效果。
事实上假若写<strong>内部包含<h1>，外观上并无大碍，这是因为浏览器会自动对不符合规范的语句进行修正（加载到内存后再修正）。所以，写一段可靠的源代码才能避免浏览器性能降低，甚至是出错。对于在内存中修正的内容，我们可以F12打开网页的开发者工具————element进行查看。
列表
html的列表主要有无序列表和有序列表两种.
无序列表主要使用<ul>和<li>两种标签.使用时<ul>包裹<li>。
<ul>设置列表样式等，<li>分块.嵌套无序列表只需ul包li即可。
有序列表使用<ol>包裹<li>
<ol>可指定数字开始排列，嵌套有序列表层级图标不会像无序列表一样变化.
（会用Markdown就非常简单，当然任务列表属于Markdown的特有功能）
超链接
超链接使用<a>标签，有三个主要属性，分别是href/title/target。
使用时语法大致如下：
<a href="http://www.baidu.com" title="百度">Baidu</a>
href是链接地址（内外部都可以），title是光标提示，target是重定向链接，_self和_blank作为最常出现的属性值可以记，前者是在当前页面中打开新链接，后者在新页面中打开.
相对路径
超链接跳转若需要进入服务器内部，一般会使用相对路径。
相对路径一般以.或…开头，./等于当前文件所在的目录。
部署好网页目录后在链接中写./xxx.html即可，和bash命令是一个道理。
另外还可以通过为标签设置id属性实现网页位置的跳转，比如实现回到顶部功能：
<a id ="bottom"href="#">回到顶部</a>
<a href="#bottom">去底部</a>
其中，#作为超链接的占位符.
图片标签
使用img标签引入外部图片。img是一个自结束标签。图片标签主要有src和alt两种属性，src是图片的链接，可以是内部链接和外部链接，使用内部链接时可以使用网页文件目录；alt是图片的描述.
alt属性一般不显示。某些浏览器在文件无法加载的情况下会显示该属性；同时，SEO通过alt属性识别关键字.
<img width ="200" height ="200" src="./img/1.gif" alt="啥都没有,rick and roll">
width和height两个属性指定了图片的宽度和高度。请注意，同时指定width和height属性将无法等比例缩放图片，而可能导致图片的压缩或扩张。但在同是标记语言的Markdown上这两个属性不适用，需要调用html代码.
实际开发中亦不建议指定width和height参数，因为直接指定数值是需要微调的，这样往往不易协调设计网页，进程效率低下。所以开发前的设计人员应当提前熟悉项目，沟通好图片大小直接放置.
图片格式
HTML支持JPEG/GIF/PNG/WEBP/BASE64的图片格式。
JPEG常用于色彩丰富的图片的保存，缺点是不支持透明.
GIF展示的颜色少，支持简单透明，支持动态.
PNG支持颜色多，支持复杂透明，不支持动图，为网页而生.
WEBP具有上述所有优点。缺点是兼容性较差，比如上传头像时很多网页不接受WEBP.
BASE64主要是将图片转换为字符，和网页一起加载的比较重要的图片会使用BASE64。
挑选图片格式时，以占存小，效果优为挑选原则.
6447
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
