插件	说明
Open in Browser	右击选择浏览器打开html文件
JS-CSS-HTML Formatter	每次保存，都会格式化代码
Auto Rename Tag	同步修改HTML/XML标签
CSS Peek	追踪至样式
Live Server	自动监测代码修改并在浏览器响应
Prettier	格式化代码(缩进2格)
HTML Snippets	自动输入Html标签

常用标签

标题标签

    <h1>标题标签</h1>
    <h1>标题一共六级选,</h1>
    <h2>文字加粗一行显。</h2>
    <h3>由大到小依次减，</h3>
    <h4>从重到轻随之变。</h4>
    <h5>语法规范书写后，</h5>
    <h6>具体效果刷新见。</h6>

段落和换行标签

 <p>我是段落标签<br />我是换行标签</p>

文本格式化标签

   我是<strong>加粗</strong>的文字
    我是<b>加粗</b>的文字
    我是<em>倾斜</em>的文字
    我是<i>倾斜</i>的文字
    我是<del>删除线</del>
    我是<s>删除线</s>
    我是<ins>下划线</ins>
    我是<u>下划线</u>

xxxxxxxxxx #查看设置的属性git config –global -l# socks5协议，1080端口修改成自己的本地代理端口，开启此代理后push时不可# 以免密码登录git config –global http.https://github.com.proxy socks5://127.0.0.1:10808git config –global https.https://github.com.proxy socks5://127.0.0.1:10808# http协议，1081端口修改成自己的本地代理端口git config –global http.https://github.com.proxy https://127.0.0.1:10809git config –global https.https://github.com.proxy https://127.0.0.1:10809#此处只对github加速，对其他不加速，使用的代理为v2ray中的代理端口#取消限定github的代理git config –global –unset http.https://github.com.proxygit config –global –unset https.https://github.com.proxybash

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

图像标签

   <h4> 图像标签的使用:</h4>
   <img src="img.jpg"/>
    alt 替换文本 图像显示不出来的时候用文字替换，
    title 提示文本 鼠标放到图像上,提示的文字，
    width 给图像设定宽度
    height 给图像设定高度
    border 给图像设定边框
   <img src="img.jpg" alt="我是pink老师" title="我是pink老师思密达"  width="500" border="15"/>

路径

同一级路径

 <img src="img.jpg" />

下一级路径

 <img src="images/img.jpg" />

超链接标签

<h4>1.外部链接</h4>
    <a href="http://www.qq.com" target="_blank"> 腾讯</a>
    target 打开窗口的方式  默认的值是 _self 当前窗口打开页面  _blank 新窗口打开页面

<h4>2.内部链接: 网站内部页面之间的相互链接</h4>
    <a href="gongsijianjie.html" target="_blank">公司简介</a>

<h4>3.空链接:#</h4>
    <a href="#">公司地址</a>

<h4>4.下载链接: 地址链接的是 文件 .exe 或者是 zip 等压缩包形式</h4>
    <a href="img.zip">下载文件</a>

<h4>5.网页元素的链接</h4>
    <a href="http://www.baidu.com"><img src="img.jpg"/></a>

描点定位

CSS

创建CSS

简介

CSS主要用于设置HTML页面中的

文本内容（字体、大小、对齐方式等）
图片的外形（宽高、边框样式.边距等）
版面的布局
外观壶示样式

CSS规则由两个主要的部分构成：

选择器
一条或多条声明。

选择器

1.语法简介

选择标签用的

 <style>
        /* 选择器 {样式} */
        /* 给谁改样式 { 改什么样式} */
        p {
            color: red;
            /* 修改了文字大小为12像素 */
            font-size: 12px;  
        }
 </style>

选择器是用于指定CSS样式的 HTML标签，花括号内是对该对象设置的具体样式
属性和属性值以“键值对”的形式出现
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
属性和属性值之间用英文:分开
多个“键值对”之间用英文;进行区分
选择器(标签）和大括号中间保留空格

2.基础选择器

标签选择器

可以选出所有相同的标签，使用情况较多
Html标签名作为选择器，不可以差异化选择

展示：

<style>
    /* 标签选择器 : 写上标签名 */
    p {
        color: green;
    }
    div {
        color: pink;
    }
  </style>
<body>
    <p>男生</p>
    <div>女生</div>
</body>

类选择器

可以选择一个或几个标签，可以根据需求选择
样式点定义（类名自己起，不可用标签名，长的名字用短横线分割，要有意义），结构类(class)调用，开发最常用
命名规范

.类名 (class属性) {
    属性1: 属性值1;
}

展示：定义与调用：

 <style>
      .red {
          color: red;
      }
    </style>
<body>
    <ul>
        <li class="red">冰雨</li>
    </ul>
</body>

多类名

给一个标签指定多个类名(class) <div class="red font35"></div>，多个类名中间用空格分开

可以把一些标签元素相同的样式(共同的部分)放到一个类里面.这些标签都可以调用这个公共的类,然后再调用自己独有的类.

简单应用

<style>
.red {
            width: 100px;
            height: 100px;
            /* 背景颜色 */
            background-color: red;
        }
</style>

id选择器

一次只能选一个标签，ID属性只能在每个HTML文档中出现一次，一般和js搭配使用
样式#定义，结构id调用（只不过是把class改成id，.改成#）
只能调用一次，别人切勿使用

#id名 {
    属性1: 属性值1;
}

id选择器和类选择器的区别

类选择器( class )好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。id选择器好比人的身份证号码，全中国是唯一的，不得重复。

通配符选择器

