HTML+CSS-JZTXT

many前端插件：

auto close tag、auto rename tag、chinese、code spell checker、css peek、error lens、html play（ctrl+alt+h预览）、live server、path intellisense、vscode-icons、Material Theme（皮肤）、ESlint+Prettier（强迫症）、Bracket Pair Colorizer 2（括号）、Image preview（图片）、Highlight Matching Tag（匹配标签）

过程：

前端---->浏览器渲染---->呈现在用户面前

标准：

结构 html
样式 css
行为 js

HTML

格式

vscode输入html:5或者!，就会有格式

字符集

utf-8最常用的，包含全时间国家需要的
GB2312简单中文，6763个汉字
BIG5繁体中文
GBK包含全部中文字符，GB2312的扩展，加入对繁体字的支持

出现乱码，一般utf-8和GBK相互转换

<!DOCTYPE html>    //说明使用的是html 5版本
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>first</title>
</head>
<body>
    hello world
</body>
</html>

双标签：
<html></html>：也叫根标签，所有html中标签的一个根节点
<head></head>：用于存放title、meta、base、style、script、link。必须要设置title
<title></title>：标题
<body></body>：主体部分
<p></p>：段落
<div></div>和<span></span>：布局用的盒子

<b></b>和<strong></strong>:加粗文字
<i></i>和<em></em>：斜体
<s></s>和<del></del>：加删除线
<u></u>和<ins></ins>：加下划线
b i s u只用使用，没有强调作用

<a href="跳转目标" target="目标跳转的方式"></a>

<ul><li></li></ul>：无序列表
<ol><li></li></ol>：有序列表

<audio src="1.mp3" controls="controls"></audio>音频
<video src="exa.mp4" controls="controls" hight="300px" width="300px"></video>视频

<cavas></cavas>画布
<svg></svg>矢量图

单标签：
<img />:图片   <img src="" /> 
<hr />:水平线
<br />:换行
<base />:可以设置链接跳转的方式

图像

 	1. 基本图像的插入
    <img src="https://www.baidu.com/favicon.ico" />
    2. alt:图片不能显示时替换的文本
    <img src="x" alt="这是图片无法显示时所替换的文本">
    3. title：鼠标在图像处悬停时的文字
    <img src="https://www.baidu.com/favicon.ico" title="百度一下，你就知道">
    4. width和height一般给一个就行，两个都给要算太烦了
    <img src="https://www.baidu.com/favicon.ico" width="55"/>
    5. border带有边框的图像
    <img src="https://www.baidu.com/favicon.ico" border="10"/>

标签属性

<标签名属性1="属性值" 属性2="属性值2" ...>内容</标签名>

<hr widh="666" color="red">

特殊符号

&lt;	<
&gt;	>
&nbsp;	空格
&amp;	&

列表

快捷方式:

ul>li*4
ol>li*4

li相当与容器标签,但是ul或ol里面只能放li

无序列表

<ul>
     <li>列表1</li> //li相当与容器标签,但是ul里面只能放li
     <li>列表2</li>
    <li>
    	<h4>
          okokok
        </h4>
        <p>
            1111
        </p>
    </li>
</ul>

有序列表

<ol>
        <li>第一名</li>
        <li>第二名</li>
        <li>第三名</li>
        <li>第四名</li>
        <li>第五名</li>
    </ol>

自定义列表(尽量用)

<dl>
        <dt>大熊</dt>
        <dd>胖虎</dd>
        <dt>ojbk</dt>
        <dd>ok</dd>
    </dl>

声音

<audio controls="controls">
	<source src="1.mp4">
    <source src="2.mp4>"
</audio>
   或者
<audio src="1.mp4" controls="controls"></audio>

视频

<video controls="controls">
	<source src="1.mp4">
    <source src="2.mp4>"
</video>
   或者
<video src="1.mp4" controls="controls"height="300px" width="300px" ></video>

CSS

h1{color:red;font-size:14px;}

由选择器和一对括号组成
大括号里面是一条一条的声明语句
由分号分隔
每一条语句由“属性:值”组成
属性值一般不加引号
添加数据一般不加单位，默认为像素
不能出现html标签

书写方式

嵌入式：将css代码嵌入到html文件，通过<style>标签将代码嵌入到html中。
语法规则：
```
<style type="text/css">
        选择器{属性:值;属性:值;}
    </style>
```
外链式：新建一个css文件，然后再<head>里引入<link>标签，可以同时引入多个

<link rel="stylesheet" href="CSS文件的地址">

行内式：

<div style="width: 100px;background-color: brown;height:100px"></div>

基本选择器

类选择器，或者p.h{}设置段落里面为h的类

   <style type="text/css">
        .h{
            background-color:red;
        }
    </style>
    
    <p class="h">这是一个不一样的段落</p>

id选择器

<style type="text/css">
        #title{
            background-color: aliceblue;
        }
    </style>
    
    <p id="title">这是一个id选择器控制的段落</p>

复合选择器

伪类选择器

要按照顺序写

尺寸样式

div标签可以设置宽高

span标签不能设置宽度和高度，它是一个行内元素，只有块级元素才可以设置宽度和高度

文本属性

在段落里，想给某几个字设置属性可以使用<span class="123"></span>

JZTXT

HTML+CSS