HTML与CSS基础学习概览-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_62856358/article/details/131235457

HTML学习报告

什么是HTML：

HTML 是用来描述网页的一种超文本标记语言。它不是一种编程语言，而是一种标记语言，英文全称是HyperText Markup Language，简称取各单词首字母。

HTML 有一套标记标签来描述网页，因此HTML文档中包含了HTML标签和文本内容；HTML文档也叫做web 页面。

HTML标签是由尖括号包围的关键词，通常成对出现，比如 <p> 和 </p> 标签对中的第一个标签是开始标签，第二个标签是结束标签；一个HTML元素包含了开始标签、内容、结束标签。

例如：

这是一个段落。

标签是可以嵌套的。

网页的构成

HTML文档

HTML文档结构

下载开发软件（例如：vscode）及插件(例如：“Live Server”扩展)，运行后打开或新建一个文件夹，新建一个后缀名为html的文件，并设置Auto Save（自动保存）；写入代码后，在文件编辑区点击右键可以使用快捷方式将该文件在浏览器中打开。

HTML文档结构分析

HTML使用标记来注明文本、图片和其他内容，其包含一些特定的“元素”，例如<head>，<title>，<body>，<header>，<footer>，<article>，<section>，<p>，<div>，<span>，<img>，<aside>，<audio>，<canvas>，<datalist>，<details>，<embed>，<nav>，<output>，<progress>，<video> 等等。

HTML文档分析如下：

<!DOCTYPE html>: 声明文档类型。
<html></html>: <html>元素。这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。
<head></head>: <head>元素。这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。
<meta charset="utf-8">: 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字，基本上能识别所有文本内容。
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">: 指定页面的图标，出现在浏览器标签上。
<title></title>: 设置页面标题，出现在浏览器标签上，当用户标记/收藏页面时它可用来描述页面。
<body></body>: <body>元素。包含能在页面看到的所有内容，包括文本，图片，音频等等。

HTML文档相关说明

空元素：没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。例如：<p>我可以<br>换行</p>，br即为空元素，还有<hr>, <input>, <img>等等。
注释：浏览器忽略的部分，对用户也不可见，仅用于对开发者描述各代码块是如何运行以及其功能等。注释需要用特殊记号包括起来，例如：<!--这是一个注释>。
元素属性：属性包括元素的额外信息，这些信息不会在浏览器中显示出来。一个属性必须包含这些内容：

1）一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)

2）属性名称，后面跟着一个 = 号。

3）一个属性值，由一对引号 “” 引起来。

HTML元素

标题

标题（Heading）是通过 <h1> - <h6>标签进行定义的。

<h1> 定义最大的标题，<h6> 定义最小的标题。

注：不要仅仅是为了生成粗体或大号的文本而使用标题。

超链接

HTML使用标签<a>来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，用户可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签<a> 中使用了href属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。

锚点：

也称为书签，用于标记页面的某个元素或位置，通过锚点，可以在页面内实现跳转。

先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。

例如：

<a id="tips">有用的提示部分</a>

在HTML文档中创建一个链接到"有用的提示部分(id=“tips”）"：

<a href="#tips">访问有用的提示部分</a>

或者，从另一个页面创建一个链接到"有用的提示部分(id=“tips”）"：

<a href="https://www.runoob.com/html/html-links.html#tips">

访问有用的提示部分

图片文件路径

在 HTML 中，图像由<img>标签定义。

<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。

表格

表格由 <table>标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

列表

列表分为有序列表和无序列表。

无序列表是一个项目的列表，此列项目使用 粗体圆点 进行标记。

无序列表使用<ul>标签。

有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

表单

HTML 表单是一个包含表单元素的区域，用于收集用户的输入信息。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）等等；可以使用 <form> 标签来创建表单。

其他

区块元素：区块元素在浏览器显示时，通常会以新行来开始（和结束）。例如：<h1>, <pre>, <ul>, <table>，<div> 等。
内联元素：内联元素在显示时通常不会以新行开始。例如: <b>, <td>, <a>, <img>等。

