HTML 与 CSS：从 “认识标签” 到 “美化页面” 的入门指南

超文本（HyperText）：比文本强大，文本只能有文字，而是超文本指的是页面中包含的链接，可以包含音频、图片、补充或注脚等。
标记语言（Markup Language）：使用一系列预定义标签来描述网页的结构和内容，浏览器会根据这些标签解析并解析页面。在浏览器中，我们一般按快捷键F12，就可以显示该页面的html。
平台无关性：You浏览器解析html代码，无论在哪个操作系统，只要有浏览器就可以显示html页面。

⛲️3.HTML的基本结构

html 复制代码

<html>
    <head>
        <title>这是一个页面</title>
    </head>
    <body>
        hello
    </body>
</html>

html：是整个html文件的根标签（最顶层的标签）；
head：页面的属性；
title：页面标签标题；
body：页面显示内容。
body：页面显示内容。
效果显示：

⛲️4.标签的层次结构关系

html是head和body的父标签；
head与title：父子关系
head与body：兄弟关系

🎡二、HTML的常用标签

在VS Code中，创建xxx.html，直接输入！，可以自动生成代码的主题框架。

代码生成：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

可以Ctrl+/来注释；
Ctrl+s来保存，VS Code要记得保存。

常见标签

🌅1.文本列表标签

标题标签：h1-h6

html 复制代码

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

h1->h6:数字越大，字体越小

显示效果

段落标签：<p>

html 复制代码

<p>这是一个段落</p>

效果显示：

段落没有缩进，首尾空格均无效；
多个空格，都只算一个空格
如果想要多个空格，可以用&nbsp

换行标签：br

html 复制代码

    这是一个换行标签<br/>
    这是一个换行标签<br/>

<p>与<br/> 区别，p的间隔更大

🌅2.链接与资源标签（链接外部标签）

图片标签：img

html 复制代码

    <!-- 写法一 -->
    <img src="图片.jpg">
    <!-- 写法二 -->
    <img src="图.jpg" alt="这是一张图片">
    <!-- 写法三 -->
    <img src="图片.jpg" alt="这是一张图片" width="100px" height="100px">

效果显示

此时"图片.jpg"放在同一个目录下，有可以使用相对路径或者绝对路径。

alt：图片加载失败是显示的文本结构，上述我写的是错误的名称，所以无法加载出来。
witdth/height：控制高度和宽度，一般改一个就可以。
px是像素，是一种相对长度单位。

超链接：a

html 复制代码

    <!-- 写法一：在本页面跳转网页 -->
    <a href="https://hao.360.com/?src=lm&ls=n009c1cd49d" > 搜索 </a><br/>
    <!-- 写法二:在新建一个网页进行跳转-->
    <a href="https://hao.360.com/?src=lm&ls=n009c1cd49d"  target="_blank"> 搜索 </a><br/>
    <!-- 空连接：使用#在href占位 -->
    <a href="#"> 空链接 </a>

第一个写法会在本页面进行跳转地址，第二个写法会另起新建一个地址。
target="_blank":在新窗口打开链接。

🌅3.表格标签

标签：

<table>:表格容器
<tr>：表格行
<td>:表格单元格（普通单元格）
<th>:表头单元格（通常加粗居中）
<thead>:表格头部
<tbody>：表格主体

html 复制代码

<body>
    <body>
    <!-- border：边框粗细
    cellpadding：内容边距
    cellspacing：单元格边距 -->
    <table style="width: 100px;height: 150px;"
     border="4px" cellspacing="10" cellpadding="30">
        <!-- tr：表格行
             td：单元格 -->
          <tr>
            <td>a</td>
            <td>b</td>
          </tr>
          <tr>
            <!-- 跨列合并 -->
            <td colspan="2">b</td>
          </tr>
          <tr>
            <!-- 跨行合并 -->
            <td rowspan="2">c</td>
          </tr>
          <tr>
            <td>d</td>
          </tr>
</body>

结果显示：

style="width: 500;height: 300;"：通过内敛样式设置表格位宽度为500，高度为300；
border：用于设置表格边框的粗细；
cellspacing：用于设置单元格与单元格之间的宽度；
cellpadding：内容距离边框的距离；
colspan:跨列合并；
rowspan：跨行合并。

🌅4.表单标签

用于创建交互表单，收集用户数据

分成两个部分

表单域：包含表单元素的区域，重点的form标签（表单容器）
表单控件：输入框，提交按钮，重点是input标签（输入框）

form标签

html 复制代码

 <form action="test.html" method="get">
        内容
 </form>

action：指定表单要提交的目标地址
method：表单数据的提交方式，常用的有post和get
- pos：数据会附加在URL后面（格式：？参数名1=值1&参数名2=值2），可见性高
- get：数据会放在HTTP请求的"请求体"中，不在URL中显示，更安全。

input标签

input：输入框(通过type属性定义类型)

文本框

html 复制代码

<input type="text">
<input type="text" placeholder="请输入姓名">

结果显示：

placeholder：显示提示文本，引导用户输入相关信息。

密码框

html 复制代码

<input type="password">

单选框

html 复制代码

<input type="radio" name="gender" id="gender1" value="1"><label for="gender1">男</label>
<input type="radio"name="gender" id="gender2" value="2"><label for="gender2">女</label><br/>

效果：

