万字教你入门前端三件套——HTML+CSS+JavaScript（上）-CSDN博客

本文链接：https://blog.csdn.net/Lucas_Micheal/article/details/147645103

HTML基础

什么是HTML

HTML（HyperText Markup Language）即超文本标记语言。

超文本：比普通文本更加强大，可以通过链接和交互方式组织和呈现信息，不仅仅包含文本，还可能包含图片、音频，甚至学者添加的评注、补充或脚注等。
标记语言：由标签构成的语言。

HTML标签都是预定义的，不同标签表示不同内容。类似于Word中的“样式”，选中文本点击“标题1”后，文本即显示为“标题1”的效果，这里的“标题1”就是一种标签。

<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>

经过浏览器解析后，这些标签 <h1>、<h2>、<h3> 分别呈现不同级别的标题。

学习HTML主要就是学习如何使用各种标签。

认识HTML标签

HTML代码由标签构成，例如：

<h3>我是三级标题</h3>

标签名（如body）写在尖括号 < > 中。
大多数标签成对出现，如开始标签 <h1> 与结束标签 </h1>。
少数标签是单标签，只有开始标签，没有对应的结束标签。
标签之间的内容是标签的内容。
开始标签中可以带有属性，如 id 属性给标签赋予唯一标识：

<h3 id="myId">我是三级标题</h3>

HTML文件基本结构

<html>
  <head>
    <title>第一个页面</title>
  </head>
  <body>
    hello world
  </body>
</html>

HTML标签之间的嵌套关系构成了DOM树（Document Object Model，文档对象模型）。

可以使⽤chrome的开发者⼯具查看⻚⾯的结构.F12或者右键审查元素,开启开发者⼯具,切换到Elements标签,就可以看到⻚⾯结构细节.

HTML快速入门

开发工具

虽然HTML可用记事本编写，但不便。课程中我们使用专业前端开发工具：

Visual Studio Code（简称VS Code）

微软2015年发布的跨平台源码编辑器，支持Windows、macOS和Linux。
内置JavaScript、TypeScript、Node.js等语言支持，也支持C++、C#、Java、Python、PHP、Go等多种语言。
官网：https://code.visualstudio.com

安装后，在VS Code中新建 .html 文件，输入 ! 并按 Enter 或 Tab，即可生成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>

细节介绍（了解即可）

<!DOCTYPE html>：文档类型定义（DTD），声明当前文件为HTML5文档。
<html lang="en">：lang属性表示页面语言为英语，可用于浏览器自动翻译提示。
<meta charset="UTF-8">：设置页面字符编码为UTF-8，防止中文乱码。
<meta name="viewport" content="width=device-width, initial-scale=1.0">：
- 设置视窗口宽度与设备屏幕宽度相同，初始缩放比例为1，主要用于手机等移动设备页面适配。

在<body>中任意输入文字，保存后用浏览器打开即可看到效果：

<body>
  第一个HTML页面
</body>

HTML常见标签

标题标签（`h1` - `h6`）

依次六级，数字越大字体越小。

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>

段落标签（`p`）

HTML中换行、空格默认无效，使用 <p> 标签来定义段落。

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

注意：

<p> 标签定义的段落默认无缩进。
段落内容会根据浏览器宽度自动换行。
HTML中多余空格、换行会被合并为一个空格。

换行标签（`br`）

用于换行，是单标签，不需要结束标签，推荐写法为 <br/>。

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

区别于 <p> 会产生较大空隙，<br/> 只是简单换行。

图片标签（`img`）

必须含有 src 属性，指定图片路径。

<img src="rose.jpg">

rose.jpg 图片文件需与HTML文件放置在同一目录。

常用属性：

width / height：控制图片宽高，通常设置一个，另一个按比例缩放。
border：边框宽度，通常用CSS控制。

<img src="rose.jpg" width="500px" height="800px" border="5px">

注意：

标签属性之间用空格分隔，格式为键值对。
属性顺序不限。

超链接标签（`a`）

href：必须，指定点击后跳转页面地址。
target：指定打开方式，默认_self当前页打开，_blank新窗口打开。

<a href="http://www.baidu.com">百度</a>

链接形式：

外部链接，跳转到其他网站。
内部链接，网站内部页面之间跳转，写相对路径即可。

