《Head First HTML 与 CSS》，2020寒假宅家看完，作为入门书很不错，内容简单易懂，适合我这种0基础小白。

以后记不住还是去 w3school 吧，下面只是边看边写的东西。

HTML基本元素及属性

HTML建立结构(hypertext markup language)

元素

<html> </html>
<head> </head>
<body> </body>
<title> </title>
以上为4个必不可少的元素。

html5需要在开头加上<!DOCTYPE html>,在head中加上<meta charset='utf-8'>，基本上都使用utf-8编码。
<link>链接样式，用法<link rel="stylesheet" href="xxxx.css">。多个样式表，顺序很重要。
<link>元素可以增加media属性来进行媒体查询。media中还可以有其他属性，如min-device-width，max-device-width，及显示方向orientation。
还可以在CSS中进行媒体查询，使用@media确定页面使用的规则，将不匹配的规则忽略。

<style></style>：在html文件中建立样式。
<h1> </h1>：六个标题，从h1到h6。
<p> </p>：段落。
<a href="xxxx.html"> </a> <a> 元素作用：链接到指定路径，使用id属性可以链接到锚点。target="_blank"表示新建标签页打开。

<a target="_blank" href="http://wickedlysmart.com/buzz/index.html#Coffee"
                  title="Read all about caffine on the Buzz">    // #后面为锚点 target="_blank"为新建标签页

<img src="xxxx.jpg">：插入图片。
<em> </em> ：强调，变为斜体(浏览器决定如何强调)。
<q> </q>：短引用。<blockquote> </blockquote>：长引用，可以包含<q>和<p>。
<br>：换行。
<li> </li>：列表项。
<ol> </ol>：包围列表项成为有序列表。
<ul> </ul>：包围列表项成为无序列表。
<code> </code>：用来显示代码。
<time> </time>：表示时间或日期。
<strong> </strong>：标记希望特别强调的文本。
<pre> </pre>：使浏览器按照你输入的方式原样显示文本。

<div>：创建块元素的不同的逻辑区。
<span>元素，创建内联字符和元素的逻辑分组。

元素分为：块元素、内联元素、void元素。

&：实体字符，转义字符，html用到的字符需要使用是转义字符来输入，如&lt表示<，&gt表示>

属性

属性名+等于号+双引号括起来的属性值。

扫描二维码关注公众号，回复： 9310803 查看本文章

href：(hypertextreference)引用外部链接，表示界面和链接的关系。
创建相对连接时文件用'/'分隔，'../'返回上一级目录，./当前目录，/根目录。
src(source)引用外部资源，用所引用内容覆盖区域。
type，type="text/css"，可以不输入。
id属性：添加目标。使用#+目标链接到该位置。
title属性：添加描述。
target元素<a>的属性，规定在何处打开链接，如target="_blank"。
alt图像无法加载时显示的预留文本。
width,height：指定块元素的宽度，高度。

HTML5

新增元素header：指定页眉或区块和文章的首部。section：通用程度高于article低于div，指示区块是有相关内容构成的结构。 artical：指示可以独立于页面进行重发和分发的内容。 nav：导航元素。 footer：指定页脚。

video：包括controls，autoplay，loop等布尔属性，控制有无控件，自动播放，自动循环。width，height属性，preload属性，以及src，poster指定视频与海报。
mark：突出显示某些文本。audio：在页面中包含声音。progress：显示任务完成度。meter：显示某范围的度量。canvas：显示用JavaScript绘制的图像和动画。figure：定义类似照片、图表甚至代码清单等独立的内容。

html表单

<form></form>：创建表单，<form action="http://xxxx.com/xx/xx.php" method="POST">。action属性包含服务器脚本url。method指定打包数据的方法。

