HTML+CSS学习笔记每周三持续更新＞

时间：2022-12-06 17:00:01 tvb25sl传感器

实训笔记

Day1

一、Typora快捷键

二、Git

1、工作原理

Workspace：工作区
Index / Stage：暂存区
Repository：仓库区(或本地仓库)
Remote：远程仓库

2、命令行

代码	作用
git config --global user.name “xxx”	添加用户名
git config --global user.email “xxx”	添加邮箱
git config --list	查看配置
pwd	命令用于当前目录
git init	将当前目录变成git可管理的仓库
git add	将文件提交临时存储区
git commit -m “message”	提交文件，message是提交的注释
git status	检查是否有文件未提交
git diff	查看文件修改的金额是多少？
git log	查看历史记录
git log --pretty=oneline	查看简介的历史记录
git reset --hard HEAD^	回到上一个版本，如果需要回到两个版本，git reset --hard HEAD^^
git reset --hard HEAD~10	回到前十个版本
cat	查看文件内容
git reset --hard <版本号>	返回到相应的版本号
git reflog	查看版本号

3.了解工作区与暂存区的区别

第一步：使用 git add 添加文件实际上是在临存区添加文件。

第二步：使用git commit提交变更实际上是将暂存区的所有内容提交到当前分支。

4、Git撤销修改和删除文件操作

1、撤销修改：

直接手动更改和删除所需文件，然后add加入临存区，最后commit掉。
使用 git reset --hard HEAD^
使用git checkout -- 可以丢弃工作区的修改.

命令 git checkout --readme.txt 意思是，把readme.txt在工作区修改文件全部撤销，这里有两种情况：

1.readme.txt自动修改后，未放置在临时存储区域，使用撤销修改将回到与版本库完全相同的状态。
2.另一种是readme.txt已放入临时存储区域，然后进行修改，撤销修改回到添加临时存储区后的状态.

2、删除文件

rm 删除文件

如果我想从版本库中完全删除这个文件，我可以再次执行它commit命令提交掉

三、创建云仓库

一、创建GitHub或Gitee账户

二、建立云仓库

三、建立连接当地仓库和云仓库

git remote add origin <仓库地址>

四、上传流程

一、git add .

. 意思是将当前工作区所有文件添加到暂存区

二、git commit -m “massege”

提交文件，注释massege

三、git remote add origin “https://gitee.com/Nan_Cheng7/nan-cheng-itstudy.git”

建立连接、

四、git pull --rebase origin master

在当前文件夹内添加Readme文件

五、git push origin master

推送拉取文件

Day2

1、HTML基本 标签:

html标签通常是成对的，比如和，我们称之为双标签
一些特殊的标签必须是单个标签，例如
，我们称之为单标签

一、标签关系：

包括关系和并列关系：
包括关系(父子关系):

<head>  <title>  <title> head&g;

并列关系(兄弟关系):

<head>
head>
<body>
body>

二、基本结构标签

<html>html>页面中最大的标签，我们称之为根标签
<head>head>文档的头部，在head标签中我们必须要设置的标签是title
<title>title>文档的标题，让页面拥有一个属于自己的网页标题
<body>body>文档的主体，元素包含文档的所有内容，页面内容基本都是方法body 里面的

三、HTML页面

<html>
	<head>
		<title> 第一个页面 title>
	head>
	<body>
	南城的第一个页面
	body>
html>

2.HTML标签：

一、标题-段落-换行

1.标题：

<h1>h1>
   ...
<h6>h6>

标题等级依次递减

2.段落：

<p>p>

将HTML文档分割为若干个段落

特点：

1.文本在一个段落中会根据浏览器窗口大小自动换行

2.段落和段落之间保有空隙

3.换行：

<br/>

单标签，强制执行换行，在p标签内使用可以执行换行操作，未到浏览器窗口末尾，也可执行换行。

二、新闻案例

代码：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻案例title>
head>
<body>
    <h1>外媒：美国高校扎堆向泽连斯基送学位h1>
    <p>
        <i>参考消息网5月13日报道i>乌通社13日消息，位于美国宾夕法尼亚州詹金敦市的曼诺
      <br/>学院（Manor College）日前授予乌克兰总统泽连斯基人文学名誉博士学位。
    p>
    <p>
           据报道，乌克兰驻美国名誉领事伊琳娜·马祖尔代表泽连斯基领取了学位证书，并在脸书
      <br/>网站上宣布了这一消息。她写道：“代表乌克兰总统领取这一名誉学位证书对我来说是一
      <br/>种莫大的荣幸。感谢曼诺学院的倡议，该倡议现在已得到了另外26家美国教育机构的支持
      <br/>。”
    p>
    <p>
        作者：NanCheng<br/>
        2022-5-13
    p>
body>
html>

代码实现页面：

三、HTML常用标签

1、文本格式化标签

标签	作用
strong / b	加粗文字
em / i	倾斜文字
del / s	删除线文字
ins / u	下划线文字