<!-- 1.html -->
我是1.html
<a href="2.html">点我跳转到2.html</a>

<!-- 2.html -->
我是2.html
<a href="1.html">点我跳转到1.html</a>

空链接： 使用#占位。

<a href="#">空链接</a>

表格标签

<table>：定义表格。
<tr>：定义行。
<td>：定义单元格。
<thead>：表头区域。
<tbody>：表体区域。

表格标签通常结合CSS控制样式，但HTML有部分属性可控制：

align：表格与周围元素对齐方式，如align="center"。
border：边框粗细，数字越大越粗。
cellpadding：单元格内容到边框的内边距，单位像素。
cellspacing：单元格间距，默认2像素。
width / height：尺寸设置。

<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500">
  <tr>
    <td>姓名</td>
    <td>性别</td>
    <td>年龄</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>男</td>
    <td>10</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>女</td>
    <td>11</td>
  </tr>
</table>

表单标签

表单是用户输入信息的重要途径，通常分为两部分：

表单域：包含表单元素的区域，核心是 <form> 标签。
表单控件：输入框、按钮等，核心是 <input> 标签。

form标签

<form> 标签用于定义表单域，描述数据提交的方式和目标页面。

<form action="test.html">
  ... [表单的内容]
</form>

action 属性指定数据提交的目标页面。
method 属性指定提交方式（如 GET 或 POST，默认为 GET）。

后续结合后端代码详细研究表单提交机制。

input标签

<input> 标签定义多种输入控件，如文本框、按钮、单选框、复选框等。

常用属性：

type：必须，定义控件类型，如 text、password、radio、checkbox、button、submit 等。
name：为控件命名，便于表单提交时识别数据。对于单选框，相同 name 才能实现多选一。
value：控件的默认值。
checked：用于单选框或复选框，表示默认选中。

常用类型

文本框

<input type="text">

密码框

<input type="password">

单选框

性别: 
<input type="radio" name="sex">男 
<input type="radio" name="sex" checked="checked">女

多选一要求单选框具有相同的 name 属性。

复选框

爱好:
<input type="checkbox"> 吃饭
<input type="checkbox"> 睡觉
<input type="checkbox"> 打游戏

普通按钮

<input type="button" value="我是一个按钮">

默认无功能，需结合JavaScript实现交互：

<input type="button" value="我是一个按钮" onclick="alert('hello')">

提交按钮

<form action="test.html">
  <input type="text" name="username">
  <input type="submit" value="提交">
</form>

select标签

<select> 标签定义下拉菜单，<option> 标签定义选项。

<select>
  <option>北京</option>
  <option selected="selected">上海</option>
  <option>广州</option>
</select>

selected="selected" 表示默认选中。

textarea标签

<textarea> 标签定义多行文本输入框。

<textarea rows="3" cols="50">
默认内容
</textarea>

rows、cols 分别指定行数和列数。
通常在CSS中控制大小，而非直接在HTML中设置。

无语义标签：div & span

<div> 和 <span> 是用于布局的无语义标签。

<div> ：块级元素，独占一行，常用于划分大的布局区域。
<span> ：行内元素，不独占一行，常用于标记部分文本。

<div>
  <span>咬人猫</span>
  <span>咬人猫</span>
  <span>咬人猫</span>
</div>
<div>
  <span>兔总裁</span>
  <span>兔总裁</span>
  <span>兔总裁</span>
</div>
<div>
  <span>阿叶君</span>
  <span>阿叶君</span>
  <span>阿叶君</span>
</div>

综合练习：用户注册

用户注册界面提示：

使用表格进行整体布局。
使用 <input> 标签实现各种输入控件。

<h1>用户注册</h1>
<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>
<div>
  <input type="button" value="注册">
  <span>已有账号? </span><a href="#">登录</a><br/>
</div>

CSS基础

CSS介绍

什么是CSS?

CSS（Cascading Style Sheet，层叠样式表）用于控制网页的样式。
它能够对网页中元素的位置和排版进行像素级精确控制，实现页面的美化效果。
CSS实现了页面的结构和样式分离。

形象地说，CSS相当于网页的“化妆术”，给页面“打扮”。

<!-- CSS前 -->
<p>hello</p>

<!-- CSS修饰后 -->
<style>
  p {
    color: red;
    font-size: 30px;
  }