name是给后端看的标识名，用来收数据，这提交表单时，后端会收到gender1或gender2；
lable是用来关联表单元素；
id是给前端用的唯一身份证，方便元素操作，整个页面中id必须唯一，与<lable>标签关联，实现点击文字也能选中选项；
value是实际传给后端看的内容。

多选框

html 复制代码

<input type="checkbox" name="Evaluation" id="evaluation1" value="1"><label for="evaluation1">很好</label>
<input type="checkbox" name="Evaluation" id="evaluation2" value="2"><label for="evaluation2">一般</label>
<input type="checkbox" name="Evaluation" id="evaluation3" value="3"><label for="evaluation3">不好</label>

提交

html 复制代码

<input type="submit" value="提交">

select标签：下拉菜单

html 复制代码

  <select>
            <option>1</option>
            <option>2</option>
            <option selected="selected">3</option>
</select><br/>

结果显示

selected="selected"表示默认选中

textarea标签：多行文本输入框

html 复制代码

<textarea row="3" cols="40"></textarea>

结果显示：

row：默认行数
cols：默认列数

🌅5.无语义标签：div&span

div：块级元素，会独占一行，常用来做页面大结构

html 复制代码

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            color:rgb(216, 17, 17)
        }
    </style>
</head>
<body>
    <div style="color: blue;">1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
</body>

span：行内元素，不会独占一行，常用来包裹小段文本

html 复制代码

<span style="color: blue;">1</span>
<span style="color: blue;">1</span>
<span>1</span>

案例：

用户注册

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action method="get">
         <table>
            <tr>
            <td>用户名</td>
            <td><input type="text" placeholder="请输入用户名"></td>
            </tr>
            <tr>
            <td>手机号</td>
            <td><input type="text" placeholder="请输入手机号"></td>
            </tr>
            <tr>
            <td>密码</td>
            <td><input type="password" placeholder="请输入密码"></td>
            </tr>
         </table>
         <input type="submit" value="注册">
         <span>已有账号？</span>
         <a href="#">登入</a>
    </form>
</body>
</html>

🎠CSS

🎡一、什么是CSS？

CSS（Cascadong Style Sheets，层叠样式表）用于控制页面的样式，主要负责网页的视觉表现、包括布局、颜色、字体、间距等外观样式。HTML决定网页"有什么内容"，CSS决定网页内容"看起来什么样的"。

下面的布局就是由css控制的，而里面布局的内容是由html写的

🎡二、引入方式

行内样式：直接写在html元素的style属性中

html 复制代码

<div style="属性">文本</div>

示例：

html 复制代码

    <div color:red>hello</div>
    <div color:black>hello</div>
    <div color:blue>hello</div>

结果显示

内部样式：定义style标签，在标签内定义css样式

html 复制代码

<style>
    div{
        属性;
    }
</style> 

<body>
    <div>文本</div>
</body>

示例：

html 复制代码

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

<body>
    <div>hello</div>
    <div>hello</div>
    <div>hello</div>
</body>

显示结果

外部样式：定义link标签，通过href属性引入外部css文件

html 复制代码

<link rel="stylesheet" href="css外部文件">

示例：

html 复制代码

<link rel="stylesheet" href="style.css">

<body>
    <div>hello</div>
    <div>hello</div>
    <div>hello</div>
</body>

//style.css文件
div{
    color: blueviolet;
}

在创建css外部文件时，可以先先直接写<link ret=""...>,在点击ctrl+clik自动创建外部文件

遵循就近原则
*

html 复制代码

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

<body>
    <div style="color: chocolate;">hello</div>
    <div>hello</div>
    <div>hello</div>
</body>

🎡三、css常见属性分类

color：文本颜色；
front-size：字体大小
width/height：宽/高
margin：外边距
padding：内边距

示例

html 复制代码

<style>
    #div1{
       color: #ba1515;
       font-size:large;
    }
    #div2{
       width: 300px;
       height: 200px;
       margin: 50px;
       padding: 20px;
       border: 60px;
    }
</style>
<body>
    <div id="div1">hello</div>
    <div id="div2">world</div>
    <!-- <div id="div3">zhangsan</div> -->
</body>

结果显示

🎡四、常用选择器

🚤1.标签选择器选中所有标签

html 复制代码

    a{
        属性；
    }
    div{
        属性；
    }
    span{
        属性；
    }

🚤2.class选择：选中所有class="box"的元素

html 复制代码

.box{
   属性;
}

示例：

html 复制代码

<style>
    .a1{
        color:aquamarine;
       }
</style>
   
<body>
    <a class="a1">这个一个</a>
    <div class="div1">这个一个</div>
    <span class="a1">这个一个</span>
</body>

🚤3.id选择器：选中id="a"的元素（唯一）

html 复制代码

#a{
  属性;
}

示例：

html 复制代码

<style>
    #a{
        color:aquamarine;
       }
</style>
   
<body>
    <a id="a">这个一个</a>
    <div id="a">这个一个</div>
</body>
</html>

🚤4.通配符选择器

html 复制代码

*{...}

示例：

html 复制代码

<style>
    *{
        color: rgb(17, 207, 67);
    }
</style>
<body>
     <a>这个一个</a>
    <div>这个一个</div>
</body>

🚤5.复合选择器

html 复制代码

ul li{...}

示例：

html 复制代码

<style>
    ol li{
       color:aqua;
    }
</style>
<body>
    <ol>
      <li>这个一个li</li>
      <li>这个一个li</li>
    </ol>
</body>