前端，从入门到入土
前端，从入门到入土
写在前面，更是写给自己：
2020年11月16日，我发表了我的第一篇博客，主要是为了自己学习，给自己看的一篇博客，希望能坚持下去，记录我学习前端时的点点滴滴，希望不要成为黑历史2333，希望我每次打开我的博客看到这段话时，能保持第一次编程的好奇。
加油！
2020年11月16日的我
我的博客：
→→→CSDN博客←←←
学习方法：
网课：BV14J4114768
资料：w3school
HTML
开头
“”：document type，文档类型声明，作用是告诉浏览器使用哪种HTML版本来显示网页
意思是：这网页用html5版本来显示
<html lang="en">
<html lang="zh-CN">
lang = language，虽然en，但你可以输入中文，中文同理，但是会影响到谷歌生草机
<mate charset="UTF-8">
<mate name="viewport" content="width=device-width, initial-scale=1.0">
charset：字符集，识别和存储文字，常见的有GB2312（简体中文）、BIG5（繁体中文）、GBK（简体和繁体中文）和UTF-8，UTF-8被称为万国码，基本包含了全世界国家需要用到的字符，写它就完事了
以上部分直接在VC中输入"!"即可自动生成
标签（很多但很有用）
标题标签：
<h1>从h1到h6是标题标签h1>
<h2>我是二级标签h2>
<h3>等级从1到6字体逐渐变小变细h3>
<h4>只会在一行内显示h4>
段落标签：
<p>p是paragraph的缩写，可以分成若干的段落p>
在html文件的文本里回车是木大的，浏览器会自动忽视回车，两个及以上的空格会减少到一个空格
换行标签：
就这？<br />爬！
效果：
就这？
爬！
文本格式化标签：
<strong>这是加粗strong>
<b>b也是加粗，strong是加粗，虽然这俩看起来都是加粗b>
<em>这是倾斜em>
<i>i也是倾斜，弟位和b差不多i>
<del>这是删除线del>
<s>s也是删除线，弟位……s>
<ins>这是下划线ins>
<u>u也是下划线，弟位同前面几个……u>
div和span标签：
<div>这是div标签，自己独占一行，后面不能写别的东西div>
<span>这是span标签，一行可以放好几个span>
div=division，意为分割、分区，是大箱子；span意为跨度、跨距，是小箱子
图像标签和路径：
src属性是图片路径，是img标签的***必须属性***，它用于指定图像文件的路径和文件名
<img src="img.jpg"/>
效果：
alt属性是文本，当图像无法显示时用此文本替换图片
<img src="img1.jpg" alt="←这是我的头像">
注意：并"img1.jpg"这张图片，所以出错了；
效果：
图片：我裂开了
title，属性是文本，提示用，鼠标放在图像上时显示文本
<img src="img.jpg" title="这是我的头像"/>
效果：
因为文字被迫把图片裁小，导致字体不清楚，凑合看
width和height，属性为像素，可以设置图像的大小
<img src="img.jpg" width="114"/>
效果：
width(宽)和height(高)只用设置一个，图片会等比例缩放，如果想两个都设，可能会发生如下情况
<img src="img.jpg" height="114" width="514"/>
效果：
img.zip(滑稽)
border，属性为像素，可以设定图片的边框
<img src="img.jpg" border="20"/>
（vc中border的字体颜色和其他如src或alt的不一样，因为边框主要在CSS中使用）
效果：
这相片要是个灰白的就成遗照了
相对路径：相对于HTML文件的路径
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图像文件位于HTML文件的同一级 如 |
|
| 下一级路径 | / | 图像文件位于HTML文件的下一级 如 |
| 上一级路径 | …/ | 图像文件位于HTML文件的上一级 |
绝对路径：从盘符开始的路径，或者是图片所在的网址
<img src="C:\Users\Beaker\Desktop\practice\img.jpg"/>
这个路径为我电脑内头像所在的位置
超链接标签
格式： 文本或图像
a = anchor，意为：锚
| 属性 | 作用 |
|---|---|
| href | 必须属性，指定链接目标的url地址 |
| target | 指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式 |
分类：
-
外部链接：
<a href="http://www.baidu.com" target="_self">百度a>从当前页面跳转到百度
-
内部链接：
<a href="practice2.html" target="_blank">练习2a>在新窗口中打开练习2，因为练习2和练习1在同一级路径下，所以href有名称就行
-
空链接：没有确定的链接目标时，可以这么写
a>下载链接： -
下载链接：如果href里面是一个文件，那么会下载这个文件
-
网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加到超链接
<a href="http://www.baidu.com"><img src="img.jpg"/>a> -
锚点链接：点链接可以快速定位到页面中的某个位置
<a href="#live">个人信息a><h6 id="live">个人信息介绍h6>
注释标签
以结束，中间放注释语句
快捷键Ctrl+/
表格标签
：定义表格的头部，内部必须有tr标签，方便阅读
：定义表格的主体，用法同thead
示例：
<table>
<thead>
<tr><th>姓名th> <th>性别th> <th>年龄th>tr>
thead>
<tbody>
<tr><td>小明td> <td>男td> <td>18td>tr>
tbody>
table>
表格属性（不常用，经常通过CSS来设置）：
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left、center、right | 设置表格相对周围元素的对齐方式 |
| border | 1或"" | 设置表格有没有边框，默认为""，表示没有 |
| cellpadding | 像素值 | 设置文本和边框之间有多大的空白，默认1像素 |
| cellspacing | 像素值 | 设置边框的粗细，默认像素2 |
| width和height | 像素值或百分比 | 规定表格的宽度和高度 |
示例：
<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="300">
……
table>
合并单元格：
| (1,1) | (1,2) | (1,3) |
|---|---|---|
| (2,1) | (2,2) | (2,3) |
| (3,1) | (3,2) | (3,3) |
rowspan：跨行合并，例如(2,1)和(3,1)合并，从最上面的单元格为目标作开始
colspan：跨列合并，例如(1,2)和(1,3)合并，从最左边的单元格为目标作开始
示例：（以上表为例，将(1,2)和(1,3)合并、(2,1)和(3,1)合并）
<table>
<tr>
<td>td>
<td colspan="2">td>
tr>
<tr>
<td colspan="2">td>
<td>td>
<td>td>
tr>
<tr>
<td>td>
<td>td>
tr>
table>
记得删除被合并的单元格！！！
列表标签
-
无序列表
使用
定义列表项<ul> <li>就这li> <li>不会吧？不会吧？li> <li>别恶心我li> ul>效果：
• 就这？
• 不会吧？不会吧？
• 别恶心我
（想去掉前面的加重号请学习CSS（其实不用li，用p就好了））
-
有序列表
使用
定义列表项，使用方法同无序列表效果：
-
就这？
-
不会吧？不会吧？
-
别恶心我
-
-
自定义列表
使用
定义项目，使用定义项目中的小项目<dl> <dt>联系方式dt> <dd>QQdd> <dd>微信dd> <dd>邮箱dd> dl>效果：
联系方式
QQ
微信
邮箱
（别问前面怎么不要空格，问就是CSS）
表格主要用于展示数据，而列表重要的是布局
表单标签
在HTML中，一个完整的表单通常由表单域、表单控件（也称表单元素）和提示信息组成
表单域
表单域是一个包含表单元素的区域
在HTML中， 标签用于 定义表单域，以实现用户信息的收集和传递
会把它范围内的表单元素信息提交给服务器
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
form>
常用属性：
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接受并处理表单数据的服务器程序的url地址 |
| method | get/post | 用于设置表单数据的提交方式，其取值为get或post |
| name | 名称 | 用于指定表单元素的名称，以区分同一个页面中的多个表单域 |
表单元素
input标签
标签用于收集用户信息
在标签中，包含一个***type***属性，更具不同的type属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）
<input type="属性值" />
type属性的属性值极其描述如下：
| 属性值 | 描述 |
|---|---|
| button | 定义可点击按钮（多数情况下，用于通过JS启动脚本） |
| checkbox | 定义复选框 |
| file | 定义输入字段和“浏览”按钮，供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段，该字段中的字符被掩码 |
| radio | 定义单选按钮 |
| reset | 定义重置按钮，重置按钮会清楚表单中的所有数据 |
| submit | 定义提交按钮，提交按钮会把表单数据发送到服务器 |
| text | 定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符 |
除type属性外，标签还有其他很多属性，其常用属性如下：
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 由用户自定义 | 定义input元素的名称 |
| value | 由用户自定义 | 规定input元素的值 |
| checked | checked | 规定input元素首次加载时应该被选中 |
| maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
标签为input元素定义标注
标签用于绑定一个表单元素，当点击标签内的文本时，浏览器就会自动将光标转到或者选择到对应的表单元素上，用来增加用户体验
select标签
在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用标签控件定义下拉列表
内部的每个选项均放在标签内，且至少有一个标签
可用selected来规定select元素首次加载时的默认选中项
textarea标签
可以输入较多的文本，可以输入多行文本
cols=“每行中的字符数” row=“显示的行数”（实际应用中为什么不用神奇的CSS呢？）
表单标签整活：
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
HTML练习
title>
head>
<body>
<form>
用户名：<input type="text" value="请输入用户名" maxlength="6" name="name">
<br>
密码：<input type="password" name="password">
<br>
<input type="radio" name="sex" checked="checked" id="man"><label for="sex">男label>
<input type="radio" name="sex" id="woman"><label for="woman">女label>
<br>
爱好：
<input type="checkbox" name="hobby" checked="checked" id="eat"><label for="eat">吃饭label>
<input type="checkbox" name="hobby" id="sleep"><label for="sleep">睡觉label>
<input type="checkbox" name="hobby" id="fight"><label for="fight">打豆豆label>
<br>
籍贯：<select>
<option selected="selected">（请选择出生地）option>
<option>地球option>
<option>月球option>
<option>火星option>
<option>M78星云option>
select>
<br>
上传照片：<input type="file">
<br>
愿望：<textarea cols="30" rows="5">
你不会真敢想吧？
textarea>
<br>
<input type="button" value="获取验证码">
<br>
<input type="submit" value="点击注册">
<br>
<input type="reset" value="重新来过">
form>
body>
html>
特殊字符
一些字符不方便在HTML页面中使用，此时可以使用特殊字符来替代
| 特殊字符 | 描述 | 代码 |
|---|---|---|
| 空格 | |
|
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和符 | & |
| ¥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方 | ² |
| ³ | 立方 | ³ |
CSS
简介
CSS，是层叠样式表(Cascading Style Sheets)的简称，如果说HTML是前端中的名词，那么CSS就是前端中的形容词，主要用于设置HTML页面中的文本内容、图片的外形以及版面的布局和外观显示样式
简而言之，做美容的
CSS最大的优势是让HTML专注做结构，样式交给CSS，即结构(HTML)和样式(CSS)相分离
格式：选择器 {属性:参数;}
举个栗子：
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS实验title>
<style>
p {
color: aqua;
font-size: 36px;
}
style>
head>
<body>
<p>就这？p>
body>
html>
注意：CSS内的注释为/*注释文本*/，而非HTML的
基础选择器
栗子：
<div>我是div1div>
<div>我是div2div>
<p>
我是p1
p>
<ul>
<li>我是li1li>
ul>
<ol>
<li>我是li2li>
ol>
如何把div里面的文字改成红色？只想改第一个div里面的文字呢？把ul里面的li文字改为红色呢？
为了把不同的标签选出来，用选择器来解决
标签选择器
标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式
类选择器
想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器
语法：
.类名{
属性1：属性值1;
}
栗子：
<style>
.red{
color:red;
}
style>
……
<div class="red">文本div>
class内可以写多个类名，中间用空格隔开，例如
<style>
.red {
color:red;
}
.font35 {
font-size:35px;
}
style>
……
<p class="red font35">文本p>
id选择器
id选择器可与为标有特定id的HTML元素指定特定的样式
HTML元素以id属性来设置id选择器，CSS中id选择器以"#"来定义
语法：
<style>
#id {
属性1:属性值1;
}
style>
栗子：
<style>
#red {
color:red;
}
style>
……
<div id="pink">
文本
div>
类选择器和id选择器的区别：
1. ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次
2. **可以使用类选择器词列表方法为一个元素同时设置多个样式。**我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）
通配符选择器
在CSS中，通配符选择器使用 “*” 定义，它表示选取页面中所有元素（标签）
语法：
<style>
* {
属性1:属性值1;
}
style>
栗子：
<style>
* {
color:red;
}
style>
……
<div>文本1div>
<p>文本2p>