表单中有<input>元素，input可以包含：
文本输入<input type="text" name="xxx">。value属性可以为单行文本输入控件提供初始值。
提交输入<input type="submit">。value属性可以改变按钮上显示的文本。
单选钮输入<input type="radio" name="notorhot" value="not">。
复选框输入input type="checkbox" name="spice" value="Salt">。可以使用checked属性为单选或复选框提供默认值。
email输入<input type="email" name="xx">。
tel输入<input type="tel" name="xx">。
URL输入<input type="url" name="xx">。
日期输入<input type="date" name="xx">。
密码输入<input type="password" name="secret">。
文件输入<input type="file" name="doc">。
数字输入<input type="number" min="0" max="20" name="xx">。
范围输入<input type="range" min="0" max="20" step="5" name="xx">。
颜色输入<input type="color" name ="xx">。
input为void元素，无结束标记，每个input都有自己的name属性。提交时服务器会使用name打包所有数据。
可以为<input>提供placeholder属性给用户提示，属性值以浅色显示到控件。提供required属性使某个域必须有值，否则无法提交表单。

文本区<textarea name="comments" rows="10" cols="48"></textarea>。放在元素中的内容会成为默认文本。
可以使用maxlength限制text的字符数，但无法限制textare的字符数。

任何表单元素都可以使用label元素来加标签，使用时各控件必须要有惟一的id。

    <input type="radio" name="hotornot" value="hot" id="hot">
        <label for="hot">hot</label>
    <input type="radio" name="hotornot" value="hot" id="not">
        <label for="not">not</label>

        <label for="bags">Number of bags:</label>
    <input type="number" id="bags" name="bags" min="1" max="10">

fieldset为表单上公共元素分组，legend为各个分组命名。

菜单：

<select name="characters">
    <option value="1">1</option>
    <option...>
    ...
</select>

为<select>增加multiple属性可以变为多选菜单，multiple同样为布尔属性。

浏览器向服务器发送数据的两种方法：
POST：打包发送对用户不可见。GET：打包发送并把请求追加到url最后。
GET一般用于需要加书签的结果界面，POST用于私有数据或不希望加书签的界面。如果使用textare或文件输入file则应使POST，因为可能会发送大量数据。

由于表单有一个表格结构，通常使用CSS表格显示来建立表单布局。

创建自己的网站

域名：xiaodi.com
网站名：www.xiaodi.com、home.xiaodi.com等

URL(uniform resourse locators)：统一资源定位符。
HTTP(hypertext transfer protocal)：超文本传输协议。
协议+网站+绝对路径=URL
http://+www.xxx.com+/xxx.html '/'表示根。

CSS的规则及属性

CSS用来建立表现(cascading style sheets)

CSS选择器

css通过选择器给html元素指定样式。
类选择器.class {}，伪类选择器a:hover，id选择器#id {}，伪元素选择器p:first-letter。
子孙选择器：div h2{}父子之间有一个空格，默认会选择所有子孙。而使用>例如#elixirs>h2会选择elixirs的直接孩子。
属性选择器

img[width] {border: black;}
img[alt~="flowers"] {border: red thin solid;}

按兄弟选择

h1+p {}    /*选择所有跟在<h1>元素后的段落*/

结合选择器

div#xxx > blockquote p:first-line {}    /*id为xxx的直接儿子blockquote的p子孙的伪元素first-line*/

类、伪类

类(class)：可以为元素指定类，然后分类设置css属性。
伪类(pseudo-class)：可以使用伪类来单独地为各个状态指定样式。最常用于<a>元素。
浏览器自动确定的元素属于哪些伪类，不用写在HTML中，例如a:link,a:visited,a:hover,a:focus,a:active,'first-child',last-child等。

规则

    <style>
      h1, h2 {
          font-family: sans-serif;
          color: gray;
      }
      h1 {
        /*text-decoration: underline;*/
        border-bottom: 1px solid black;
      }
      p {
          color: maroon;  /*字体颜色*/
      }
    </style>

创建.css文件(样式表)，将所有相同样式的html文件链接(<link>元素)到同一个css即可，不需要<style>元素。

继承：
只有一部分属性可以继承。
改变段落的字体，会改变链接和强调的字体。
一般影响文本外现的属性都可以继承，例如：color，font-family，font-size，font-weight，font-style。
p, h1, (h1, h2), body等为选择器(selector)

body {
  font-family: sans-serif;
}
h1, h2 {
  color: gray;
}
h1 {
/*text-decoration: underline;*/
border-bottom: 1px solid black;
}
p {
  color: maroon;  /*字体颜色*/
}

覆盖继承：

