前端学习【1】

我终于开始写前端部分的博客了，这部分学着真的很好玩，反馈很强，但写博客就会很无聊，极其无聊，三剑客你大概知道怎么写就行，标签，效果啥的太多了，所以博客这边也就基本是一些链接了，外面的各大网站都有，有的还有内置的编辑器可以对着学习，我认为写在这里更多的是说明我正在系统性的学习这个部分罢了

这辈子就是被浏览器害了，浏览器才是这个世界上最强大的工具！！(暴论)

HTML（超文本标记语言）

我们学这个玩意就是学个标签我非常推荐来这个网站来进行学习

点这里开始系统系学习练习HTML+CSS

玩HTML+CSS就是玩标签，这里面没啥好说的，去查找更好的网站，讲的比我这里细节多了，所以我这里只会提供结构，各种蓝图，框架，可以直接拿着就去用的，还有标签速查表

HTML网站骨架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这是网页名喔的位置喔</title>
</head>
<body>
    <h1>这是第一标题喔的位置喔</h1>
    <p>这是第一段落喔的位置喔</p>
</body>
</html>

这是最基础的骨架部分，这是每个网站都需要的，不要自己写，直接复制粘贴，然后根据需要修改即可。

我在给个更标准的骨架

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TT</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

涉及的元素和规则：

<!DOCTYPE html>：声明文档类型，确保浏览器使用正确的渲染模式。
<html lang="en">：根元素，指定文档的语言为英文。
<head>：文档的元数据和头部信息。
<meta charset="UTF-8">：指定字符编码为 UTF-8，确保正确显示特殊字符。
<meta name="viewport" content="width=device-width, initial-scale=1.0">：设置视口宽度，优化移动端访问。
<title>Document</title>：文档的标题，显示在浏览器标签和搜索结果中。

HTML标签速查表

点这里查看HTML标签速查表

这个标签要写在我这里得没完没了了，超级多，我提供常用标签如下:

font标签(字体属性管理)
font标签是字体标签，用来设置字体的颜色，大小，字体等属性（用法如下）
1
<font color="red">这是红色字体</font>
font标签的属性有：

color：字体颜色

size：字体大小

face：字体类型

font标签的属性值有：

颜色：red、green、blue、#FF0000（十六进制）等
大小：px、em、%等
字体：宋体、微软雅黑等

font标签的属性可以组合使用，例如：

1	<font color="red" size="4">这是红色字体</font>

font标签的属性可以使用CSS来设置，例如：

font {
    color: red;
    size: 4px;
    face: 宋体;
}

br标签(换行)

br标签是换行标签，用来换行（用法如下）

<br>

br标签的属性可以使用CSS来设置，例如：

br {
    display: block;
    margin: 10px 0;
}

hr标签(水平线)

hr标签是水平线标签，用来绘制水平线（用法如下）

<hr>

hr标签的属性可以使用CSS来设置，例如：

hr {
    border: 0;
    height: 1px;
    background: #333;
}

路径相关

路径相关标签用来定义文档的路径，有6个等级，分别是：

base：基本路径
link：链接路径
meta：元数据路径
script：脚本路径
style：样式路径
title：标题路径

路径相关标签的用法如下：

1	<base href="https://www.baidu.com">

进入到上一级文件：

1	<base href="../">

进入到下一级文件：

1	<base href="./">

标题标签

加粗，定位，字体大小
标题标签用来定义文档的标题，有6个等级，分别是：

h1：一级标题
h2：二级标题
h3：三级标题
h4：四级标题
h5：五级标题
h6：六级标题

标题标签的用法如下：

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

这里面有一些设置方式：
align属性：

left：左对齐
center：居中对齐
right：右对齐
justify：两端对齐
实际在标签内使用为：
1
2
<h1 align="center">一级标题</h1>
<h2 align="left">二级标题</h2>
标题标签的属性可以使用CSS来设置，例如：
1
2
3
4
h1 {
font-size: 24px;
color: #333;
}
超链接标签
超链接标签用来定义超链接，点击超链接可以跳转到其他页面（用法如下）
1
<a href="https://www.baidu.com">这是一个超链接</a>
超链接标签的属性有：
href：超链接目标的URL

