HTML和CSS精要基础知识整理

首先要知道，HTML不被视为一种编程语言，因为它不能执行编程语言中常见的数学逻辑或其他功能。HTML是一种标记语言。

CSS 是用于网站的布局和设计样式表语言。CSS与HTML一般结合使用。

一个<h1>指定的东西作为一个页面上最重要的标题，另外还有h1到h6

<p>段落内容</p>

<img src="图片地址">

<a href="链接地址">点击我进入链接</a>

我们可以为元素赋予唯一的id或class属性，以便我们可以在CSS代码中专门针对它们并设置其样式。

页面结构：

<!DOCTYPE html>      告诉浏览器我们正在使用HTML5代码<html><head>        head标签放置了与HTML文档有关的元数据，也是对外部样式表，字体和脚本的引用的地方
<title>Page Title</title>
</head><body>
正文内容
</body></html>

div元素

HTML元素<div>表示文档中的分区或部分。它用于将页面上的内容分为“块”或“板块”

<div>
<h1>Hello World!</h1>
<p>Example paragraph</p>
</div>

我们可以将页面中的元素包装在div元素内，然后使用CSS设置页面的样式。

原则上，<div>仅当没有其他语义元素合适时才应使用该元素。

有序列表（带有数字编号）：

<ol><li>Red</li><li>Orange</li><li>Yellow</li>
</ol>

无序列表（带有符号点）：

<ul><li>Red</li><li>Orange</li><li>Yellow</li>
</ul>

合并和嵌套的例子：

<h4>My Color List</h4>
<ol><li>Red</li><li>Orange</li><li>Yellow<ul><li>Sunflower</li><li>Banana<ol><li>Frozen Banana</li><li>Non-Frozen Banana</li></ol></li></ul></li>
</ol>

table表格，每个表格行由<tr>元素指定，每个单元格由<td>元素指定。

<table><thead><tr><th>Name</th><th>Age</th><th>Breed</th></tr></thead><tbody><tr><td>Lassie</td><td>10</td><td>Rough Collie</td></tr><tr><td>Hector</td><td>6</td><td>German Shepherd</td></tr></tbody>
</table>

<form>元素用于创建表单，可以使用文本字段，单选按钮，复选框，下拉菜单，提交按钮以及许多其他类型的输入来填写表单。

<form action="/login" method="POST"><label for="username">Username:</label><input id="username" type="text"><label for="password">Password:</label><input id="password" type="password"><button>Login</button>
</form>

如何添加CSS？

推荐使用外部css

首先将CSS写入以.css扩展名结尾的文件中。在HTML文档中包括这些样式。要链接到我们的HTML文档中的外部CSS文件，请使用<link>元素，该元素具有href引用CSS文件路径的属性

<html>
<head> <title>示例标题</ title> <link rel="stylesheet" href="style.css">
</head>
<body>
<h1>测试标题</h1>
</body>
</html>

颜色

h1 {color: red;}h2 {color: #FF0000;}h3 {color: rgb(255, 0, 0);}

一些最常用的与文本相关的CSS属性包括：

font-family –更改目标文本的字体

字体大小 –控制字体的大小

font-weight –控制字体的粗细（例如，我们可以使用此属性制作粗体文本）

行高 –控制一行文本占用多少空间

文本对齐 –设置文本的对齐方式（左，右，居中）

文本装饰 –在文本上添加装饰线条{font-family：“ Arial”，sans-serif; font-size：20px; font-weight：粗体; 行高：2；文本对齐：居中；文字装饰：下划线；}

CSS中，有三种主要的选择器类型：元素选择器，类选择器和id选择器。

元素选择器，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

类选择器，我们可以使用HTML 类属性为一个或多个元素提供一个类，然后将该类用于定位那些用该类标记的元素，并在CSS中对其进行样式设置。

类选择器以点.前缀开头，后跟我们要定位的类名称

<h1 class="important">
This heading is very important.
</h1><p class="important">
This paragraph is very important.
</p>

*.important {color:red;}

或者

.important {color:red;}

ID选择器，当我们要定位页面上的单个唯一元素时，可以在HTML中为其指定id属性。我们可以使用指定的id通过CSS定位唯一元素，并为其指定样式。

<p id="intro">This is a paragraph of introduction.</p>

*#intro {font-weight:bold;}

ID选择器以哈希#前缀开头，后跟唯一的ID名称。

注意，id属性在页面上应该是唯一的。在HTML文档中，我们不应多次使用单个ID。如果我们需要定位多个元素，则应使用一个类来定义和定位所有元素。

此外，还有属性选择器等

HTML和CSS精要基础知识整理相关推荐

前端基础知识整理汇总（上）
前端基础知识整理汇总(上) HTML页面的生命周期 HTML页面的生命周期有以下三个重要事件: 1.DOMContentLoaded -- 浏览器已经完全加载了 HTML,DOM 树已经构建完毕,但是 ...
Web前端基础知识整理
1. 前端基础知识文件分类 XML(扩展标记语言) 装载有格式的数据信息,用于各个框架和技术的配置文件描述特点: 扩展名为.xml 内容区分大小写标签要成对出现,形成容器,只能有一个标签按正确 ...
HTML5的基础知识整理
HTML5 概述:HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定. HTML5的设计目的是为了在移动设备上支持多媒体. 文章目录 HTML5 前言一.HTMl ...
jQuery基础知识整理
jQuery基础知识整理 jQuery简介什么是jQuery(了解) jQuery简化JS代码 jQuery的核心思想:"写的更少,但做的更多"(write less,do mo ...
python常用变量名_python基础知识整理
Python Python开发 Python语言 python基础知识整理序言:本文简单介绍python基础知识的一些重要知识点,用于总结复习,每个知识点的具体用法会在后面的博客中一一补充程序: 一 ...
计算机二级c语基础知识,计算机二级C语基础知识整理.doc
计算机二级C语基础知识整理 1.1 算法算法:是一组有穷指令集,是解题方案的准确而完整的描述.通俗地说,算法就是计算机解题的过程.算法不等于程序,也不等于计算方法,程序的编制不可能优于算法的设计. ...
使用Aspose.Cells的基础知识整理
使用Aspose.Cells的基础知识整理转自 http://www.cnblogs.com/kenblove/archive/2009/01/07/1371104.html 这两天用Aspose. ...
前端基础知识整理汇总（中）
前端基础知识整理汇总(中) Call, bind, apply实现 // call Function.prototype.myCall = function (context) {context = ...
centos7创建asm磁盘_Oracle ASM 磁盘组基础知识整理（收藏版）
为什么要写这么一篇基础知识呢?还是有那么一点点原因的,不是胡编乱造还真是有真实存在的事件的,前两周里因一套生产环境数据库磁盘不足无法对其进行表空间扩容,需要向存储岗申请存储资源,当存储岗划好资源加完存 ...

HTML和CSS精要基础知识整理

HTML和CSS精要基础知识整理相关推荐

最新文章

热门文章