测验错题整理：

如何在新窗口打开链接：<a href="url"target="_blank">。
在下列的HTML中，可以插入背景图像的是：<bodybackground="background.gif">。
链接标记中的 href 属性指定：链接的目标。
当前文档和链接文档之间的关系是使用rel属性指定的。
<area>标记用于定义图像映射中的可单击区域。

CSS学习报告

CSS是在用HTML写出内容之后、将这些内容设置样式形态、最后呈现一个美妙页面的工具。
CSS全称是级联样式表，由HTML初步构成的网页中的页面布局、元素位置、距离、颜色、浮动度、透明度等等，都需要其设置操控。可以说，CSS是HTML的造型师。

关于语法

CSS样式有两个主要部分：选择器以及声明。

选择器：即需要改变样式的对象。

id选择器：id选择器前有# 号，且id选择器适用范围只有一个元素。
class选择器：class选择器前有.号，且元素的class值可以有多个。

声明：由一个属性和一个值组成，可以一条或多条，由{}包裹，多条声明之间用;分隔。

关于CSS生效

CSS生效方式有三种：外部样式表，内部样式表，内联样式。

外部样式表：在项目的目录里建立一个文件夹专门存放css样式表文件，与HTML内容分开，在HTML里应用时要引入css样式表的路径，达到清晰结构的目的，外部样式表也可以在其他页面复用。
内部样式表：直接将样式表放在HTML文件中应用，页面样式规则较少时可以采用这种方式。
内联样式：直接把样式规则写到要应用的元素中，这种方式将内容和样式合在一起，应用很不灵活。
级联优先级：内联样式>内部样式表或外部样式表>浏览器缺省样式

关于属性

颜色。例：<h3 style="background-color:Orange;">Orange</h3>
尺寸。例：.example {width: 100%;height: 200px;}
对齐。例： text-align: center;
边框与边距。例：.example-3 {border: 1px solid grey;border-radius: 15px; /* 边框圆角 */}
padding: 25px 50px 75px 100px; /* 简写形式，按上，右，下，左顺序设置 */
定位。元素定位有多种形式：

static 静态：元素默认的定位方式，即按照元素在 HTML出现的先后顺序从上到下，从左到右进行安排。
relative 相对：相对于静态位置进行偏移。
fixed 固定：使得元素固定不动。
absolute 绝对：绝对定位，使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。

溢出。overflow溢出属性有以下几个值：

visible ：默认值，溢出部分不被裁剪，在区域外面显示。
hidden ：裁剪溢出部分且不可见。
scroll ：裁剪溢出部分，但提供上下和左右滚动条供显示。
auto ：裁剪溢出部分，视情况提供滚动条。

浮动。float浮动属性可以使元素水平方向上移动，最终构成合理布局。例： .example-float-right { float: right; }
不透明度。opacity不透明度可以设置任何元素，多用于图片。

关于组合选择器

组合选择器，即将元素、id和class选择器组合起来使用。

后代选择器。
子选择器。

关于伪类和伪元素

伪类、伪元素用于定义元素的某种特定的状态或位置等。语法例：selector:pseudo-class/pseudo-element { property:value;}

关于学习成果总结

没有下划线的超链接：a {text-decoration:none}
改变元素的字体：font-family:
CSS3创建圆角：- border-radius: 30px;
CSS强制换行：word-wrap: break-word;
CSS3旋转对象： transform: rotate(30deg);

HTML和CSS学习体会

通过对HTML的学习我发现HTML是十分重要的一个超文本标记语言，它虽然不是一门编程语言，但是它的功能却十分强大：通过其中包含的各种标签标签我们就可以根据自己的需要来设计一个网页，把我们想要表达的内容放进这个网页当中。然而仅仅通过HTML是不能设计出好的网页样式的，要想更好的设计出一个整洁美观的网页还需要使用CSS技术。

因此，对于HTML的学习要和CSS相互结合运用，这样才能设计出内容新颖、样式显眼的网页。