《Head First HTML 与CSS》笔记

HTML（HypeText Markup Language）超文本标记语言，提供了一种用标记“标示”文本的方法，来告诉浏览器文本的结构是怎样的。当HTML告诉了浏览器结构，浏览器会按照默认的规则显示每个元素，我们可以使用CSS来修改样式。
HT，在我的理解中，就是指<a>元素，这个元素可以创建一个超文本链接，链接到另一个网站页面。
我们现在平时所说的HTML其实默认是在谈HTML5。
也存在很多WEB页面创造工具，例如我之前使用的Dreamweaver，所见即所得，但是这个学习不了太多新知识，而且通过图形化的界面去修改代码，确实没有直接修改HTML和CSS快；另外这些工具的更新不一定能及时更新。
CSS(Cascading Style Sheets)层叠样式表如果想要直接嵌入到当前HTML中，就需要在页面中增加一个新的元素（element），<style>元素，并选择性为其增加一个属性 type="text/css"，为什么是选择性呢？因为以前的HTML设计者认为以后可能还会有其它样式，不过后来他们醒悟了，完全可以使用style而不使用属性，所有的浏览器都知道你指的是CSS。
属性名的标准写法，首先是属性名，后面是一个等于号，然后是双引号括起来的属性值，例如

type="text/css"

HTML和CSS是两种完全不同的语言，在我的理解里，HTML主要是告知浏览器或者搜索引擎网站的结构，例如<article>标记，举个例子，谈谈网站的面包屑一文中，可能在用户看来面包屑并没什么改变，但在搜索引擎看来有很大的区别，让页面更结构化是很有意义的，这本书中，举了几个例子，当你在文本中有一段引用文字，你可以尝试使用<q>元素（短引用，如果是段落引用，可以使用<blockquote>）而非自己写一个双引号将其包裹起来，这将告知浏览器这是一种特定内容-引用；又比如<em>元素告知浏览器这是一个着重强调的文字。
内联（inline）元素和块（block）元素。块元素总是特立独行，在浏览器中好像前后各有一个换行，而内联元素则随波逐流，在文本流中总在“行内”出现。
void元素，例如<br>，<img>，相较于正常元素来讲的，正常元素一般格式为 “开始标记 + 内容 + 结束标记”，而空元素没有任何内容，只需使用一个开始标记，简写形式可以减少HTML中的标记数量，有些杠精可能觉得img标签里面不是有图片吗？为什么算作空元素，空元素的定义是在开始标记和结束标记之间没有任何内容的元素。
如果想要HTML页面中提到<或者>，直接使用就会有问题，HTML提供了一种简便的办法，可以使用字符实体（character entity）的简单缩写来制定这些特殊字符，例如，展示<zxf>，lt其实就是lower than，小于的意思，更多字符实体清单可见下方参考

&lt;zxf&gt;

对于&这个特殊符号，在实体名中使用&完全没问题，但不能单独使用&符号，如果想要表示&，则必须使用&来表示。
域名和网站名？域名是一个唯一的名字，可以用来定位你的网站，例如abc.com，我们平时键入的www.这部分是域中一个特定服务器的名字，www.abc.com则是一个网站名

abc.com  www.abc.com

为链接增加标题以便访问，<a>元素有一个title属性，这个描述对那些有视力障碍使用屏幕阅读器的人很重要，同样的，还有<img>里面的alt属性。
元素的id属性。id必须是唯一的，可以为标签创造目标，这样可以很方便的从链接跳转至页面中的一个特定目标，例如我们建立如下标签<h2 id="test">，再在该页面的<a>标签内添加#符号+目标标识符，<a href="index.html#test">，点击该链接就会跳转至指定h2内容。很多网站都会在页面顶部定义一个目标“top”，在页面底部定义一个目标<a href="#top">Back to top</a>，这样用户点击一下就可以返回顶部栏。
关于是使用width和height属性来调整页面上图像大小，还是直接提供指定尺寸的图片，见仁见智，但是，如果使用属性来调整图片。浏览器在调整之前还是会获取整个大图像的尺寸！
使用font-family属性可以定制页面中的字体，通常会指定多个字体，只需要输入字体名，使用逗号分割，最后一个总会放置一个通用的字体系列名（为了防止用户的浏览器不存在你指定的字体）

font-family: "Gill Sans", sans-serif;

如果想要使用自定义的字体，可以将字体文件（例如 zxf的web open font format文件zxf.woff ）放到云服务器上，CSS中定义@font-face规则

@font-face{
  font-family:"zxf-font";
  src:url("https://zxf.com/zxf-font.woff") ;
}

如何指定字体的大小最恰当呢？第一，选择一个关键字small或者medium作为body规则中的默认字体大小；第二，使用em或者百分数，相对于body字体大小指定其它元素的字体大小。这样的好处在于如果需要调整页面的字体大小，则通常只需要修改body字体大小，这样所有的字体都会自动按比例增大或者减小。不建议使用px来定义字体大小是因为在某些IE老版浏览器中存在问题。
对于颜色的指定，rgb(80%,40%,0)等同于rgb(204,102,0)，这个是按照255*0.8，255*0.4计算得出的，当然我们还有其它的指定方法，例如比较常用的十六进制码，一个十六进制码中，每组两位数字也同样代表着颜色的R\G\B分量。十六进制（hexadecimal）与10进制的换算如下，例如cc=>12*16+12=192，66=>6*16+6=102

#cc6600

