HTML、 CSS复习笔记

虽然想从事后端开发，但项目中也涉及到前端知识，有些知识点很少用需经常查询，遂将其做个总结。

html文件基本结构

    ...
    ...

1. 称为根标签，所有的网页标签都在中。

2.  标签用于定义文档的头部，它是所有头部元素的容器。头部元素有




需要强调的文本  

需要强调的文本

的内容在浏览中显示为斜体，显示为加粗

使用标签为文字设置单独样式

标签是没有语义的，它的作用就是为了设置单独的样式用的。

列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。

 

创建表格的四个元素：

table、tbody、tr、th、td

1、

…：整个表格以标记开始、标记结束。

2、…：如果不加 , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）

 

3、…：表格的一行，所以有几对tr 表格就有几行。

4、…：表格的一个单元格，一行中包含几对...，说明一行中就有几列。

5、…：表格的头部的一个单元格，表格表头。

6、表格中列的个数，取决于一行中数据单元格的个数。

caption标签，为表格添加标题和摘要

链接显示的文本

在新建浏览器窗口中打开链接

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

如下代码：

target="_blank">click here!

讲解：

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

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

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

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

1、type:

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

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

2、value：提交数据到服务器的值（后台程序PHP使用）

3、name：为控件命名，以备后台程序 ASP、PHP 使用

4、checked：当设置 checked="checked" 时，该选项被默认选中

      看书
      旅游
      运动
      购物

   

1、value：

2、selected="selected"：

设置selected="selected"属性，则该选项就被默认选中。

下拉列表也可以进行多选操作，在标签中设置 multiple="multiple" 属性，就可以实现多选功能

form表单中的label标签

label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。

  for="male">男
  

id="male" />
for="female">女 id="female" /> for="email">输入你的邮箱地址 id="email" placeholder="Enter email">

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

CSS注释代码

就像在Html的注释一样，在CSS中也有注释语句：用/*注释语句*/来标明（Html中使用)。

从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。

内联式css样式表就是把css代码直接写在现有的HTML标签中

;font-size:12px">这里文字是红色。

嵌入式css样式，就是可以把css样式代码写在标签之间。

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在内（不是在

水平居中设置-定宽块状元素

当被设置元素为 块状元素 时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。(定宽块状元素：块状元素的宽度width为固定值。)

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：

html代码：

  
我是定宽块状元素，哈哈，我要水平居中显示。

css代码：

水平居中总结-不定宽块状元素方法（一）

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

不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：

1. 加入 table 标签
2. 设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
3. 设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的

这一小节我们来讲一下第一种方法：

为什么选择方法一加入table标签? 是利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。

第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 、、 )。

第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。

举例如下：

html代码：

 
  
    
  

    

        
我是第一行文本
        
我是第二行文本
        
我是第三行文本
    
    
 

css代码：

水平居中总结-不定宽块状元素方法（二）

除了上一节讲到的插入table标签，可以使不定宽块状元素水平居中之外，本节介绍第2种实现这种效果的方法，改变元素的display类型为行内元素，利用其属性直接设置。

第二种方法：改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。如下例子：

html代码：

    

        
1
        
2
        
3
    

css代码：

这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。

水平居中总结-不定宽块状元素方法（三）

除了前两节讲到的插入table标签，以及改变元素的display类型，可以使不定宽块状元素水平居中之外，本节介绍第3种实现这种效果的方法，设置浮动和相对定位来实现。

方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

我们可以这样理解：假想 ul层的 父层（即下面例子中的 div层）中间有条平分线将 ul层的 父层（ div层）平均分为两份， ul层的css代码是将 ul层的最左端与 ul层的 父层（ div层）的平分线对齐；而 li层的css代码则是将 li层的平分线与 ul层的最左端（也是 div层的平分线）对齐，从而实现 li层的居中。

 

代码如下：

    

        
1
        
2
        
3
    

css代码：

隐性改变display类型

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

 1. position : absolute 

 2. float : left 或 float:right 

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