target：超链接打开的目标窗口（_blank：新窗口，_self：当前窗口）

新窗口：_blank

当前窗口：_self
下面是一个例子：

1 2	<a href="https://www.baidu.com" target="_blank">这是一个超链接</a> <a href="https://www.baidu.com" target="_self">这是一个超链接</a>

超链接标签的属性可以使用CSS来设置，例如：

a {
    color: #007bff;
    text-decoration: none;
}

img标签(图片)

img标签是图片标签，用来显示图片（用法如下）

1	<img src="图片路径" alt="图片描述">

img标签的属性有：

src：图片路径
alt：图片加载失败时显示的替代文本
width：图片宽度
height：图片高度
style：图片样式
align：图片对齐方式
border：图片边框
vspace：图片垂直间距

hspace：图片水平间距
我给个样例啊：

1	<img src="图片路径" alt="图片描述" width="200" height="200" style="border: 1px solid #000;">

你也可以获取网上的图片，取得该图片的url，然后复制到src中，案例如下

1	<img src="http://gips3.baidu.com/it/u=1821127123,1149655687&fm=3028&app=3028&f=JPEG&fmt=auto?w=720&h=1280" alt="图片描述放这里">

img标签的属性可以使用CSS来设置，例如：

img {
    width: 200px;
    height: 200px;
}

表格标签

表格标签用来定义表格（用法如下）

<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
</table>

表格标签的属性有：

border：表格边框
cellspacing：单元格间距
cellpadding：单元格内边距
width：表格宽度
height：表格高度
style：表格样式
表格标签的属性可以使用CSS来设置，例如：
1
2
3
table {
border: 1px solid #000;
}
列表标签
列表标签用来定义列表（用法如下）
1
2
3
4
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
列表标签的属性有：
type：列表类型（disc：圆点，square：方块，circle：圆）
style：列表样式
width：列表宽度
height：列表高度
align：列表对齐方式

列表标签的属性可以使用CSS来设置，例如：

1
2
3

ul {
    list-style-type: disc;
}

ol有序列表

<ol>
    <!-- li是列表项 -->
    <li>列表项1</li>
    <li>列表项2</li>
</ol>

ul无序列表

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
</ul>

这两个的type属性中可以选择

disc：圆点
square：方块
circle：圆
表单标签
表单标签很重要，用来收集用户信息
由用户输入信息，提交到服务器，服务器处理数据，返回结果。是前后端交互的重要方式。

表单标签用来定义表单（用法如下）

<form>
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name" required>
</form>

表单标签的属性有：

action：表单提交的目标URL
method：表单提交的方式（GET、POST）
- GET：将表单数据拼接在URL后面，提交到服务器
  会将表单信息暴露在URL上，不安全
- POST：将表单数据放在请求体中提交到服务器
  不会将表单信息暴露在URL上，安全
name：表单的名称
id：表单的唯一标识
required：必填项
type：输入框的类型（text、password、radio、checkbox、select、textarea）
value：输入框的默认值
placeholder：输入框的占位符
style：输入框的样式
readonly：只读属性
disabled：禁用属性
multiple：多选属性
size：输入框的宽度
maxlength：输入框的最大长度
minlength：输入框的最小长度
pattern：输入框的正则表达式验证
form：输入框所属的表单
formaction：表单提交的目标URL
formmethod：表单提交的方式（GET、POST）
formname：表单的名称

实际样例参考蓝图布局

    <!--超级参考，超级易懂的一个简单的元素介绍页面-->
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这是个元素操作使用学习页面</title>
    <!-- 我们以一个登录页面来学习元素操作 -->
     <!-- 因为用户登录页面的泛用性比较广，并且有传值操作内容 -->