如果每组两位数字都相同，则可以采用#c60这种简写，但只要存在一组数字不同，则不能使用简写。
在CSS中，所有的元素都可以把它理解成盒子，它包括内容，可选的透明内边距（padding）、可选的边框（border）和可选的透明外边距（margin），所以对于计算元素的实际高、宽时，我们应该加上两边的内边距+边框+外边距+内容，通常我们设置一个标签的width属性时，其实只是设置内容区的宽度

CSS可以添加媒体查询，以针对不同大小的屏幕尺寸展现不同的样式

@media screen and (min-width:760px) {
  width: 60%;}
@media screen and (max-width:760px) {
  width: 90%;}

利用div元素很容易将文件结构划分为几个小的逻辑区，当我们对块元素<div>使用text-align属性（注意，该属性只能在块元素上使用！），会应用到其内部所有的内联元素（当然，也包括图片）。而span元素则采用类似的方法建立内联内容的逻辑分组。
子孙选择器的写法，是中间空格，例如div h1，要注意，这会选择div元素下面的所有孙子、曾孙子、曾曾孙子的h1，而并非只选择直系孙子h1，如果需要选择直系孙子，必须要使用>符号，例如：div>h1
对于元素的上下左右，我们可以通过一行代码来指定，即：上右下左
伪类（pseudo-classes）。和类相似，但使用冒号来链接元素，例如通过a:visited来指定样式，浏览器会检查所有的元素，将其在后台添加到正确的伪类中。常见的伪类还有first-child(元素的第一个子元素)，first-letter（第一个字母），first-line（第一行）等等。
如何确定CSS中选择器的特定性？或者说对同一个元素的应用多种选择器规则哪一种会胜出？我们可以先写出三个数字000，如果该选择器包含ID，则左一0加1，该选择器包含的类或者伪类为中间的0加1分，该选择器包含的元素名为右侧0添加1分，例如：h1（1分）和h1.blue（11分），因为11比1更大，所以后面的规则会被应用！
“流”就是浏览器在页面上摆放HTML元素所使用的方法，块元素从上往下流，内联元素在水平方向上相互挨着，总体上会从左上方流向右下方。
浏览器并排两个内联元素，外边距的距离会是两个元素的外边距之和；如果浏览器上下放置两个块元素，它们的共同外边距会折叠在一起，折叠的外边距高度就是最大的外边距高度。
float属性可以让元素脱离正常的文档流，所有的块元素都会默认将其当作不存在来处理，但是，在对（块元素之内的）内联元素定位时，浏览器会考虑浮动元素的边界，因此会导致内联元素会环绕浮动元素。
清除浮动。一个比较常用的例子就是网站设置了左右两个栏目+页脚栏目，为了保证页面的美观性，侧边栏（假设为右边）设置了右浮动，那么当左侧的主栏目内容较短时会发现页脚上移，因为页脚的块元素会忽略浮动的侧边栏，但是页脚的内联元素（例如文本）不会，因此，可以设置页脚clear:right属性，指明该页脚右侧不允许存在浮动内容（浏览器在页面放置元素时，会查看页脚右边是否有浮动元素，如果有，就会把页脚下移，一直到他右边不存在浮动内容）。
冻结布局（frozen layouts）。锁定元素，让他们冻结在页面上，能避免由于窗口扩展带来的很多问题，其实就是设定主内容区（注意：并非body）的宽度，背景颜色，然后再利用凝胶布局（流体和冻结之间的状态=>凝胶）设置左右外边距为auto让其居中。当你设置一个元素的外边距为auto时，浏览器会自己判断正确的外边距是多少，并确保左右边距相同！
绝对定位的工作原理？浏览器首先会将其从流中完全删除（所有元素都会将它完全忽略，和浮动的那种脱离文档流不一样！），然后将其放在指定的位置上。
CSS表格布局（并非HTML的表格！）可以快速建立多栏布局，但是在实际测试中，这个相较float来控制布局，无法做到在屏幕缩小时移动到底部栏。例如：3*2（三行两列）的布局，创建一个大div表示整个表格，行和列要嵌套在这个大div中，然后再为每一行创建一个div，最后将内容区丢到指定的div中，在CSS中，大div定义display:table，每一行的div定义display：table-row，其它内容区的div则指定为table-cell，不过表格式布局的外边距使用border-spacing来控制。
对于HTML中的<table>标签，可以使用<caption>来显示标题，每一行<tr>中间包裹着行标题<th>和行内容<td>。
如何隔行为元素设定不同背景颜色？以前我是采用设置类的方式来解决，但是比较麻烦，其实可以使用伪类nth-child来解决，对于nth-child伪类，状态是一个元素相对于它的兄弟元素的数字顺序

# html
<section>
<p>
<p>
<p>
<p>
</section>

# css偶数行为红
p:nth-child(even){
  background-color:red;
}
p:nth-child(odd){
  background-color:red;
}

<input>标签的可访问性。可以考虑使用<label>元素来标记表单提交的内容名称，表单元素添加id属性，在<label>中添加for属性值为相应的id内容

<input type="text" id="hot">
<label for="hot">text<label>

重新考虑网站的HTML结构！在我之前浅薄的知识体系里面，写网站就是<div>、<span>从上到下一把梭哈，最后使用CSS来控制样式，但是这样对搜索引擎的抓取可能会造成困扰，而在看了一些HTML元素（下方参考）后，感觉还是有必要进行修改的，例如<nav>,<address>,<time>等

参考

https://dev.w3.org/html5/html-author/charref

# w3c验证工具

https://validator.w3.org/

# css验证工具

https://jigsaw.w3.org/css-validator/

# HTML元素参考

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

YOLO813

《Head First HTML 与CSS》笔记