em {
    font-family: serif;
}

css会使用更特定的规则，特定程度相同，则使用最后列出的规则。
判断规则是否更具体的方法：id在百位数，class或pseudo-class在十位数，元素在个位数，因此包含一个id则加100，一个类或伪类加10，一个元素加1，总的数值越大越具体。

css属性：
color,font-weight,left,line-height,top,background-color,border,padding,
font-size,text-align,font-style,list-style,list-style,background-image...
font-family包括：serif系列、sans-serif系列、monospace系列、cursive系列、fantasy系列。
@font-face使用Web字体。
font-size指定字体大小的四种方式：像素16px，百分号(相对于继承)120%，比例(相对于父元素字体大小)1.2em，关键字(xx-small,x-small,small,medium,large,x-large,xx-large)。
font-weight设置文本粗细，如bald，normal。
font-style增加文本风格，如斜体italic，倾斜文本oblique。
color一般用#加6位十六进制表示。
text-decoration：增加上中下划线，underline，overline，line-through。
Line-height：行高。
background-image：图片作为背景。
background-repeat：设置图像重复属性。
background-position：指定图像的位置。
border-style：边框线型solid、dotted、dashed、double、groove、inset、outset、ridge，border-width，border-color，border-radius：指定圆角。指定单独一边border-top-color，border-right-style，border-bottom-width，border-left-radius。
width属性：只指定内容区的宽度，元素的默认宽度是auto。指定为百分数时，是相对于其容器的百分数(body，div)，高度则最好不要显示给出。
text-align：会对块元素内所有内联元素进行对齐，可以由所有嵌套的块元素继承。例如center居中对齐。

float属性，让元素浮动并从正常流中删除，元素之外的内容(块元素会忽略浮动元素，其包围的内联元素)会绕流这个元素。设置主内容的边框可以让其和浮动的元素之间有个中缝(gutter)。可以浮动内联元素。对主内容使用float left可以避免小的移动设备先看到边栏(对边栏设置float right时)。浮动元素的外边距不会折叠。
clear属性：可以给块元素提供clear属性值为right或left，这样块元素会下移，直到它左边、右边或者两边没有浮动元素挨着它。

为列表li设置css属性list-style-type可以更该列表前面的标记，如disc，circle，square，或none。
可以自己定制标记，使用list-style-iamge属性并提供url。
也可以为有序列表指定list-style-type，可以为decimal，upper-alpha，lower-alpha，upper-roman，lower-roman。
利用list-style-positon控制文字回绕，outside时在文本下回绕，inside时在标记下回绕，以及其他。

可以对相关属性使用快捷方式：
内外边距简化写法padding: 0px 20px 30px 10px;分别表示上右下左(顺时针)的内边距，内边距一样则可写为padding: 20px;。还可以写成margin: 0px 20px;前面表示上下，后面表示左右。
边框的简化写法border: thin solid #007e7e;可以按照任意的顺序来写。
背景也类似background: white url(images/cocktail.gif) repeat-x;
字体属性的简写font: font-style font-variant font-weight font-size/line-height font-family,其中style,variant,weight可以任意组合但必须在size后面，height可选，但必须在size后加上/，最后family中不同字体间使用逗号隔开。例如：
font: small/1.6em Verdana, Helvetica, Arial, Sans-serif;

CSS布局策略

元素流：浏览器从上至下显示块元素，从左上到右下显示内联元素。内联元素嵌在块元素之间，文本被认为内联元素。

盒模型(box mode)：内容区(content area)，透明内边距(padding)，可选边框(border)，透明外边距(margin)。
浮动布局：给边栏设置float属性，也非常适合在一个文本段落中浮动图像。缺点是必须把边栏移动到主内容之上。另外无法创建两个高度相同的列。
凝胶布局：由固定大小的<div>包围页面中的所有内容，然后利用auto属性值允许外边距扩展，保证内容居中，很多博客为这种布局。缺点是内容不会扩展。
绝对布局：给边栏一个绝对定位以及固定宽度，并定位在主内容一侧，可以得到一个可扩展的主内容区以及一个固定的边栏。缺点为浏览器变宽时边栏会覆盖页脚。
表格显示：向HTML增加两个<div>，一个作为表格，另一个作为行，而列用一个块元素表示，可以得到完美对齐的多列页面，并且所有内容都可扩展。