</head>
<body>
    <!--大標題-->
    <h1 align = "center">这是个元素操作使用学习页面</h1>
    <table align="center">
        <input type="hidden"/>
        <!--tr和td是表格的行和列-->
        <tr>
            <td align="center">用户名（文本）</td>
            <td align="center">
                <!-- text是文本框 -->
                <input type="text" id="username" name="username" required>
            </td>
        </tr>
        <tr>
            <td align="right">性别（单选框）</td>
            <!-- radio是单选框 -->
             <!-- 可以用checked来设置默认选中(默认高亮) -->
            <td><input type="radio" name="sex" checked="true">男
            <input type="radio" name="sex">女</td>
        </tr>
        <tr>
            <td align="right">年龄（下拉列表）</td>
            <td>
                <!-- select是下拉列表 -->
                <select name="age" id="age">
                    <!-- option是下拉列表的选项 -->
                    <option value="18">18</option>
                    <option value="19">19</option>
                    <option value="20">20</option>
                </select>
            </td>
        </tr>
        <tr>
            <td align="right">兴趣（复选框）</td>
            <!-- checkbox是复选框 -->
            <td><input type="checkbox" name="interest" id="interest">篮球
            <input type="checkbox" name="interest" id="interest">足球
            <input type="checkbox" name="interest" id="interest">跑步</td>
        </tr>
        <tr>
            <td align="right">登录（提交按钮）</td>
            <!-- submit是提交按钮 -->
            <td><input type="submit" value="登录"></td>
        </tr>
        <tr>
            <td align="right">重置（重置按钮）</td>
            <!-- reset是重置按钮 -->
            <td><input type="reset" value="重置"></td>
        </tr>
        <tr>
            <!-- 文件上传 -->
            <td align="right">文件上传</td>
            <td><input type="file" name="file" id="file"></td>
        </tr>
        <tr>
        <td>
            <!-- textarea是文本域 -->
            <textarea name="textarea" id="textarea" cols="30" rows="10"></textarea>
        </td>
        </tr>
    </table>
</body>
</html>

CSS（层叠样式表）

CSS是用来定义网页的样式的，是HTML的补充。

它是属性样式定义，对特定id,标签，类进行样式定义。

三种选择器存在优先级顺序：
id选择器 > 类选择器 > 元素选择器

CSS实例样式：

/* 选择器 { 属性: 值; } */
/* 元素选择器 */
p {
    color: red;
}
/* 类选择器 */
.red {
    color: red;
}
/* ID选择器 */
#id {
    color: red;
}

你可以直接在HTML文件体中定义CSS样式，也可以在外部文件中定义CSS样式。

直接在HTML文件体中定义CSS样式的方法是：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
    /* 选择器 { 属性: 值; } */
    /* 元素选择器 */
    p {
        color: red;
    }
    /* 类选择器 */
    .red {
        color: red;
    }
    /* ID选择器 */
    #id {
        color: red;
    }
</style>
在外部文件中定义CSS样式的方法是：
1
2
3
4
5
6
7
8
9
10
11
12
13
/* 选择器 { 属性: 值; } */
/* 元素选择器 */
p {
    color: red;
}
/* 类选择器 */
.red {
    color: red;
}
/* ID选择器 */
#id {
    color: red;
}
外部调用是最常见的用法，也是最合理的。想要在外部调用CSS样式，需要在HTML文件中引入CSS文件。
引入CSS文件的方法是：
1
2
3
4
5
6
7
8
9
<link rel="stylesheet" href="css/样式.css"></link>
<！-- 也可以 -- >
<style type="text/css" rel="stylesheet">
    
    table {
        margin: 0 auto;
    }
</style>
rel属性指定文档与外部资源的关系。stylesheet表示引入CSS文件。
href属性指定引入的外部资源的位置。
CSS文件的位置可以是本地文件，也可以是远程文件。
CSS文件的位置可以是相对位置，也可以是绝对位置。
CSS文件的位置可以是多个文件，也可以是一个文件。

若是多个文件，需要在每个文件中引入CSS文件。像下面这样：

