最近将博客简单地修饰了下，需要用到HTML和CSS代码，花了一天时间学习了一下这两方面的知识。虽然内容很简单，但是足够用来修改自己的博客了。

1. HTML

1.1. HTML介绍

HTML与CSS的关系

HTML

网页内容的载体，内容包含文字、图片、视频等。

CSS

网页的样式，即表现，包含标题字体、颜色、边框等。

JavaScript

实现网页上的特效效果。

HTML文件的基本结构

 
<html>

    <head>…</head>

    <body>…</body>

</html>

<html></html> 为根标签，所有网页标签都在其中。

<head> 用于定义文档的头部，是所有头部元素的容器，描述了文档的各种属性和信息，包括

<title>、<script>、<style>、<link>、<meta>

等标签，绝大多数头部包含的数据都不会真正作为内容显示给读者。

<body> 标签之间的内容是网页的主要内容，包括

<h1>、<p>、<a>、<img>

等网页内容标签，这里的内容会在浏览器中显示出来。

HTML文件的代码注释， <!--comments-->

1.2. 标签

标签的用途：即语义化，明白每个标签的用途。语义化将使网页更容易被搜索引擎收录以及更容易让屏幕阅读器读出网页内容。

标签

描述

备注

<title>

网页标题信息，会出现在浏览器的标题栏中。

告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速判断出网页的主题。

<p>

段落。

默认段落间会有空白。

<hx>

文章标题，h1等级最高。

默认标题会加粗。

<em>

表示强调。

默认用斜体表示。

<strong>

表示强调。

默认用粗体表示。

<span>

设置单独的样式。

没有语义。

<q>

引用，表示引用别人的话（简短）。

自动为引用语句添加双引号。

<blockquote>

对长文本的引用。

缩进样式。

<br/>

加入回车换行。

空标签，即没有内容，只需写一个开始标签。HTML忽略回车和空格，所以需要使用标签。

&nbsp

加入空格。

空标签。格式为 &nbsp;&nbsb;

<hr/>

加入分割的横线。

空标签，默认线条比较粗，颜色为灰色。

<address>

地址信息。

默认为斜体。

<code>

一行代码。

<pre>

多行代码。

此标签中的文本会保留空格和换行符。

<ul>

无序信息列表。

默认每项li自带一个圆点项目符号。

语法格式为，

<ul>

    <li>…</li>

    <li>…</li>

</ul>

<ol>

有序信息列表。

每项li自带一个序号，默认从1开始。

语法格式为，

<ol>

    <li>…</li>

    <li>…</li>

</ol>

<div>

容器，划分一些独立的逻辑部分。

用id属性为 <div> 提供唯一的名称。

语法格式为，

<div id=“板块名称”>…</div>

<table>

表格。

默认没有表格线。

语法格式为，

<table summary=“摘要”>

    <tr>

        <th>…</th>

        <th>…</th>

        <th>…</th>

    </tr>

    <tr>

        <td>…</td>

        <td>…</td>

        <td>…</td>

    </tr>

</table>

<th> 表示表格表头，默认粗体居中。

<caption>

表格标题。

默认在表格上方。

<a>

超链接。

默认链接文本为蓝色，点击后为紫色，并在当前浏览器窗口打开。

语法格式为，

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

<img>

插入图片。

图片可以是GIF、PNG、JPEG格式。

语法格式为，

<img src=“图片地址” alt=“下载失败时的替换文本” title=“鼠标滑过图片时显示的文本”>

<form>

表单，将浏览器输入的数据传送到服务器端。

语法格式为，

<form method=“传送方式” action=“服务器文件”>

<input>

form输入框。

语法格式为，

<input type=“text/password” name=“名称” value=“文本”>

<textarea>

多行文本输入。

<textarea rows=“行数” cols=“列数”>文本</ textarea>

<select>

下拉选择框。

<label>

当用户单击选中的label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

语法格式为，

<label for=“控件id名称”>

2. CSS

2.1. CSS介绍

CSS全称为“层叠样式表（Cascading Style Sheets）”，用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

CSS样式由选择符和声明组成，而声明又由属性和值组成，格式为，

p {color: blue}

p为选择符，color为属性，blue为值。

选择符又称选择器，指明网页中要应用样式规则的元素。

声明在大括号中，多条声明时，以分号间隔。

CSS文件的代码注释， /* comments */

