CSS

CAMELLIA2024-06-012024-08-29

HTML

HTML基础知识

第一部分基础知识

1.1 标签的分类

按照标签的结构分类
- 围堵标签：<标签>内容</标签>
- 自闭合标签：<标签>
按照标签效果分类
- 行内标签：标签不会独占一行，会和其他标签共享一行。
- 块级标签：标签会独占一行，不会和其他标签共享一行。

1.2 标签嵌套规则

嵌套:一个标签（围堵）中可以写另一个标签

块级标签可以嵌套块级
1
2
3
4
5
<p>
<hr>
Camellia
<hr>
</p>

块级标签可以嵌套行内

1
2
3

<p>
   <em>Camellia</em><em>·XIAOHUA</em>
</p>

行内标签可以嵌套行内
1
2
3
<p>
<em><strong>Camellia·XIAOHUA</strong></em>
</p>
注意：要嵌套闭合
行内标签不能嵌套块级

行内嵌套块级，行内会失效。

1.3 基础标签

HTML注释
1

VsCode快捷键 ctrl+/
P标签
1
<p>My cat is very grumpy</p>
- 使用p标签将这行文字封装成一个段落元素来使其在单独一行呈现。
- 标签可以使大写也可以是小写。
em标签 ~语义化
1
<em>Camellia·XIAOHUA</em>
- 可以被网络检索到
- 阅读器看到em标签会改变读音。
- i标签只有一个斜体的效果

em元素将文本标记为强调（emphasis）格式。em元素可以嵌套，嵌套层次越深，则强调的程度越深。

a标签

herf：跳转链接
title：鼠标悬停，提示文字内容

target属性用于指定链接如何变成页面。

1	<a href="https://camelliaxiaohua.online" title="Camellia·XIAOHUA的个人学习记录网站" target="_blank">Camellia·XIAOHUA</a>

HTML空格

strong标签 ~语义化
1
<strong>Camellia.xiaohua</strong>
<b>只有加粗效果，没有语义化

1.4 标签的属性

属性必须包含
- 一个空格，它在属性和元素名称之间。如果一个元素具有多个属性，则每个属性之间必须由空格分隔。
- 属性名称，后面跟着一个等于号。
- 一个属性值，由一对引号（””）引起来。

布尔属性

1
2
3

<input type="text" disabled="disabled">请输入验证码
<!-- 可以直接将disabled的值省略。 -->
<input type="text" disabled>请输入验证码

建议不要省略

省略属性值引号用法
1
<a href=https://camelliaxiaohua.online>Camellia·XIAOHUA</a>
不要省略，因为在判断多个属性用空格隔开的时候会判断混乱。
Camellia·XIAOHUA
属性的单引号与双引号
- 单引号和双引号均可，但应该注意单引号和双引号不能在一个属性值里面混用。
  1
  <a href="https://camelliaxiaohua.online'>Camellia·XIAOHUA</a>
- 不同引号可以嵌套，相同的不可以嵌套。
实体引用：在HTML中包含特殊字符

原义字符	等价字符引用
<	<
>	>
“	"
‘	'
&	&

第二部分 HTML基础结构

<!DOCTYPE html>
<html>
    <head>
        <title> </title>
    </head>
    <body>
        
    </body>
</html>

2.1 head标签

title标签：展示网页标题内容
meta标签：
- 设置编码集：
  - ascii、gbk、utf-8
    1
    <meta charset="utf-8" />
- 作者信息设置：
  - name属性：作者
  - content属性：作者信息
    1
    <meta name="Camellia·XIAOHUA" content="camelliaxiaohua.online"/>
- meta标签关键词(keywords)设置
  - name属性：keywords
  - content属性：关键字、关键字…
    1
    <meta name="keywords" content="Camellia,Java,前端,后端"/>
- meta标签的描述(description)设置
  - name属性：description
  - content属性：描述信息
    1
    <meta name="description" content="一个前端学习仓库" />

2.2 body标签

标题标签：
<h1></h1>、<h2></h2>、<h3></h3>、<h4></h4>、<h5></h5>、<h6></h6>
段落标签：
<p></p>
无序列表
1
2
3
4
5
6
<ul type="circle">
<li>豆浆</li>
<li>油条</li>
<li>豆汁</li>
<li>焦圈</li>
</ul>
⚠️ 警告：不要使用type属性，它已经被弃用了。请使用 CSS list-style-type 属性作为代替。

点击查看详情

有序列表
- type:
  - a 表示小写英文字母编号
  - A 表示大写英文字母编号
  - i 表示小写罗马数字编号
  - I 表示大写罗马数字编号
  - 1 表示数字编号（默认）编号类型适用于整个列表，除非在
    1. 元素中使用不同的 type 属性。

<ol type="A">
   <li>沿这条路走到头</li>
   <li>右转</li>
   <li>直行穿过第一个十字路口</li>
   <li>在第三个十字路口处左转</li>
   <li>继续走 300 米，学校就在你的右手边</li>
