HTML 简介
HTML 是英文 Hyper Text Markup Language（超文本标记语言）的缩写。HTML 和其他编程语言不一样，有自己的语法，HTML 只是标记语言，是用各种标签表示语义的。熟练的使用标签来表示特定语境的语义，有助于让网络蜘蛛能更好读懂网站的展示意图，公司的业务，以及网站的优化。
学习 HTML 就是学习各种标签，掌握常用标签及语义，能更好的介绍网站给网络蜘蛛。
HTML 是不区分大小写的；注释符号是 <！-- 我是注释 -- >；标签有单标签、双标签，双标签是有闭合标签的<></>。
标题标签 h1~h6
标题标签是从 h1 到 h6 的，大标题 到 小标题，字体从大到小。h1元素通常被用作主标题，h2元素通常被用作副标题，h3、h4、h5、h6元素，分别用作不同级别的标题。
<h1>我是标题</h1>
<h2>我是标题</h2>
<h3>我是标题</h3>
<h4>我是标题</h4>
<h5>我是标题</h5>
<h6>我是标题</h6>
段落标签 p
p 是 paragraph 的缩写，通常被用来创建一个段落，就和写作文一样。
HTML5
HTML5 是 HTML 的扩展版本，引入了很多更具描述性的 HTML 元素，例如：header、footer、nav、video、article、section等等。其中 main元素让搜索引擎和开发者瞬间就能找到网页的主要内容。
后续补充 HTML5 标签。
图片标签 img
用img元素来为你的网站添加图片，其中src属性指向一个图片的地址。注意：img元素是没有结束标记的，即单标签。
所有的img元素必须有alt属性，alt属性的文本是当图片无法加载时显示的替代文本，这对于通过屏幕阅读器来浏览网页的用户非常重要。
<img src="https://www.your-image-source.com/your-image.jpg" alt="作者站在沙滩上竖起两个大拇指">
链接标签 a
你可以用a锚点（Anchor，简写 a）来实现网页间的跳转。锚点需要一个href属性指向目的地，它还需要有锚点文本，例如：
<a href="https://freecodecamp.one">传送至 freecodecamp.one</a>
链接标签的另一个用法用于页面内导航跳转，设置锚点的href属性值为井号#加上想跳转区域对应的id属性值，这样就可以创建一个内部跳转。id是用来描述网页元素的一个属性，它的值在整个页面中唯一。
<a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2>
链接标签有个target属性，属性值有_blank、_self(默认)，默认点击在本页面跳转，会覆盖原网页；设置另一个值点击会在新标签页打开。
链接里面可以嵌套图片，图片就成了链接。
<a href="#"><img src="http://cdn.freecodecamp.cn/running-cats.jpg" alt="三只萌萌的小猫"></a>
无序列表 ul
HTML 有一个特定的元素用于创建无序列表unordered lists（缩写 ul）。
无序列表以<ul>开始，中间包含一个或多个<li>元素，最后以</ul>结尾。
<ul>
<li>睡觉、打盹</li>
<li>爱美</li>
<li>新鲜美味又营养丰富的食物</li>
</ul>
有序列表 ol
HTML 有一个特定的元素用于创建有序列表ordered lists（缩写 ol）。
有序列表以<ol>开始，中间包含一个或多个<li>元素，最后以</ol>结尾。
<ol>
<li>讨厌吹风机的声音</li>
<li>讨厌柠檬的味道</li>
<li>讨厌剪指甲</li>
</ol>
表单标签 input
创建表单一般需要添加在<form></form>里。input 标签会根据 type 的值不同，显示不同的表单。
// 输入框 预设先有值
<input type="text" placeholder="this is placeholder text">
// 文本输入框设置为 必填项
<input type="text" required>
// form 标签里面添加表单提交的目的地，提交的方式
<form action="/url-where-you-want-to-submit-form-data"></form>
// 单选按钮
<label for="indoor"> <input type="radio" id="indoor" name="indoor-outdoor">Indoor </label>
// 复选框
<label for="name1"><input type="checkbox" id="name1" name="personality">name1</label>
<label for="name2"><input type="checkbox" id="name2" name="personality">name2</label>
<label for="name3"><input type="checkbox" id="name3" name="personality">name3</label>
// 默认选定
<input type="radio" name="test-name" checked>
提交按钮 button
input 按钮和 button 的区别：关闭标签设置；值在起始、关闭标签之间；可为button元素添加CSS样式；鼠标单击事件、弹出信息的代码可直接写在<button>标签中。
<button type="submit">this button submits the form</button>
文档类型 DOCTYPE
<!DOCTYPE ...> 是用来告诉浏览器你使用的是 HTML 的哪个版本，"..." 部分就是版本的数字信息。<!DOCTYPE html>对应的就是 HTML5。
!和大写的DOCTYPE是很重要的，特别是对于老的浏览器。但 html 大写小写都可以。
<!DOCTYPE html> ----------- 基本文档结构
<html>
<head>
<!-- metadata elements --> ------- 元数据
</head>
<body>
<!-- page contents --> -------- 网页内容
</body>
</html>
CSS
CSS 的全称是 Cascading Style Sheet（层叠样式表），它主要用来控制网页的样式。
注意，CSS 的选择器区分大小写，因此要谨慎使用大写。
CSS 允许你轻松控制以下样式：
| 样式名称 | CSS 属性名 |
|---|---|
| 颜色 | color |
| 背景 | background |
| 字体 | font |
| 位置 | position |
| 显示 | display |
| 边框 | border |
| 内边距 | padding |
| 外边距 | margin |
| 行高 | line-height |
| 装饰 | text-decoration |
| 过渡 | transtion |
| 变化 | transform |
| 动画 | animation |
使用 CSS 样式主要有三种方式：
- 内联样式--你可以直接在 HTML 元素里使用style属性。
- 内部样式--你可以在style标签里面声明样式规则。
- 外部样式--你可以创建一个.css文件，然后在文件中编写样式规则，最后在文档中引用该文件。
更改文本颜色 color
改变h2元素为蓝色的方法：<h2 style="color: blue;">CatPhotoApp</h2>
使用 6 个十六进制的数字来代表颜色，每两个数字控制一种颜色，分别是红（R），绿（G），蓝（B）。例如，#000000代表着黑色。
使用缩写的十六进制编码，红色的#FF0000十六进制编码可以缩写成#F00。
使用 RGB 值为元素上色，黑色rgb(0, 0, 0)。
类选择器 class
CSS 的class具有可重用性，可应用于各种 HTML 元素。
在 style 样式区域声明里，class 需以.开头。而在 HTML 元素里，class 属性的前面不能添加.。
<style>
.red-text { color: red; }
</style>
改变字体 font
字体大小由font-size属性控制，h1 { font-size: 30px; }。
通过font-family属性，可以设置元素里面的字体样式h2 { font-family: monospace, sans-serif;}。
引入字体<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">。
改变图片宽度 width
可以直接在<img>标签里改；还可以在CSS中修改大小，.smaller-image { width: 100px; }。
修改宽度是height。
添加边框 border
CSS 边框具有style，color和width属性。
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
} ------>> 多个类可以用到同一个元素中 : <img class="class1 class2">
border-radius可以添加圆角边框，单位是像素或者是百分比。
border-radius: 10px; 或者 border-radius: 50%;。
背景 background
修改背景颜色.silver-background { background-color: silver; }。
ID 选择器
除了class属性，每一个 HTML 元素也都有id属性，但是 id 是唯一的。
声明 class 的时候必须在名字前插入.符号。同样，在声明 id 的时候，也必须在名字前插入#符号。#cat-photo-form { background-color: green; }
内边距 padding
每个 HTML 元素周围的矩形空间由三个重要的属性来控制：padding（内边距），margin（外边距）和border（边框）。
padding控制着元素内容与border之间的空隙大小。 .blue-box { padding: 20px; }
CSS 允许你使用padding-top，padding-right， padding-bottom和padding-left属性来设置四个不同方向的padding值。可以简写为，padding: 上 右 下 左。
外边距 margin
margin（外边距）控制元素的边框与其他元素之间的距离。.blue-box { margin: 20px; }
如果你设置元素margin为负值，元素会变得更大。
CSS 允许你使用margin-top，margin-right，margin-bottom和margin-left属性来设置四个不同方向的margin值。可以简写为，margin: 上 右 下 左。
属性选择器
[attr=value]属性选择器使用特定的属性值来匹配和设置元素样式。
[type='checkbox'] { margin: 10px 0 15px; }
绝对单位与相对单位
像素px是一种长度单位，来告诉浏览器应该如何调整元素大小和空间大小。其实除了像素，CSS 也有其他不同的长度单位供我们使用。
单位长度的类型可以分成 2 种，一种是相对的，一种是绝对的。例如，in和mm分别代表着英寸和毫米。绝对长度单位会接近屏幕上的实际测量值，不过不同屏幕的分辨率会存在差异，可能会导致一些误差。
相对单位长度，就像em和rem，它们会依赖其他长度的值。就好像em的大小基于元素的字体的font-size值，如果你使用em单位来设置font-size值，它的值会跟随父元素的font-size值来改变。
注意：有些单位长度选项是相对视窗大小来改变值的，符合了响应式 web 的设计原则。
样式的继承与优先级
字体、颜色等可以继承自父元素。
Class 选择器的优先级高于继承样式。在<style>标签里面声明的class顺序十分重要。第二个声明始终优于第一个声明。
ID 选择器优先级高于 Class 选择器。
内联样式的优先级高于 ID 选择器。
Important 的优先级最高。
创建 CSS 变量
创建一个 CSS 变量，你只需要在变量名前添加两个破折号，并为其赋值，例子如下：--penguin-skin: gray;。
使用 CSS 变量
创建变量后，CSS 属性可以通过引用变量名来使用它的值：background: var(--penguin-skin);。
给 CSS 变量附加回退值，background: var(--penguin-skin, black);。
层级 CSS 变量
你创建的变量，不但可以在你声明变量的元素里面使用，同时也可以在该元素的子元素里面使用。这种效应称为cascading（层叠）。
因为层叠的效果，CSS 变量通常会定义在:root元素里。在:root创建的变量，在整个网页里面都能生效。
当你在:root里创建变量时，这些变量的作用域是整个页面。如果在元素里创建相同的变量，会重写:root变量设置的值。
使用媒体查询更改变量
CSS 变量可以简化媒体查询的方式。例如，当屏幕小于或大于媒体查询所设置的值，通过改变变量的值，那么应用了变量的元素样式都会得到响应修改。
@media (max-width: 350px) { :root { --penguin-size: 200px; --penguin-skin: black; } }
网友评论