2、容器标签

一、div标签

div是大盒子，一行只能放一个，也叫做行标签，其后面的内容会被放到下一行

代码：

<div>我是一个div标签，我一个人独占一行div><span>百度span>

页面：

二、span标签

span是小盒子，一行可以放多个span

代码：

	<div>我是一个div标签，我一个人独占一行div>
    <div>我是一个div标签，我一个人独占一行div>
	<span>百度span>
    <span>搜狐span>
    <span>新浪span>

页面：

3、图像标签

一、标签代码：

<img src = "URL" />

src是img标签的必须属性，它用于指定图像文件的路径和文件名。所谓属性——简单理解就是这个图像标签的特性。

二、属性：

属性	作用
src	图片的路径
alt	替换文本，当图像显示不出来的时候用文字代替
title	提示文本，鼠标放到图像上提示的文字
weight	图片的宽度
height	图片的高度

注意：

图片可以拥有多个属性，达纳斯属性必须放在标签名后面。

属性之间不分前后顺序，标签名与属性、属性与属性之间均以空格分开，不可以连在一起。

属性采用键值对的格式，即key = “value” 的格式，属性 = “属性值”。

在设置图片的宽度和高度的时候，一般只会设置一个属性，让图片进行等比例缩放，这样图片不会有市镇，压瘪的情况。

4、路径

一、目录文件夹：

就是普通文件夹，只不过里面存放了我们做页面所需要的相关素材，比如html文件、图片等。

二、根目录

三、路径

1.相对路径：

以引用文件所在位置为参考基础，而建立初的目录路径。
简单来说就是图片相对于html页面的位置。
三种情况：
   同一级路径 直接引用 例如： 
   下一级引用  /   例如 
   上一级引用 ../  例如

2.绝对路径：

是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

代码及页面：

<h3>同一级路径引用h3>
<img src="张中银.jpg" />
<h3>上一级文件夹下的图片引用h3>
<img src="../image/张中银.jpg" />
<h3>绝对路径的引用h3>
<img src="G:\HTML_Study\src\com\NanChengIT\Study\张中银.jpg" />
<h3>绝对路径用于互联网的使用h3>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0ab8e5096ac6f08bd632e4d5a15d1792.jpg?w=632&h=340" />

5、超链接标签

一、语法格式：

<a href = "跳转目标" target = "目标窗口的弹出方式" >文本或图像a>

二、属性：

属性	作用
href	用于指定链接目标的url地址(必须属性)
target	用于指定链接页面的打开方式，其中_self 为默认值， _blank为在新窗口中打开方式

三、链接分类：

