HTML&CSS基础 - 松一老贼的博客

html 标签

语义化

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

语义化的好处:

更容易被搜索引擎收录。
更容易让屏幕阅读器读出网页内容。

网站名称和logo 一般用h1标签包裹起来，方便被搜索引擎收录

`strong` `em` 区别

em 表示强调，在浏览器中默认用斜体展示

strong 表示更加强烈的强调，在浏览器中默认用粗体展示

目前国内程序员喜欢用 strong 表示强调

`span` 标签

这个标签没有具体的语义，它的存在就是为了设置单独的样式用的

`q` 标签

quote 引用的意思，短文本引用

Noted,在 html 页面中，要引用的文本不用加双引号，浏览器会对 <q></q> 标签内的文字自动加双引号。这里用<q>标签的真正关键点不是它的默认样式双引号（如果这样我们不如自己在键盘上输入双引号就行了），而是它的语义：引用别人的话。

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>q标签</title>

</head>

<body>

<p>周瑜，不可否认，他是历史上一个了不起的英雄人物！确实也配的上那句<q>聪明秀出为之英，胆略过人为之雄。</q></p>

</body>

</html>

`blockquote` 标签，长文本引用

<blockquote>的作用也是引用别人的文本。但它是对长文本的引用，如在文章中引入大段某知名作家的文字，这时需要这个标签。

浏览器对 <blockquote> 标签的解析是缩进样式。

另外，blockquote 不会默认加双引号,自己也最好不要加，因为它的语义是缩进。

`br` 换行

在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行，就必须输入<br />。

写法规范：xhtml1.0规范——<br />

`address` 为网页加入地址信息

一般网页中会有一些网站的联系地址信息需要在网页中展示出来，这些联系地址信息如公司的地址就可以 <address> 标签。也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份。

`code`

插入一行代码

`pre`

插入代码片段.

<pre> 标签的主要作用:预格式化的文本。被包围在 pre 标签中的文本通常会保留空格和换行符.

注意：<pre> 标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它，只是 <pre> 标签的一个常见应用就是用来展示计算机的源代码。

`div`

在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个 <div> 标签中，这个 <div> 标签的作用就相当于一个容器。

语法：

<div>…</div>

确定逻辑部分：

什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。如下图所示：图中用红色边框标出的部分就是一个逻辑部分，就可以使用 <div> 标签作为容器。

`summary` `caption`

summary 摘要

摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

语法：

<table summary="表格简介文本">

caption 标题

用以描述表格内容，标题的显示位置：表格上方。

`a` 标签

语法：

<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

title 属性的作用：鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）。

<a> 标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。

如下代码：

<a href="目标网址" target="_blank">click here!</a>

`mailto` 链接 Email 地址

详细参数：

`img` 标签

语法：

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

举例：

<img src = "myimage.gif" alt = "My Image" title = "My Image" />

讲解：

1 、src：标识图像的位置；

2 、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

3 、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

4、图像可以是GIF，PNG，JPEG格式的图像文件。

`form` 表单标签

语法：

<form   method="传送方式"   action="服务器文件">
	表单内容
</form>

所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间（否则用户输入的信息提交不到服务器上！）

`input` 文本、密码输入框

语法：

<form>
   <input type="text/password" name="名称" value="文本" />
</form>

type:

当 type=”text” 时，输入框为文本输入框

当 type=”password” 时，输入框为密码输入框

name:为文本输入框命名，以备后台jsp/php使用

value:为文本输入框设置默认值。一般起到提示作用

`textarea` 文本域，多行文本的输入

语法：

<textarea rows="行数" cols="列数">
  文本内容
</textarea>

rows可以用 css 中的 height 代替

cols 可以用 css 重点 width 代替

`radio` 和 `checkbox`

语法：

<input type="radio/checkbox" value="值" name="名称" checked="checked" />

type:

当 type=”radio” 时，控件为单选框

当 type=”checkbox” 时，控件为复选框

value:需要提交到服务器的值

name:为控件命名

checked:当设置 checked="checked" 时，该选项默认被选中

同一组的单选按钮，name 取值一定要一致，这样同一组的单选按钮才可以起到单选的作用。

