html和css基础知识recap（含大量链接参考）

最新推荐文章于 2025-06-07 06:38:52 发布

硅星纯牛码

最新推荐文章于 2025-06-07 06:38:52 发布

阅读量337

点赞数

分类专栏：前端/后端文章标签： css html

本文链接：https://blog.csdn.net/spatial_coder/article/details/107147520

版权

前端/后端专栏收录该内容

3 篇文章

订阅专栏

HTML

树结构
html是树结构组织的，<p>content</p>中content内容可看出树的子节点，
可看作父节点。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>制作我的第一个网页</title>
</head>
<h1>Hello World</h1>
<body>
</body>
</html>

html标签的语法

标签由英文尖括号<和>括起来，如就是一个标签。
html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个/。
标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：
里嵌套
，那么
必须放在
的前面。如下图所示。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我是标题</title>
    </head>
    <body>
        <h1>我是一级标题</h1>
        <p>我是段落</p>
    </body>
</html>

html元素

<!DOCTYPE html>:文档类型声明，表示该文件为 HTML5文件。<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html>标签之前
<html></html>标签对：<html>标签位于HTML文档的最前面，用来标识HTML文档的开始；</html>标签位于HTML文档的最后面，用来标识HTML 文档的结束；这两个标签对成对存在，中间的部分是文档的头部和主题。
<head></head>标签对：标签包含有关HTML文档的信息，可以包含一些辅助性标签。如<title></title>，<link /><meta />，<style></style>，<script></script>等，但是浏览器除了会在标题栏显示<title>元素的内容外，不会向用户显示head元素内的其他任何内容。
<body></body>标签对：它是HTML文档的主体部分，在此标签中可以包含<p><h1><br>等众多标签，<body>标签出现在</head>标签之后，且必须在闭标签</html>之前闭合。

head-做个头

文档的头部描述了文档的各种属性和信息，包括文档的标题等，绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

head标签

表示头部标签,通常用来嵌套meta、title、style等标签。

title标签

在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么

其他元素

   <ul>
     <li>Rstudio</li>
     <li>swirl
      <ul>
        <li>ggplot2</li>        
       </ul>
     </li>
     </ul>

ul元素表示一组无序列表，li表示具体一个选项。

div（division）段落元素名
a（anchor）元素，创建超链接

<a href="https://www.udacity.com">work</a>

==注意a是元素,href是元素对应的属性。
格式注意点：

There is a space between a and href.
There are no spaces around the =.
The website has two " around it.
There are no spaces between the href attribute and the > of the opening tag.

img图像元素

<img src="http://somewebsite.com/image.jpg" alt="image description">

src属性意思是source attribute，代表指向放在网页上的图片的url链接。alt属性意思是alternative description。
img元素比较特别是不需要</>结尾，因为其是void element。
xml语法 void elements

路径
1.本地路径：
2.外部路径

figure

 <figure> 
<img src=" redwoods_state_park.jpg" alt=" redwoods_state_park">
   <figcaption>Stout Memorial Grove in Jedediah Smith Redwoods State Park in 2011 by Chmee2 (Own work) GFDL or CC BY-SA 3.0, via Wikimedia Commons -<a href="https://commons.wikimedia.org/wiki/File%3AStout_Memorial_Grove_in_Jedediah_Smith_Redwoods_State_Park_in_2011_(22).JPG">Source</a>
 </figcaption>
  </figure>

html绘制表格

<tr>代表一行，<td>代表一列。
https://www.jianshu.com/p/aa063f7e80ce

html comment

html注释的语法规则如下：

 <!-- This is a comment -->

span

是行内元素。在行内定义一个区域，也就是一行内可以被划分成好几个区域，从而实现某种特定效果。本身没有任何属性，与div的区别是div表示一个块级区域，更大。

CSS（Cascading Style Sheets）

css statement

css的基本构件模块以rule-set规则集形式开始，由选择器和声明模块组成。
在这里插入图片描述

html引用css的三种方法

内部引用
所谓内部引用就是运用style标签引用。
type="text/css"是指定MIME类型，其中：text是指对bai象为网页中的文du本
css或是javascript是指当前指zhi定的文本类型.
外部引用
外部引用就是用标签引用外部CSS文件中的样式。

<link rel="stylesheet" type="text/css" href="cssstyle.css">

内联引用
内联引用其实就是在应用CSS样式的HTML部分直接在所做用的标签上定义CSS样式，这种方法最直接，但是缺点也最明显，最大的问题就是代码繁冗，作用域也仅仅在定义的标签的作用范围。

<p style="color:#ccc">THIS TEXT IS GREY</p>

css comment

css注释的语法规则同C++：

p {
   color: blue;
}        
/* add CSS here */
h1 {
   color: red;
}

选择器

Tag Selectors

p {
  background-colors: pink;
}

p是就是一种标签选择器，该选择器可以将定义的css规则作用到所有同类型的标签中。

属性选择器

类属性选择器（class attribute selector）
类属性选择器的语法是.，在css中指定值的名称对应的样式。

<p class="booksummary"></p>

.booksummary{color:blue;}

注意，一个元素也可以指定多个类，如下面的例子。

<p class="highlight module right"></p>

ID选择器(id attribute selector)
每个标签的ID属性只能有一个。类属性选择器的语法是#

<p ID="site description"></p>

#ID{color:red;}

其他类型选择器

在这里插入图片描述
https://css-tricks.com/how-css-selectors-work/

css reference

在MDN上搜索样式参考。
在css-trick网站年鉴栏搜索参考。

css unit

css中的单位分为绝对单位和相对单位，绝对单位如像素、英尺等，相对单位有比率等。

css color

+颜色名与16进制值对应关系
开发者工具中带有网站取色器可获取16进制颜色参考值。
在这里插入图片描述
举个栗子：

body
  {
  color:red;
  }
h1
  {
  color:#00ff00;
  }
p
  {
  color:rgb(0,0,255);
  }

其他css样式

stylesheet

+在html中链接css样式

<link href="path-to-stylesheet/stylesheet.css" rel="stylesheet">

SCSS

SCSS是CSS预处理器。

其他学习资源

牛客网css参考手册