freeCodeCamp 旅途1 - HTML/CSS

2019-04-29 本文已影响0人 HJSD

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; } }