前端页面的简单学习与项目搭建（主要针对HTML和VUE的学习）

向右看齐 2023-07-24 03:29 57阅读 0赞

# 备注：只是本人的自学与备注，自己本身不是做前端的，只是简单搭建一些前端的东西，自己玩的。 #

# 一、HTML简单的回顾 #

## （一）HTML 基本结构 ##

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
        <title>我的第一个网页</title>
    </head>
    
    <body>
    带你出师，闯荡江湖！
    </body>
    </html>

## （二）基础标签 ##

*  ### 标题标签： ###

标题标签用于一段文字的标题说明，他的语义就是标题。

*  ### 段落标签： ###

段落标签显示一个段落自动换行

<h3>登鹳雀楼</h3>
    <p>白日依山尽，</p>
    <p>黄河入海流。</p>
    <p>欲穷千里目，</p>
    <p>更上一城楼。</p>

*  ### 链接标签（a标签，a是anchor的缩写） ： ###

a标签的作用就是跳转，包括页面的跳转和页内跳转。

target属性：

\_blank：浏览器会另开一个新窗口显示document.html文档  
\_parent：指向父frameset文档  
\_self：把文档调入当前页框  
\_top：去掉所有页框并用document.html取代frameset文档  
tittle属性：指明连接的信息

页面内的跳转：在目标标签处指明id=”“, 连接处指定 href=”\#id值” 然后点击会跳转到相应的id位置

*  ### 图片标签： ###

src 为图片的地址，也就是路径。有两种格式(1). 绝对路径 ： 图片保存的地址；(2). 相对路径 ： 相对于本文档的路径。上一层用../

alt为资源缺失时显示的内容。其原有的英文单词为alternative  
title为鼠标停留在图片上显示的内容

## （三）列表 ##

*  ### 无序列表 ###

*  ### 有序列表 ###

type属性

![这里写图片描述][SouthEast]

start属性：决定列表初始值，他的取值为自然数。

*  ### 自定义列表 ###

<dl>
            <dt>列表的标题</dt>
            <dd>列表项的描述</dd>
            <dt>河北</dt>
            <dd>河北又称燕赵大地</dd>
    </dl>

## （四）表单 ##

表单：收集用户填写的信息并将其提交给服务器

form有两个属性

*  Action 表单提交的地址。
 *  提交的方式有两种，get和post。两者的区别：（1）提交的内容的长度，get不能超过2KB，post无限制；（2）安全性，get将内容拼接到字符串后面，不够安全。

## （五）输入框 ##

*  ### 文本框 ###

属性为maxlength 表示输入的最大长度。 size为输入框的长度; value为默认的值

*  ### 密码框 ###

属性为maxlength 表示输入的最大长度。 size为输入框的长度; value为默认的值

*  ### 单选按钮 ###

属性为name将单选按钮分组这样就可以选择只能选择一个;checked默认选中; value表示他的值

*  ### 复选框 ###

checked 表示默认选中 name表示checkbox的名字，也是将复选框进行分组

*  ### 提交按钮 ###

submit为提交按钮，value为按钮上显示的文字。点击时会将参数添加在form Action的路径后面

*  ### 重置按钮 ###

*  ### 普通按钮 ###

普通按钮，value值为按钮上显示的文字，onclick是单击按钮触发的事件，可用js去处理

*  ### 图片按钮 ###

图片按钮 src为图片的路径其属性可以和 <img>类似

*  ### 文件按钮 ###

上传文件在点击按钮后可以打开本地的文件，后面的accept是可以选中的文件的类型一般 .xls为excel表格 .docx为word文档。.jpg 为图片等等

*  ### 下拉框 ###

## （六）Html DIV介绍 ##

<!DOCTYPE html>
    <html>
    <head>
    <title>web学习一路向前，?裙767891015等你?</title>
    </head>
    <body>
        <div>第一个div</div>
        <div>第二个div</div>
        <div>第三个div</div>
    </body>
    </html>

**DIV标签使用说明**

*  在html中布局使用最多标签为div，
 *  我们通常将网页重构说成div css制作。
 *  Div本身没有什么特别之处，只是div标签替代了以前table标签布局。
 *  我们通过对div标签对象设置不同样式实现我们要的美化效果。
 *  通常一对未设置任何样式的div，独占一行。

**DIV作用**

Div起分割作用，是分割内容常使用的标签。DIV+CSS更是起到分割与设置对应样式作用。

# 二、VUE基础简单回顾 #

VUE的一些项目：[https://segmentfault.com/a/1190000015151511][https_segmentfault.com_a_1190000015151511]

# 参考书籍、文献和资料 #

1.[https://blog.csdn.net/caoPengFlying/article/details/74642844][https_blog.csdn.net_caoPengFlying_article_details_74642844]

2.[https://blog.csdn.net/qq\_33726677/article/details/88198919][https_blog.csdn.net_qq_33726677_article_details_88198919]

3.[https://blog.csdn.net/m0\_37217612/article/details/98684780][https_blog.csdn.net_m0_37217612_article_details_98684780]

4.[https://www.cnblogs.com/XuChengNotes/p/11846338.html][https_www.cnblogs.com_XuChengNotes_p_11846338.html]

5.[https://www.cnblogs.com/XuChengNotes/p/11852445.html][https_www.cnblogs.com_XuChengNotes_p_11852445.html]

6.[https://www.cnblogs.com/XuChengNotes/p/11863246.html][https_www.cnblogs.com_XuChengNotes_p_11863246.html]

7.[https://www.cnblogs.com/XuChengNotes/p/11863258.html][https_www.cnblogs.com_XuChengNotes_p_11863258.html]

8.[https://www.cnblogs.com/XuChengNotes/p/11871478.html][https_www.cnblogs.com_XuChengNotes_p_11871478.html]

[SouthEast]: /images/20230528/d1c4fb69031a4a55b30850976204ed18.png
[https_segmentfault.com_a_1190000015151511]: https://segmentfault.com/a/1190000015151511
[https_blog.csdn.net_caoPengFlying_article_details_74642844]: https://blog.csdn.net/caoPengFlying/article/details/74642844
[https_blog.csdn.net_qq_33726677_article_details_88198919]: https://blog.csdn.net/qq_33726677/article/details/88198919
[https_blog.csdn.net_m0_37217612_article_details_98684780]: https://blog.csdn.net/m0_37217612/article/details/98684780
[https_www.cnblogs.com_XuChengNotes_p_11846338.html]: https://www.cnblogs.com/XuChengNotes/p/11846338.html
[https_www.cnblogs.com_XuChengNotes_p_11852445.html]: https://www.cnblogs.com/XuChengNotes/p/11852445.html
[https_www.cnblogs.com_XuChengNotes_p_11863246.html]: https://www.cnblogs.com/XuChengNotes/p/11863246.html
[https_www.cnblogs.com_XuChengNotes_p_11863258.html]: https://www.cnblogs.com/XuChengNotes/p/11863258.html
[https_www.cnblogs.com_XuChengNotes_p_11871478.html]: https://www.cnblogs.com/XuChengNotes/p/11871478.html