选取页面中所有的元素(标签)，选择的太多，特殊情况使用

<style>
* {
    color: red;
    /* 把所有的标签都改为红色(包括html等标签) */
}
</style>

字体属性

1.字体系列

通过font-family设置字体

<style>
p {
    font-family: "微软雅黑";
}
h2 {
    font-family: 'Times New Roman', Times, serif;
}
</style>

可以选择多个字体，多个字体用英文逗号分割
一个字体有多个单词时尽量用英文引号，单引号和双引号都可以
多个字体的目的，优先使用第一个字体，如果用户电脑上没有这个字体将使用下一个字体
如果这些字体都没有，使用浏览器自带字体
chrome默认字体，微软雅黑

2.字体大小

通过 font-size设置字号，常用单位为px(像素)

<style>
        body {
            font-size: 16px;
        }
        /* 标题标签比较特殊,需要单独指定文字大小 */
        h2 {
            font-size: 16px;
        }
</style>

后面要加px(像素)
chrome浏览器文字默认大小16px
可以给body指明文字大小，这样整个页面的文字的默认大小就改变了，有特殊情况特殊修改，标题标签比较特殊,需要单独指定文字大小

3.字体粗细

通过 font-weight设置字体粗细，加粗是700或bold，不加粗是normal或400，数字不带单位

<style>
      p {
    font-weight: normal | bold | bolder | lighter | number
    }
</style>

normal：正常字体，默认值
blod：粗体
bolder：特粗体
lighter：细体
number：数字100~900 (后面不要加单位) 开发时常用
- 700加粗(bold)，400变细(nomal)
示例，标题在使用的时候经常去掉加粗

4.文字样式（风格）

通过 font-style设置字体样式

<style>
    p {
    font-style: normal | italic;
    }
</style>

normal：普通样式，italic：斜体样式
一般用于将斜体改为正常体

5.符合属性

通过 font设置字体连写，有顺序，字号和字体必须要出现

<style>
    body {
         font: font-style  font-weight  font-size/line-height  font-family;
    }
</style>

注意!顺序不能更换，里面各属性空格隔开
不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则 font 属性将不起作用
是否倾斜粗细字体大小什么字

文本外观属性

1.文本颜色

通过 color设置

div {
    color: red;
}

预定义的值：各种英文单词
十六进制的值：#ff0000(red) 开发最常用
RGB写法：rgb(200,0,0)或rgb(100%,0%,0%)

2.文本对齐

通过 text-align设置

注：只能设置元素类文本水平对齐格式

div {
    text-align: center | left | right;
}

left：左对齐 (默认值)
right：右对齐
center：居中对齐

3.文本修饰

通过 text-decoration可以给文本添加下划线、删除线、上划线等

p {
    text-decoration: none | underline | overline | line-through;
}

none：默认值，没有装饰（最常用）
underline：下划线。链接a自带下划线（常用）
overline：上划线。（几乎不用）
line-through：删除线（不常用）

实例：去除链接的下划线

a {
    text-decoration: none;
}

4.文本缩进

通过 text-indent 用来指定文本的第一行的缩进，通常是将段落的首行缩进。

p {
    text-indent: 20px | 2em;
    /* 首行缩进20px */
    /* 2em是当前2个文字大小 */
}

单位em，em是一个相对单位，相当于当前一个元素font-sie的大小,如果当前元素没有设置大小，则会按照父元素的1个文字的大小。 开发常用

5.行高

通过 line-height 控制行与行之间的距离

p {
    line-height: 26px;
}

行间距=上间距+文本高度+下间距

CSS引入方式

css有三种样式表

行内样式表(行内式)—控制一个页面
内部样式表(嵌入式)—控制一个标签
外部样式表(连接式)—控制多个页面

内部样式表

在html页面内部写样式,但是是单独写到style标签内部.
是将CSS代码抽取出来，放到style标签中
理论上 style 可以放到任何地方，但默认放在 head 里。
通过此种方式，可以控制当前整个页面中的元素样式设置

 <style>
            div {
                color: pink;
            }
 </style>

行内样式表

style是标签属性，只能控制当前标签

代码样例：

<p style="color: pink; "></p>

外部样式表

适合样式使用较多的情况
在外部单独写一个css页面

操作步骤

新建一个.css文件，把之前在style标签里写的写在css文件里。style.css
在HTML页面中在 head 里写 <link> 标签来引入这个页面
```
<link rel="stylesheet" herf="css文件路径">
```

制作页面整体步骤

搭建html结构页面（标题，div之类的）
修改css样式(文字多大什么字体啊)

Wgm

http://example.com/2022/12/08/html-CSS/

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 Wgm !

前端

基于卷积神经网络的图片分类

学习猫狗分类代码！

2022-12-18 学习笔记

CNN

工具使用

本文介绍常用工具。

2022-12-08 工具使用

工具使用

html+CSS

Html

学习资料搜集

准备工作

常用标签

标题标签

段落和换行标签

文本格式化标签

图像标签

路径

同一级路径

下一级路径

超链接标签

描点定位

CSS

简介

选择器

1.语法简介

2.基础选择器

标签选择器

类选择器

多类名

id选择器

id选择器和类选择器的区别

通配符选择器

字体属性

1.字体系列

2.字体大小

3.字体粗细

4.文字样式（风格）

5.符合属性

文本外观属性

1.文本颜色

2.文本对齐

3.文本修饰

4.文本缩进

5.行高

CSS引入方式

内部样式表

行内样式表

外部样式表

制作页面整体步骤