</ol>

点击查看详情

2.3 超链接标签

块级链接
任何内容，甚至块级内容都可以作为显示链接。如果想让标题内容变为链接，就把它包裹在锚点内容（）内，像这个代码段一样：
1
2
3
4
<a href="https://developer.mozilla.org/zh-CN/">
<h1>MDN Web 文档</h1>
</a>
<p>自从 2005 年起，就开始记载包括 CSS、HTML、JavaScript 等网络技术。</p>

图片链接
如果需要链接的图片，使用全文来概括要链接的。

1
2
3

<a href="https://developer.mozilla.org/zh-CN/">
  <img src="mdn_logo.svg" alt="MDN Web 文档主页" />
</a>

title：鼠标悬停，提示文字内容

target属性用于指定链接如何变成页面。

2.4 插入图片

插入本地图片：

1	<img src="images/dinosaur.jpg" alt="恐龙" />

插入网络图片：
1
<img src="images/dinosaur.jpg" alt="恐龙" />
不建议使用绝对 URL 进行链接。你需要托管你想要在网站上使用的图像，在比较简单的情况下，通常我们会把网站的图像保存在与 HTML 相同的服务器上。此外，从维护的角度来说，使用相对 URL 比绝对 URL 更有效率（当你将网站迁移到不同的域名时，你不需要更新所有 URL，使其包含新域名）。在更高级的设置中，你可能会使用内容分发网络（CDN）来传递图像。
img标签属性：
1. alt：它的值应该是图片的文本描述，用于在图片无法显示或者因为网速慢而加载缓慢的情况下使用。
2. title: 鼠标悬停展示提示。
3. width：宽度
4. height：高度
  1
  2
  3
  4
  <img
  src="dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"
  title="A T-Rex on display in the Manchester University Museum" />

2.5 相对路径和绝对路径

相对路径引用
- ./表示当前目录（默认，可以省略）
  1. 页面引用平级目录下的图片
  2. 页面引用平级目录文件夹下的图片
- ../页面引用上一级目录文件夹下的图片
绝对路径引用

2.6 表格

表格基础标签
- <table>：定义表格的开始和结束。
- <tr>（table row）：定义表格中的一行。
- <th>（table header）：定义表头单元格，通常显示为加粗居中的文本。
- <td>（table data）：定义表格中的标准单元格。
- <caption>：标签为表格添加标题。

表格的样式标签

border：设置表格的边框。
cellspacing：设置表格之间边框的距离。
cellpadding：指定表格单元格内容与单元格边框之间的空白（内边距）。
align：用于设置表格内容的对齐方式，包括水平对齐和垂直对齐。
bgcolor：设置表格的背景颜色。

<table border="1px" cellspacing="0" cellpadding="20px" align="center">
     <caption>User Information Table</caption>
     <tr bgcolor="pink" align="center">
         <th>name</th>
         <th>age</th>
         <th>city</th>
         <th>job</th>
     </tr>
     <tr align="center">
         <td>Camellia</td>
         <td>23</td>
         <td>杭州</td>
         <td>Java工程师</td>
     </tr>
     <tr align="center">
         <td>XIAOHUA</td>
         <td>22</td>
         <td>南京</td>
         <td>PHP工程师</td>
     </tr>
     <tr align="center">
         <td>HAHA</td>
         <td>27</td>
         <td>上海</td>
         <td>算法工程师</td>
     </tr>
 </table>

表格的跨行/跨列合并

跨列操作：保留左边的td,删掉右边的td,让左边的td合并右边的td colspan=”2”

<table border="1px" cellspacing="0" cellpadding="10px" align="center">
        <tr>
            <th>姓名</th>
            <th colspan="2">手机号</th>
        </tr>

        <tr>
            <td>张三</td>
            <td>135xxx</td>
            <td>138xxx</td>
        </tr>

        <tr>
            <td>李四</td>
            <td>131xxx</td>
            <td>199xxx</td>
        </tr>
    </table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

- 跨行操作：保留上面的td,删掉下面的td,让上面的td合并下面的td rowspan="2"

- ```html
  <table border="1px" cellspacing="0" cellpadding="10px" align="center">
          <tr>
              <th>姓名</th>
              <td>Camellia</td>
              <td>XIAOHUA</td>
          </tr>
          <tr>
              <th rowspan="2">手机号</th>
              <td>132xxx</td>
              <td>3214xxx</td>
          </tr>
          <tr>
              <td>136xxx</td>
              <td>167xxx</td>
          </tr>
      </table>

HTML

HTML基础知识

第一部分 基础知识

1.1 标签的分类

1.2 标签嵌套规则

1.3 基础标签

1.4 标签的属性

第二部分 HTML基础结构

2.1 head标签

2.2 body标签

2.3 超链接标签

2.4 插入图片

2.5 相对路径和绝对路径

2.6 表格

CAMELLIA

第一部分基础知识