[HTML & CSS] HTML和CSS基础知识

时间：2022-11-14 16:14:48

最近将博客简单地修饰了下，需要用到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（填充）+ 内容。

[HTML & CSS] HTML和CSS基础知识

CSS布局模型

流动模型（Flow）

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

浮动模型（Float）

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

层模型（Layer）

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

 

单位和值

颜色值

四种表示方法，

1 p{color: red;}
2 p{color: rgb(100,100, 00);}
3 p{color: rgb(20%,20%,20%);}
4 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% 。

 

标签：

相关文章