2.2. CSS基本知识

CSS样式代码插入形式

内联式

将CSS代码直接写在现有的HTML标签中，如，

<p style=“color: red”>这里文字是红色</p>

嵌入式

将CSS代码写在<style type=“text/css”></style>标签之间，如，

<style type=“text/css”>

span{

    color: red;

}

</style>

外部式

将CSS代码写在一个以.css为扩展名的文件中，在 <head> 内使用 <link> 标签将CSS样式文件链接到HTML文件内，如，

<link href=“base.css” rel=“stylesheet” type=“text/css”>

三种方式的优先级：内联式 > 嵌入式 > 外部式（离被设置元素越近优先级别越高）。

选择器分类

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

使用标签时，不需要.符号

使用class=“类选择器名称”为标签设置一个类，如，

<span class=“stress”>胆小如鼠</span>

#ID选择器{css样式代码;}

使用id=“类选择器名称”为标签设置一个类，如，

<span id=“stress”>胆小如鼠</span>

两种选择器可以应用于任何元素，但ID选择器只能在一个HTML文档中使用一次，而类选择器可以使用多次；可以使用类选择器列表方法为一个元素同时设置多个样式，不能使用ID选择器列表。

其它选择器

子选择器（.选择器>标签{}）

作用于该选择器下的第一代子元素。

包含选择器（.选择器 标签{}）

作用于该选择器下的所有后代元素。

通用选择器（*{}）

作用于HTML中所有标签元素。

伪类选择器（a:hover{}）

hover为鼠标滑过的状态，即不存在HTML标签。

分组选择器（h1,span{}）

为多个标签设置同一个样式。

CSS样式的特性

继承性

CSS的某些样式具有继承性（如color、font-size等），而一些样式不具有继承性（如border等）。

特殊性

为同一个元素设置了不同的CSS样式值时，根据权值判断使用哪种CSS样式。标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。

层叠性

对于同一个元素有多个CSS样式，并且其权值相同时，处于最后面的CSS样式会被使用（就近优先）。

重要性

使用!important设置某些样式具有最高权值，如

p{color: red !important;}

CSS格式化排版

font-family

设置字体， {font-family: “Microsoft Yahei”;} 兼容性好于 {font-family: “微软雅黑”;} 。

font-size

字号，单位使用像素px。

color

字体颜色。

font-weight

字体样式，bold。

font-style

字体样式，italic。

text-decoration

字体样式，underline、line-through。

text-indent

缩进，如p {text-indent: 2em;} ，段落首行缩进两个空格。

line-height

行间距。

letter-spacing

文字间距。

word-spacing

英文单词间距。

text-align

块状元素位置，center、left、right。

CSS中的HTML元素分类

块状元素

 
<div>、<p>、<hx>、<ol>、<dl>、<table>、<address>
、<blockquote>、<form>、<ul>、<li>

等，从新的一行开始，并且其后的元素也另起一行，元素的高度、宽度、行高及底边距都可以设置，设置 display: block 可将元素显示为块状元素。

内联元素

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

等，即行内元素，元素的高度、宽度、行高及底边距都不可设置，设置 display: inline 可将元素显示为内联元素。

内联块状元素

<img>、<input> 等，具备块状元素和内联元素的特点，和其它元素都在一行上，元素的高度、宽度、行高及底边距都可以设置，设置 display: inline-block 可将元素显示为内联块状元素。

盒模型，

元素的实际宽度和高度即为margin（边界）+ border（边框）+ padding（填充）+ 内容。

CSS布局模型

流动模型（Flow）

默认的网页布局模型，即块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，内联元素都会在所处的包含元素内。

浮动模型（Float）

设置float可以使两个块状元素并排显示

层模型（Layer）

设置position可以设置元素显示位置，有三种形式：绝对定位（ position: absolute ）、相对定位（ position: relative ）、固定定位（ position: fixed ）。其中绝对定位使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行定位，相对定位则使用left、right、top、bottom属性相对于以前的位置进行定位，固定定位使用left、right、top、bottom属性相对于浏览器视图进行定位。

单位和值

颜色值