`select` 下拉框，节省空间

下拉框既可以单选，也可以多选。

单选举例：

<form action="save.php" method="post" >
    <label>爱好:</label>
    <select>
      <option value="看书">看书</option>
      <option value="旅游">旅游</option>
      <option value="运动">运动</option>
      <option value="购物" selected="selected">购物</option>
    </select>
</form>

value:向服务器提交的值，<option>标签中的内容只是用来展示

selected="selected" 表示当前选项默认选中。

多选举例：

<form action="save.php" method="post" >
    <label>爱好:</label>
    <select multiple="multiple">
      <option value="看书">看书</option>
      <option value="旅游">旅游</option>
      <option value="运动">运动</option>
      <option value="购物" selected="selected">购物</option>
    </select>
</form>

设置 multiple="multiple"属性，可以实现多选功能：

在 windows 操作系统下，进行多选时按下**Ctrl + 单击 **

在 Mac下使用 Command + 单击，可以选择多个选项

提交按钮

语法：

<iput type="submit" value="提交" />

type:只有当 type=”submit” 时，按钮才有提交作用

value:按钮上显示的文字

重置按钮

语法：

<iput type="reset" value="提交" />

type:只有当 type=”reset” 时，按钮才有提交作用

value:按钮上显示的文字

`label`

label 标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。

如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该 label 标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该 label 标签相关连的表单控件上）。

语法：

<label for="控件id名称">

注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

html end

css begin

css 语法

css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：

选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。

声明：在英文大括号 {} 中的的就是声明，属性和值之间用英文冒号 : 分隔。当有多条声明时，中间可以英文分号 ; 分隔，如下所示：

p{font-size:12px;color:red;}

注意：

1、最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。

2、为了使用样式更加容易阅读，可以将每条代码写在一个新行内，如下所示：

p{
   font-size:12px;
   color:red;
}

css 引入方式

三种：

写入 html 标签内
写入<style></style>标签中
从外部引入单独的 css 文件
```
<link href="index.css" rel="stylesheet" type="text/css" />
```
同权值下，渲染遵循就近原则。

选择器

每一条 css 样式声明（定义）由两部分组成，形式如下：

选择器{
    样式;
}

在 {} 之前的部分就是选择器，选择器指明了 {} 中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。

标签选择器

标签选择器其实就是html代码中的标签。

p{
  font-size:12px;
  color:red;
}

类选择器

语法：

.类选择器名称{css 样式代码}

ID 选择器

语法：

#ID名{css样式代码}

子选择器

语法：

parent>sons{css...} 仅对所有的第一代子元素起作用

后代/包含选择器

语法：

parent 空格 children{css...} 用于选择指定父标签元素下的所有指定类型的后辈元素。

通用选择器

语法：

*{css...} 它的作用是匹配html中所有标签元素

/* 通常被用来清除浏览器默认样式 */
*{
  margin:0;
  padding:0;
}

伪类选择器

为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，举例，设置 a 标签的四中状态：

a:link{
  text-decoration: none;
}
a:hover{
  color: green;
  text-decoration: none;
}
a:active{
  color: #FFA500;
  text-decoration: none;
}
a:visited{
  color: red;
  text-decoration: none;
}

分组选择符

举例：

h1,h2,span{color:red;}	/*为h1 h2 span 标签内的文字添加颜色为红色*/

继承

CSS有三大特性（继承性，层叠性，优先级）之一。

继承性是指指被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父元素的属性。

优先级

浏览器通过权值来判断使用哪一种 css 样式。权值越大，优先级越高。

标签权值为 1
类选择器权值为 10
ID 选择器权值为 100

另外，继承也有权值，但很低，有的文献提出它的权值只有 0.1，而!important 自定义样式权值为 1000.

一般地，浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但 !important 优先级样式是个例外，权值高于用户自己设置的样式。

举例：

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*/
p{color:red!important;} /*权值为1+1000=1001*/

注意：这里的权重讲的是同一种引入方式下。即使在嵌入式或外链式引入的 css 中用最高权重!important，但在标签的style属性上再次设置，即使权重很低，也会覆盖前边的。

层叠

