html+css日常笔记1

最新推荐文章于 2023-04-10 17:25:53 发布

低调奋进

最新推荐文章于 2023-04-10 17:25:53 发布

阅读量197

点赞数

分类专栏：初识前端

本文链接：https://blog.csdn.net/zwbHUST/article/details/89452105

版权

初识前端专栏收录该内容

31 篇文章 0 订阅

订阅专栏

一、语义化，让你的网页更好的被搜索引擎理解

标签的用途：我们学习网页制作时，常常会听到一个词，语义化。那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用 em 标签表示强调等等。

语义化的好处：

1. 更容易被搜索引擎收录。

2. 更容易让屏幕阅读器读出网页内容

<em>或<strong>标签。

两者在强调的语气上有区别:<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调。

另外，对于搜索引擎来说<strong>和<em>比<b>和<i>要重视的多，所以<strong>和<em>与<b>和<i>意义是不同的。

<q>短文本引用，“庄生晓梦迷蝴蝶。望帝春心托杜鹃。” 这是一句诗歌，出自晚唐诗人李商隐的《锦瑟》。因为不是作者自己的文字，所以需要使用<q></q>实现引用。注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。注意这里用<q>标签的真正关键点不是它的默认样式双引号（如果这样我们不如自己在键盘上输入双引号就行了），而是它的语义：引用别人的话。
<blockquote>标签，长文本引用，浏览器对<blockquote>标签的解析是缩进样式。
<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）
```
<caption>表格标题</caption>
```
<table summary="">是摘要的作用，摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。

注意:同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。
label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
CSS中也有注释语句：用/*注释语句*/来标明，注意不要使用//
优先级：内联式 > 嵌入式 > 外部式,但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面（实际开发中也是这么写的）,其实总结来说，就是--就近原则（离被设置元素越近优先级别越高）
id选择器优先级高于类选择器，多个类选择器同时作用于一个元素时，遵循就近原则。
请注意包含（后代）选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。总结：>作用于元素的第一代后代，空格作用于元素的所有后代。
关于伪类选择符，到目前为止，可以兼容所有浏览器的“伪类选择符”就是 a 标签上使用 :hover 了（其实伪类选择符还有很多，尤其是 css3 中，但是因为不能兼容所有浏览器）。其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。
CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。但注意有一些css样式是不具有继承性的。如border:1px solid red;
有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：
```
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
```
注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
权值相等，层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。就近原则！

我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。注意：!important要写在分号的前面

段落排版--缩进 text-indent:2em;段落排版--行间距（行高）line-height:1.5em;中文字间隔、字母间隔设置：

letter-spacing:50px;这个样式使用在英文单词时，是设置字母与字母之间的间距。如果我想设置英文单词之间的间距呢？可以使用 word-spacing 来实现。

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有：

<img>、<input>
内联元素间距问题，内联元素是当做字体来处理的，字体之间是有间隔的，所以内联元素之间也是有间隔的，字体设为0，可以消除间隔，但是重新设置内联元素的字体大小。
下面总结了几条去除inline元素和inline-block元素去除间距的方法：

1、可以在html中直接把元素写在一行上或把闭合标签和第二个开始标签写在一行或两行间添加注释或直接去掉闭合标签但最后一个不能去掉。

2、设置margin-right为负值，但要考虑上下文的字体和文字大小。

3、先设定子元素字体，再设置父元素font-size:0px;chrome中：-webkit-text-size-adjust:none;

4、设置父元素letter-spacing或word-spacing为负值，要考虑字体，子元素有文字也要注意设置letter-spacing或word-spacing的值。

5.float:left;
inline-block 元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。
盒子模型
border-style（边框样式）常见样式有：dashed（虚线）| dotted（点线）| solid（实线）。块状元素有一个特点之一：在不设置宽度的情况下，显示为父容器的100%。
两个相邻的盒子都设定了margin，那么这两个盒子之间的距离就是取两个margin值较大的。
元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）
层模型有三种形式：

1、绝对定位(position: absolute)

2、相对定位(position: relative)

3、固定定位(position: fixed)
如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
Relative与Absolute组合使用

使用position:relative来帮忙，但是必须遵守下面规范：

1、参照定位的元素必须是相对定位元素的前辈元素：2、参照定位的元素必须加入position:relative;3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
颜色值缩写

关于颜色的css样式也是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半,

p{color: #336699;}可以缩写为：p{color: #369;}

有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：

1. position : absolute

2. float : left 或 float:right

简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。