指定一组元素样式是使用class，指定一个时使用id。

流体布局(liquid layouts)、冻结布局(frozen layouts)与凝胶(jello)。

流体布局即使块元素浮动，冻结布局将整个body的宽度固定，而凝胶时设置body的左右外边距值为auto，使body的内容自动居中。

绝对定位(absolute positioning)布局

设置position属性为absolute，设置其top、right或者bottom、left即相对于页面的位置，然后设置其宽度。与float不同，绝对定位中，内联元素也会忽略被绝对定位的元素。多重的绝对定位会覆盖。position有四个属性值，static(默认)、absolute、fixed、relative。绝对定位，固定定位，相对定位会有一个z-index值控制分层。

css表格显示

对整个表格创建一个<div>，然后对每一行创建一个<div>，对每一列只需要一个块级元素作为内容。
对每个表格设置display属性为table，行设置为table-row，而每一列即每一个块元素设置为table-cell，并且设置其vertical-align属性确保内容对齐，可设置为top,middle,bottom。

左右放置两个内联元素，外边距会叠加。上下放置两个块元素，外边距会折叠(取大值)。浮动元素的外边距不会折叠。
表格与其他块元素上下摆放时外边距也不会折叠，因此需要修改其上下元素的外边距。

绝对，固定，相对定位。

fixed固定位置，相对浏览器窗口(视窗)位置不变。如果一个元素嵌套在另一个定位元素中，这个元素就会相对于外包含定位。
可以使用top，right，bottom，left来指定元素的位置。
relative相对定位，元素会进入正常流入界面，然后按照指定量偏移，从而流出原先所在的空间。相对位置使用top，right，bottom，left是指距正常流中该元素的偏移量。
给元素使用负的位置，例如left: -90px，可以使元素左边定位比视窗边界更左。可以使用top,right,left,'bottom'偏移元素。

图片链接会使用边框，因此取消应使用border: none;，而文本链接使用下划线，因此取消应使用text-decoration: none;。

HTML表格

table,caption,th,tr,td元素：建立HTML表格。
可以为table写caption-side规则让标题为bottom或top。
单元格与单元格之间的空间为border-spacing，可以设置为0px，也可以设置水平和垂直的边框间距border-spacing: 10px 30px;水平为10px，垂直为30px。但不能为每个单元格单独设置外边距。

可以设置border-collapse属性值为collapse，，折叠边距，同样可以消除表格间距。
利用nth-child伪类来为表格隔行指定颜色。例如p:nth-child(odd)选择奇数，甚至更加灵活p:nth-child(2n+1)选择奇数。
利用td的rowspan属性使单元格跨多行，例如<td rowspan="2">xxx</td>。同理colspan使单元格跨多列，但输入下行元素是要空出对应位置。

开发商特定的CSS属性

div {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

CSS变换和过渡

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS Transforms and Transitions</title>
    <style>
      #box {
        position: absolute;
        top: 100px;
        left: 100px;
        width: 200px;
        height: 200px;
        background-color: red;
        transition: transform 0.5s;
        -webkit-transition: -webkit-transform 0.5s;
        -moz-transition: -moz-transform 0.5s;
        -o-transition: -o-transform 0.5s;
      }
      #box:hover {
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
  </body>
</html>

剩下的是该书的附录部分

交互性

使用JavaScript脚本语言来编写程序或脚本，可以让页面有自己的行为。

HTML5 API和WEB应用

再谈Web字体

@font-face{
    font-family:"Emblema One";
    src:url("EmlemaOne-Regular.woff"),
        url("EmlemaOne-Regular.ttf");
}

创建Web页面的工具

Dreamweaver
Hype
Coda
Flux
Eclipse
等等。

XHTML5

服务器端脚本

服务器端的应用生成Web页面。

音频

      <audio id="blood_and_wine" controls>
        <source src="audio/01 Blood and Wine.flac">
        <source src="audio/01 Blood and Wine.mp3">
        <p>Sorry but audio is not supported in your browser.</p>
      </audio>

HeadFirst HTML&CSS