</style>
<p>hello</p>

基本语法规范

CSS语法格式：

选择器 { 属性1: 值1; 属性2: 值2; ... }

选择器：决定针对哪个元素应用样式。
声明：决定修改哪些样式。
声明中的属性 是键值对，使用冒号 : 分隔键和值，分号 ; 分隔多条声明。

p {
  /* 设置字体颜色 */
  color: red;
  /* 设置字体大小 */
  font-size: 30px;
}

注释使用 /* 注释内容 */。
在多数编辑器中，使用快捷键 Ctrl+/ 可快速注释切换。

引入方式

CSS有三种引入方式，语法如下：

引入方式	语法描述	示例
行内样式	在标签内使用 `style` 属性	`<div style="color:green">绿色</div>`
内部样式	在 `<style>` 标签中定义样式	`<style> h1 { ... } </style>`
外部样式	使用 `<link>` 标签引入外部CSS文件	`<link rel="stylesheet" href="style.css">`

三种引入方式的区别：

内部样式代码冗余多，不便维护，多用于讲解和调试。
行内样式只针对单个元素，适合简单快速修改，不适合复杂样式。
外部样式实现HTML与样式完全分离，适合大型项目和团队开发。

书写规范

CSS大小写不敏感，但建议统一小写。
冒号 : 后面加空格。
选择器与 { 之间加空格。

p {
  color: red;
}

CSS选择器

CSS选择器用来选中页面上的元素，只有选中后才可以设置这些元素的样式。

就像游戏中先选中单位，才能让单位执行命令一样。

主要选择器有：

标签选择器
类选择器（class）
ID选择器（id）
复合选择器（组合选择器）
通配符选择器

<div class="font32">我是一个div，class为font32</div>
<div class="font32">我是一个div，class为font32</div>
<div><a href="#">我是一个div</a></div>
<ul>
  <li>aaa</li>
  <li>bbb</li>
  <li><a href="#">ccc</a></li>
</ul>
<ol>
  <li>1111</li>
  <li>2222</li>
  <li>3333</li>
</ol>
<button id="submit">提交</button>

标签选择器

/* 选择所有a标签，字体颜色红色 */
a {
  color: red;
}

/* 选择所有div标签，字体颜色绿色 */
div {
  color: green;
}

类选择器

/* 选择class为font32的元素，字体大小32px */
.font32 {
  font-size: 32px;
}

多个元素可以共用一个类名。
一个元素可以使用多个类名，用空格分隔。

ID选择器

/* 选择id为submit的元素，颜色红色 */
#submit {
  color: red;
}

ID选择器对应的id必须唯一，不可被多个元素共享。

通配符选择器

/* 设置页面所有元素的颜色为红色 */
* {
  color: red;
}

复合选择器

/* 只设置ul下li下的a标签颜色为蓝色 */
ul li a {
  color: blue;
}

选择器可以是任意组合（标签、类、id混用）。
空格表示后代选择。
使用逗号,可以同时选中多个不同的选择器。

常用CSS属性

准备如下HTML：

<div class="text1">我是文本1</div>

color

设置字体颜色。

.text1 {
  color: red;
}

颜色的表达方式：

英文单词，如 red, blue。
RGB格式，如 rgb(255,0,0)。
十六进制，如 #ff00ff。

font-size

设置字体大小。

.text1 {
  font-size: 32px;
}

border（边框）

复合属性，可以同时设置边框宽度、样式和颜色。

.text1 {
  border: 1px solid purple;
}

width / height

设置元素宽度和高度。

只有块级元素可以设置宽高。
块级元素常见如 h1-h6、p、div 等。
行内元素如 a, span 不独占一行，不能直接设置宽高。

通过 display 属性可修改元素显示类型：

/* 转为块级元素 */
display: block;
/* 转为行内元素 */
display: inline;
.text1 {
  width: 200px;
  height: 100px;
  display: block;
}

padding（内边距）

设置内容和边框之间的距离。

内容默认紧贴边框，padding 控制空白区域。

.text1 {
  padding: 20px;
}

可分别设置四个方向：

padding-top
padding-bottom
padding-left
padding-right

margin（外边距）

设置元素与其它元素之间的距离。

.text1 {
  margin: 20px;
}