HeadFirst HTML&CSS

zoukankan html css js c++ java

HeadFirst HTML&CSS
《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表示>

属性

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

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;
         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>
```
查看全文

相关阅读:
React 16 源码瞎几把解读【前戏】为啥组件外面非得包个标签？
nodejs 使用redis 管理session
nodejs 优雅的连接 mysql
mongodb 学习笔记 3 --- 查询
 mongodb 学习笔记 2 --- 修改器
 mongodb 学习笔记--- 基础知识
 看jquery3.3.1学js类型判断的技巧
 FIS3 大白话【一】
Flutter 插件开发：以微信SDK为例
 最新Android面试题整理,收藏下吧值得拥有！

原文地址：https://www.cnblogs.com/AIxiaodi/p/12274586.html

HeadFirst HTML&CSS

HTML基本元素及属性

元素

属性

HTML5

html表单

创建自己的网站

CSS的规则及属性

CSS选择器

类、伪类

规则

CSS布局策略

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

绝对定位(absolute positioning)布局

css表格显示

绝对，固定，相对定位。

HTML表格

开发商特定的CSS属性

CSS变换和过渡

剩下的是该书的附录部分

交互性

HTML5 API和WEB应用

再谈Web字体

创建Web页面的工具

XHTML5

服务器端脚本

音频