1.外部链接：例如``百度`

2.内部链接：例如路径

3.空链接：如果当时没有确定链接目标时，首页

4.下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件

5.网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。

6.脚本链接：链接到JavaScrip，以启动某些脚本

7.图片链接：将图像标签放在链接标签中就构成了图片链接，其中href指明的是点击图片链接后跳转的网页地址。

8.热区链接：除了对整幅图像设置超链接外，还可以将图像划分为若干区域，这叫做"热区"，每个区域可设置不同的超链接。此时，包含热区的图像可以称为映射图像。

代码：

要进行热区设置，首先需要在图像文件中设置映射图像名。

1> 格式:

<img src = 图像文件地址 usemap = 映射图像名称>

也就是说，此时需要使用标记的usemap属性，定义图像的映射图像名。

2> usemap属性

在图像中定义各个热区以及超链接了，主要语法为：

<map name = 映射图像名称>
<area shape = 热区形状1 coords = 热区坐标1 href = 链接地址1>
<area shape = 热区形状2 coords = 热区坐标2 href = 链接地址2>
<area shape = 热区形状n coords = 热区坐标n href = 链接地址n>
map>

四、锚点链接：

点击设置的锚点，可以快速的定位到页面中的某个位置。

在链接文本的href属性中，设置属性为#名字的形式，如：

<a href = "#作品列表" > 作品列表 a>
<h1 id = "作品列表">作品列表h1>

点击作品列表之后，可以快速定位到标题为作品列表的位置。

id 和 name 属性在锚点链接中是等价的。

例：

<a href = "#1">基本信息a><br/>
<a href = "#2">演艺经历a><br/>
<h2 id = "1">基本信息h2>
<p> 
刘德华（Andy Lau），1961年9月27日出生于中国香港，籍贯广东新会，中国香港影视男演员、歌手、制片人、作词人。1981年出演电影处女作《彩云曲》。1983年主演的武侠剧《神雕侠侣》在香港取得62点的收视纪录<sub> [1-2]sub>  。1985年发行首张个人专辑《只知道此刻爱你》 <sub>[11]sub>  。1990年凭借专辑《可不可以》在歌坛获得关注<sub> [12]sub>  。1991年创办天幕电影公司 <sub>[3]sub>  。1994年获得十大劲歌金曲最受欢迎男歌星奖；同年担任剧情片《天与地》的制片人 <sub>[4]sub>  。1995年在央视春晚上演唱其代表作《忘情水》 <sub>[13]sub>  。2000年凭借警匪片《暗战》获得金像奖最佳男主角奖 <sub>[5]sub>  ；同年被《吉尼斯世界纪录大全》评为获奖最多的香港男歌手 <sub>[14]sub>  。p>
<h2 id = "2">演艺经历h2>
<p>
1982年，刘德华以甲级成绩从艺员训练班毕业后正式签约TVB [26]  。同年在喜剧《花艇小英雄》中饰演败家仔钱日添。12月，与叶德娴搭档主演时装警匪剧《猎鹰》，凭借卧底警察江大伟一角获得关注[27]。
1983年，主演金庸武侠剧《神雕侠侣》，在剧中饰演外貌俊俏、倜傥不羁的杨过 [28]  ；该剧在香港播出后取得62点的收视纪录。同年，与黄日华、梁朝伟、苗侨伟、汤镇业组成“无线五虎将”[29]。
p>

四、注释和特殊字符

1、注释：

注释的符号一般为,在里面的在里面的内容会被注释掉，起到给予代码解释的作用。VScode中可以使用CTRL+/来进行快速生成注释。

2、特殊字符：

由于在HTML文件中，<和>是构成标签的字符，空格也会被页面初始化，所以无法在页面中单独显示，则需使用一些特殊的代码让其在HTML页中显示出来。

其中：

代码	代表的字符
	空格
<	<
>	>

五、表格

一、作用：

表格的主要作用是用来显示、展示数据的，因为它可以让数据显示的十分规整，可读性非常好。特别是后台展示数据的时候能够熟练的运用表格就显得非常重要。一个清爽简约的表格能够把复杂的数据表现得很有条理。

二、代码展示：

<table> 表格标签
  <tr>        
     <th>表头单元格，常位于单元格的第一行，里面的文字回加粗并且居中显示.
     th>
  tr>
  <tr>    表格内行标签
     <td>    表格内数据标签
         数据……
     td>
  <tr/>
table>

三、属性：

表格标签的属性在实际开发中并不常用，后面会通过css来设置。

表格标签的属性需要写道
标签

属性属性值作用

align left、center、right 规定表格相对周围元素的对齐方式

border 1 或 “” 规定表格单元是否拥有边框，默认""，表示没有边框。

cellpadding 像素值规定单元边沿预期内容之间的空白，默认1像素(就是单元格到内文字到单元格)

cellspacing 像素值规定表格之间的空白，默认2像素 (每个单元格的边界线之间的距离)

width 像素值或百分比规定表格的宽度 (类似于图片的高和宽)

height 像素值或百分比规定表格的高度

四、实例代码：

<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="300"> <tr> <th>姓名th> <th>性别th> <th>成绩th> <th>学号th> tr> <tr> <td>汪td> <td>男td> <td>90td> <td>202101td> tr> <tr> <td>熊td> <td>女td> <td>89td> <td>202102td> tr> <tr> <td>李td> <td>男td> <td>88td> <td>202103td> tr> <tr> <td>浩td> <td>男td> <td>87td> <td>202104td> tr> table>

页面：

四、合并单元格

属性作用

跨行合并 rowspan = “合并单元格的个数”

跨列合并 colspan = “合并单元格的个数”

目标单元格：

跨行：最上侧单元格为目标单元格，写合并代码

跨列：最左侧单元格为目标单元格，写合并代码

合并单元格三步曲：

1.确定是跨行合并还是跨列合并

2.找到目标单元，写上合并方式 = 合并的单元格数量。比如：

3.删除多余的单元格
	<h1 align="center">合并单元格h1>
    <table border="1" align="center" cellspacing="0" cellpadding="50">
        <tr>
            <td> td>
            <td colspan="2">左右的是跨列 td>
        tr>
        <tr>
            <td rowspan="2">上下的是跨行td>
            <td>td>
            <td>td>
        tr>
        <tr>
            <td>td>
            <td> td> 
            锐单商城拥有海量元器件数据手册、IC替代型号，打造电子元器件IC百科大全！
          

属性	属性值	作用
align	left、center、right	规定表格相对周围元素的对齐方式
border	1 或 “”	规定表格单元是否拥有边框，默认""，表示没有边框。
cellpadding	像素值	规定单元边沿预期内容之间的空白，默认1像素(就是单元格到内文字到单元格)
cellspacing	像素值	规定表格之间的空白，默认2像素 (每个单元格的边界线之间的距离)
width	像素值或百分比	规定表格的宽度 (类似于图片的高和宽)
height	像素值或百分比	规定表格的高度

属性	作用
跨行合并	rowspan = “合并单元格的个数”
跨列合并	colspan = “合并单元格的个数”

HTML+CSS学习笔记每周三持续更新＞

1、HTML基本标签:

相关文章