层叠就是在html文件中对于同一个元素可以有多个 css 样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。

遵循规则：

内联样式表（标签内部）> 嵌入样式表（当前文件<style>标签中）> 外部样式表（外部引入文件中）。

文字排版

可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。

字体

现在一般网页喜欢设置“微软雅黑”，如下代码：

body{font-family:"Microsoft Yahei";}

或者

body{font-family:"微软雅黑";}

注意：第一种方法比第二种方法兼容性更好一些。

字号颜色

举例：

body{font-size:16px;color:#eeeeee;}

粗体

p span{font-weight:bold;}

斜体

p a{font-style:italic;}

下划线

p a{text-decoration:underline;}

删除线

.oldPrice{text-decoration:line-through;}

段落排版

缩进

p{text-indent:2em;}

注意：2em 的意思就是文字的2倍大小。

行间距

p{line-height:1.5em;}	/*1.5倍行距*/

字母间距

p{letter-spacing:50px;}

英文字母间距，也是中文的文字之间的间距。

词间距

p{word-spacing:50px;}

英文单词之间的间距，对中文没有影响。

对齐

为块状元素中的文本、图片设置对齐样式可以使用 text-align 样式代码:

h1{text-align:center；}	/*水平居中*/

text-align还可以设置左对齐(left)，右对齐(right).

元素分类

在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、行内元素和行内块状元素。

块级元素

常用的块状元素有：

块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

块级元素可以通过display:inline设置为行内元素。

行内元素

常用的行内元素有：

行内元素特点：

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

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

行内块(inline-block)级元素

常用的行内块状元素有：

行内元素或者块级元素可以通过 display:inline-block 设置为行内块元素。

inline-block 元素特点：

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

2、元素的高度、宽度、行高以及顶和底边距都可设置。

更多…

盒子模型

边框-border

盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

注意：

1、border-style（边框样式）常见样式有：dashed（虚线） dotted（点线） solid（实线）。

2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:border-color:#888;前面的#号不要忘掉。

3、border-width（边框宽度）中的宽度也可以设置为：thin medium thick（但不是很常用），最常还是用象素（px）。

也可以单独为某一方向设置边框属性：

border-top:1px solid red;
border-right:1px solid red; 
border-left:1px solid red;

必须设置 border 的样式(solid/dashed/dotted),否则不起作用

盒模型的宽高

盒模型中的width和height特指填充在盒子中的内容(content)的宽高。

而盒模型的宽=左右border宽+左右padding宽+width,有的书上也把margin的值算上了，只能说看需求了。至于盒模型的高度跟宽度是一样的道理。

填充-padding

div{padding:20px 10px 15px 30px;}/* 上 右 下 左 —— 顺时针*/

边界-margin

div{margin:20px 10px 15px 30px;}	/*顺时针*/

让盒子居中：

margin:0 auto;

布局模型

CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。

流式模型（Flow）

流动布局模型具有2个比较典型的特征：

块状元素都会在所处的容器(包含元素)内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为 100%. 实际上，块状元素都会以行的形式占据位置。
在流动模型下，行内元素都会在所处的容器(包含元素)内从左到右水平分布显示。

浮动模型 (Float)

float:left/right设置向左浮动或向右浮动。

层模型（Layer）

层模型有三种形式：

绝对定位(position: absolute)

这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

相对定位(position: relative)

position:relative 表示相对定位，它通过 left、right、top、bottom 属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由 left、right、top、bottom 属性确定，偏移前的位置保留不动。

偏移前的位置保留不动：虽然被操作的对象偏移了，但它原来的位置还占着，其他标签的内容显示不到它原来的位置上。反而，偏移的内容由于浮动起来了，可以根据偏移量浮在其他元素上边。一句话总结：没有脱离文档流。

固定定位(position: fixed)

与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。

Relative 与 Absolute 组合使用

使用 position:absolute 实现子元素相对与父元素绝对定位规则：

父元素必须设置 position:relative ，目的在于使父元素浮起来，使子元素相对于父元素而不是body元素
子元素设置position:absolute，以及具体的偏移值

css 代码缩写

盒模型代码缩写

四个方位值相等:

margin:10px 10px 10px 10px;
/*可以缩写为：*/
margin:10px;

上下相等，左右相等：

padding:10px 20px 10px 20px;
/*可以缩写为：*/
padding:10px 20px;

上下不等，左右相等：

padding:10px 20px 10px 30px;
/*可以缩写为：*/
padding:10px 20px 30px;

颜色值缩写

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

字体缩写

body{
    font-style:italic;
    font-variant:small-caps; 
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋体",sans-serif;
}

这么多行的代码其实可以缩写为一句：

body{
    font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;
}

注意：

1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。

2、在缩写时 font-size 与 line-height 中间要加入/斜扛。

一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：

body{
    font:12px/1.5em  "宋体",sans-serif;
}

只是有字号、行间距、中文字体、英文字体设置。

单位值

颜色值

英文命令颜色

p{color:red;}

2、RGB颜色

这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。

p{color:rgb(133,45,200);}

每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如：

p{color:rgb(20%,33%,25%);}

3、十六进制颜色

这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。

p{color:#00ffff;}

配色表：

长度值

长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。

1、像素

像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。

2、em

就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：

p{font-size:12px;text-indent:2em;}

上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。

下面注意一个特殊情况：

但当给font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：

html:

<p>以这个<span>例子</span>为例。</p>

css:

p{font-size:14px}
span{font-size:0.8em;}

结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。

3、百分比

p{font-size:12px;line-height:130%}

设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。

css 样式设置技巧

水平居中

行内元素的水平居中

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。

块级元素水平居中

定宽块级元素：块状元素的宽度width为固定值

满足定宽和块状两个条件的元素是可以通过设置左右margin值为 auto 来实现居中

<div>
  我是定宽块状元素，哈哈，我要水平居中显示
</div>

div{
    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
    width:200px;/*定宽*/
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}

不定宽块级元素：块状元素的宽度width不固定

在实际工作中会遇到需要为不定宽度的块状元素设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。

不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：
- 加入 table 标签
  
  利用table标签的长度自适应性—即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。
  
  第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
  
  第二步：为这个 table 设置左右 margin 居中（这个和定宽块状元素的方法一样）。
- 设置 display: inline 方法：与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置
- 设置 position:relative 和 left:50%：利用相对定位的方式，将元素向左偏移 50% ，即达到居中的目的

html 标签

语义化

语义化的好处:

strong em 区别

span 标签

q 标签

blockquote 标签，长文本引用

br 换行

address 为网页加入地址信息

code

pre

div

summary caption

a 标签

mailto 链接 Email 地址

img 标签

form 表单标签

input 文本、密码输入框

textarea 文本域，多行文本的输入

radio 和 checkbox

select 下拉框，节省空间

提交按钮

重置按钮

label

css 语法

css 引入方式

选择器

标签选择器

类选择器

ID 选择器

子选择器

后代/包含选择器

通用选择器

伪类选择器

分组选择符

继承

优先级

层叠

文字排版

字体

字号 颜色

粗体

斜体

下划线

删除线

段落排版

缩进

行间距

字母间距

词间距

对齐

元素分类

块级元素

行内元素

行内块(inline-block)级元素

盒子模型

边框-border

盒模型的宽高

填充-padding

边界-margin

布局模型

流式模型（Flow）

浮动模型 (Float)

层模型（Layer）

绝对定位(position: absolute)

相对定位(position: relative)

固定定位(position: fixed)

Relative 与 Absolute 组合使用

css 代码缩写

盒模型代码缩写

颜色值缩写

字体缩写

单位值

颜色值

长度值

css 样式设置技巧

水平居中

行内元素的水平居中

块级元素水平居中

CATALOG

`strong` `em` 区别

`span` 标签

`q` 标签

`blockquote` 标签，长文本引用

`br` 换行

`address` 为网页加入地址信息

`code`

`pre`

`div`

`summary` `caption`

`a` 标签

`mailto` 链接 Email 地址

`img` 标签

`form` 表单标签

`input` 文本、密码输入框

`textarea` 文本域，多行文本的输入

`radio` 和 `checkbox`

`select` 下拉框，节省空间

`label`

字号颜色