1 2	<link rel="stylesheet" href="css/样式.css"> <link rel="stylesheet" href="css/样式2.css">

以下是关于CSS的三大选择器在HTML中的例子：

<!-- 元素选择器 -->
<p>这是一个段落</p>
<!-- 类选择器 -->
<div class="red">这是一个红色的div</div>
<!-- ID选择器 -->
<div id="id">这是一个ID选择器</div>

以下是CSS的三大选择器的例子：

/* 元素选择器 */
p {
    color: red;
}
/* 类选择器 */
.red {
    color: red;
}
/* ID选择器 */
#id {
    color: red;
}

但是这样用选择器是很不灵活的，所以存在复合选择器，他可以更加精准的选择元素和标签，有两个及其以上的选择器组合而成的是复合选择器
以下是CSS的复合选择器的例子：

/* 后代选择器 */
div p {
    color: red;
}
/* 子代选择器 */
div > p {
    color: red;
}
/* 并集选择器 */
div, p {
    color: red;
}

以下是CSS的复合选择器的说明：

后代选择器：选择器1 选择器2 { 属性: 值; }
这个玩意又叫包含选择器，外层标签在前面，内层标签在后面，表示选择选择器1中的所有选择器2的元素，记得用空格隔开，前者为父亲（父元素），后者为儿子（子元素），理论上你可以一直套下去，最后选择的最后儿子，选择器2可以是任意一个基础选择器
子代选择器：选择器1 > 选择器2 { 属性: 值; }
这个玩意又叫直接选择器，外层标签在前面，内层标签在后面，表示选择选择器1中的直接儿子，选择器2只能是直接的子元素，选择器1和选择器2之间不能有空格隔开
并集选择器：选择器1, 选择器2 { 属性: 值; }
这个玩意又叫并集选择器，选择器1和选择器2之间用逗号隔开，这个玩意的作用是将两种选择器的样式合并起来，选择器1和选择器2之间不能有空格隔开

不得不说前端部分的东西真的都多呢，学起来其实还是很有成就感的，毕竟看的见摸得着

常用的CSS属性字段表：
这个想想也会很多的吧靠北，点这个链接查找把

我这里放几个常用的,最常用的CSS的属性的属性表：按照文本属性，按照背景属性，按照边框属性，按照定位属性，按照其他属性来分
文本属性：

color：文本颜色
font-size：字体大小
font-family：字体类型
text-align：文本对齐方式
text-decoration：文本装饰线
line-height：行高

背景属性：

background-color：背景颜色
background-image：背景图片
background-repeat：背景重复
background-position：背景位置

边框属性：

border-width：边框宽度
border-style：边框样式
border-color：边框颜色

定位属性：

position：定位方式
top：顶部位置
left：左侧位置
right：右侧位置
bottom：底部位置

其他属性：

margin：外边距
padding：内边距
display：显示方式
float：浮动方式
clear：清除浮动
cursor：鼠标指针
z-index：层叠顺序

够了吗？别贪得无厌啊，特么喵的，爷爷我连个四级都没有过，叫我说“看着提示的标签你就知道是干什么的了”，不是找打吗喵

CSS基础框盒模型

border可以设置元素的边框，网页的各个组件和设计基本上就是大框套小框
边框有三个部分组成：边框宽度，边框颜色，边框样式

border-width：边框宽度
border-style：边框样式
border-color：边框颜色

border-style：边框样式设置

solid：实线
dotted：虚线
dashed：破折线

border-width：边框宽度
border-style：边框样式
border-color：边框颜色

border-style：边框样式设置

solid：实线
dotted：虚线
dashed：破折线

CSS3效果

圆角边框，阴影，渐变，过渡，动画等
这里提一下就行：效果有点多，而且可定制化，但是也比较复杂，需要自己去研究，这里就不详细介绍了
点这个，快点这个，喵的，后面没有了，这里去细节学习

javaScript

这个是前端的脚本语言，用来给网页添加互动性，比如：弹窗，表单验证，动态内容更新等，可以说是前端的灵魂

施工中——