四种表示方法，

 p{color: red;}

 p{color: rgb(100,100, 00);}

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

 p{color: #00ffff;}

长度值

px（像素）、em（倍率）、百分比。

一些技巧

行内元素水平居中

设置 text-align: center 即可。

块状元素水平居中

分为两种情况，定宽块状元素和不定宽块状元素。

定宽块状元素：

设置左右margin值为auto（必须有定宽值width）；

不定宽块状元素：

方法一，在HTML中加入table标签，设置 display: inline ，设置 position: relative 和 left: 50% 。

方法二，设置 display: inline ，设置 text-align: center 。

方法三，父元素设置float并且设置 position: relative 和 left: 50% ，子元素设置 position: relative 和 left: 50% 。

[HTML & CSS] HTML和CSS基础知识的更多相关文章

  1. css简单的一些基础知识

    css层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可 ...

  2. CSS（层叠样式表）基础知识

     CSS 指层叠样式表 (Cascading Style Sheets).样式定义怎样显示 HTML 元素.它通常存储在样式表中,把样式加入到 HTML 4.0 中,解决内容与表现分离的问题. 当同一 ...

  3. Html和Css学习笔记-html基础知识

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...

  4. HTML+CSS+JS基础知识

    HTML+CSS+JS基础知识 目录 对HTML+CSS+JS的理解 基础知识 对HTML+CSS+JS的理解 基础知识 插入样式表的三种方式 外部样式表:<link rel="sty ...

  5. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  6. CSS的一些基础知识

    <!DOCTYPE html><html><head><meta charset="utf-8"><title>标题&l ...

  7. css+js+html基础知识总结

    css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...

  8. css+div网页设计（一）--基础知识

    css是网页制作不可缺少的部分,我会用三篇博客为大家展示css的基本用法. 关于css+div的整体结构图总结如下: 本篇博客主要介绍css的基础知识. 一.css概念; css(级联样式表):它是一 ...

  9. CSS基础知识之float

    前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉).现对float进行更深入的学习,在此把学习心得分享给大家. 浮动 ...

  10. (转)第一天　XHTML CSS基础知识 文章出处：标准之路(http://www.aa25.cn/div_css/902.shtml)

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...

随机推荐

  1. waypoint+animate元素滚动监听触发插件实现页面动画效果

    最近在做一个官网类型滚动加载动画,使用到waypoint监听事件插件和animate动画样式,两者结合完美实现向下滚动加载动画,但是没有做向上滚动撤消动画,留待以后有空研究 首先来介绍下jquery. ...

  2. Latex algorithm

    方式一 需要包含的 \usepackage[noend]{algpseudocode} \usepackage{algorithmicx,algorithm} 源码 \begin{algorithm} ...

  3. Redis实用监控工具一览

    Redis已经成为web应用开发不可或缺的一个组成部分,在项目中的应用越来越广泛,这篇文章就来讲讲那些关于Redis监控的那点事. vredis-benchmark 1.1 简介 第一个就介绍一下,R ...

  4. git使用笔记一:

    Get code into Bitbucket fast using the command line Set up your local directory Set up Git on your m ...

  5. MyBatis的一级缓存和二级缓存

    一级缓存 是SqlSession级别的缓存,当使用了clearCache方法和,或者close方法的话,这个缓存失效,如果还有同样的查询,则还会发送一次查询 SqlSession session = ...

  6. 快速比较两个uiimage是否相等防止使用原始dsdata造成界面卡顿问题

    UIImage *imageLater = image1; UIImage *imagePre = image2; if (imageLater == imagePre){....}

  7. android与服务器交互总结（json，post，xUtils，Volley）

    http://www.23code.com/tu-biao-chart/ 从无到有,从来没有接触过Json,以及与服务器的交互.然后慢慢的熟悉,了解了一点.把我学到的东西简单的做个总结,也做个记录,万 ...

  8. Resolving 'Root Partition Is Filling Up' Issue on Sophos UTM Firewall

    from: https://wandersick.blogspot.com/2016/06/resolving-root-partition-is-filling-up.html This is a ...

  9. poj 2932 Coneology （扫描线）

    题意 平面上有N个两两不相交的圆,求全部最外层的,即不被其它圆包括的圆的个数并输出 思路 挑战程序竞赛P259页 代码 /* ************************************* ...

  10. Spring核心（ioc控制反转）

     IoC,Inversion Of Control 即控制反转,由容器来管理业务对象之间的依赖关系,而非传统方式中的由代码来管理. 其本质.即将控制权由应用程序代码转到了外部容器,控制权的转移就是 ...