谜语菌
谜语菌

web前端阶段笔记

Java wed

wed概念概述：

  1. Javawed：
  • 使用Java语言开发基于互联网的项目

  1. 软件的架构：

    1. C/S：客户端/服务器端
    2. B/S：浏览器/服务器端

  2. B/S架构详解

    • 资源分类

      1. 静态资源

        • 使用静态网页开发技术发布的资源。

        • 特点：

          1. 所有用户访问，得到的效果是相同的

          ​ 如：文本，图片，HTML，CSS，JavaScript

          1. 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源

      2. 动态资源

        • 使用动态网页开发技术发布的资源

        • 特点：

          1. 所有用户访问，得到的效果可能不同

            如：jsp/servlet，php，asp…

          2. 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器

HTML

一.语法规范

①.基本语法

  1. HTML标签是由尖括号包围的关键词，例如
  2. HTML标签通常是成对存在的，例如，和，称为双标签，第一个称为开始标签，第二个称为结束标签。
  3. 有些特殊的标签必须是单个标签，例如
    称为单标签。

②.标签关系

双标签关系可以分为两类：包含关系和并列关系

栗子：

包含关系

<head>
	<title>title>
head>

并列关系

<head>head>
<body>body>

二.HTML基本结构标签

​ 每个网页都会有一个基本的结构标签(也称为骨架标签)，页面内容也是在这些基本标签上书写。HTML页面也称为HTML文档。

  1. 第一个HTML

    标签名 定义 说明
    HTML标签 页面中最大的标签，称为 根标签
    文档的头部 注意在head标签中我们必须要设置的标签是title
    文档的标题 设置网页的标题
    文档的主体 元素包含文档的所有内容，页面内容基本都是放到body中

    栗子：

    <html>
<head>
<title>第一个网页title>
head>
<body>Holly wordbody>
html>

三.开发工具

Visual Studio Code

推荐插件

插件 作用
Chinese (Simplified) Language
Pack for VS Code		 中文简体语言包
Open in Browser 右击选择浏览器打开HTML文件
JS-CSS-HTML Formatter 每次保存，都会自动格式化js css 和 html 代码
Auto Rename Tag 自动重命名配对的HTML/XML标签
CSS Peek 追踪至样式

IDEA


<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>body>
html>

1. 
文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。
的意思是：当前页面采取的是HTML5版本来显示网页。
注意：
1.1 声明位于文档中的最前面的位置，位于之前。
1.2 不是一个HTML标签，它就是文档类型声明标签

2.lang语言种类
用来定义当前文档显示的语言
2.1 en定义语言为英语      
2.2 zh-CN定义语言为中文

3.字符集
字符集是多个字符的集合。以便计算机能够识别存储各种文字。
在标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。
<meta charset=" UTF-8" />
charset常用的值有：GB2312、BIG5、GBK和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符.

四.HTML常用标签

①.标签语义

学习标签是有技巧的，重点是记住每个标签的语义。简单理解就是指标签的含义，即这个标签是用来干嘛的。

根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。

②.常用标签
Ⅰ.标题标签：

-

(重要)
<h1>我是一级标题h2>
单词head的缩写，译为头部，标题
标签语义：作为标题使用，并且依据重要性递减
特点：加了标题的文字会加粗，字号也会依次变小，一个标题独占一行
Ⅱ.段落和换行标签(重要)
在HTML标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落。
<p>我是一个段落标签p>
单词paragraph的缩写，意为段落。
标签语义：可以把HTML文档分割为若干段落。
特点： 文本在一个段落中会根据浏览器窗口的大小自动换行，段落和段落之间保有空隙

<br />
单词break的缩写,意为打断换行。
标签语义：强制换行
特点：<br/>是个单标签，<br/>标签只是简单的开始新的一行，跟段落不同，段落之间会插入一些的垂直的间距。

案例：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
head>
<body>
<h1>水花61分伊戈达拉制胜抢断西决勇士再胜开拓者总分2-0h1>
<h5>数据统计：水花兄弟合砍61分h5>
<p>库里22投11中，三分14投4中，罚求1 1罚全中得到37分8篮板8助攻，职业生涯季后赛得分30+次数来到35次。超过哈登排名现役第3位，仅次于詹姆斯和杜兰特。p>
<p>汤普森22投8中，三分8投4中得到24分3篮板2助攻德拉蒙德 格林得到16分10篮板7助攻5盖帽，凯文 鲁尼得到14分7篮板2助攻，今天勇士有7名替补出场。p>
<h5>兄弟对决升级：小库里给哥哥造成压力h5>
<p>车里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中，小库里没有给哥哥造成压力，他出场19分钟，7投1中只得到3分3篮板2助攻，在场期间输掉10分。p>
<p>但在西决第2场中，小库里攻防两端都打出杰出的表现。全场送出4次抢断，包括直接抢断自己的哥哥库里，在防守端给库里造成了极大的困扰。p>
<p>作者：pink老师<br />
    2019-8-8p>
body>
html>
Ⅲ.文本格式化标签
在网页中，有时需要为文字设置粗体，斜体或下划线等效果，这时就需要用到HTML的文本格式化标签，使文字以特殊的方式显示。
标签语义：突出重要性，比普通文字更重要。
语义 标签
加粗 或者
倾斜 或者
删除线 或者
下划线 或者 

<strong>加粗strong>
<em>倾斜em>
<dei>删除线dei>
<ins>下划线ins>
Ⅳ.盒子
和标签
和是没有语义的，它们就是一个盒子，用来装内容

这是盒子

这是盒子
div是division的缩写，表示分割、分区。span 意为跨度、跨距。
特点：
	1.
标签用来布局，但是现在一行只能放一个
.大盒子
	2.标签用来布局，一行上可以多个.小盒子
Ⅴ.图像标签和路径
  1. 图像标签
在HTML标签中，<img>标签用于定义HTML页面中的图像
<img src="图像URL" />
单词 image 的缩写意为图像
src是<img>标签的必须属性，用于指定图像文件的路径
属性 属性值 说明
src URL 图像的路径
alt 文本 图像无法显示时的替换文本
title 文本 提示文本，鼠标悬停时显示
width 像素 设置图像宽度
height 像素 设置图像高度
border 像素 设置图像的边框粗细

注意：

​ ①.图像标签可以拥有多个属性值，必须写在标签名的后面

​ ②.属性之间不分先后

​ ③.属性采取键值对的格式，即key="value"的格式,属性=“属性值”

  1. 路径：

    1. 绝对路径

      • 是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

        例如，“D:web\img\logo.gif"或完整的网络地址"http://www.itcast.cn/images/logo.gif”。

    2. 相对路径

      • 以引用文件所在位置为参考基础，而建立出的路径，简单来说，图片相对于HTML页面中的位置
Ⅵ.超链接标签

  1. 链接的语法格式

    <a href="跳跃目标" target="目标窗口的弹出方式">文本或图像a>
单词 anchor 的缩写意为：锚
href ： 用于指定连接目标的url地址，(必须属性)当为标签应用href属性时，他就具有了超链接功能。
target ：用于指定链接页面的打开方式，其中_self为默认值,_blank为在新窗口中打开方式

  2. 链接分类

    • 外部链接：外部网站的链接

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

    • 内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可

      <a href="index.html">首页a>

    • 空链接：如果当时没有链接目标时，使用

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

    • 下载链接：如果href里面地址是一个文件或者压缩包，也会下载文件

      <a href="文件.zip">文件a>

    • 网页元素链接：在网页中的各种网页元素，如文本，图像，表格，音频，视频等都可以添加超链接。

      <a href="http://www.baidu.com"><img src="img.jpg">a>

    • 锚点链接：可以快速定位到页面中的某个位置

      在链接文本的href属性中，设置属性值为#名字的形式
<a href="#tow">第二季a>
找到目标位置标签，里面添加一个id属性=刚才名字
<h3 id="tow">第二季介绍h3>
Ⅶ.注释和特殊字符

  1. 注释

    HTML中的注释

        快捷键：Ctrl+/

  2. 特殊字符

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jqNvtJ9e-1603158857817)(C:\Users\谜语菌\Documents\img\HTML.png)]

Ⅷ.表格标签

  1. 表格的主要作用：用来显示，展示数据

  2. 基本语法

    <table>
    <tr>
    <td>单元格文字td>
    tr>
table>
1.<table>table>用于定义表格的标签。
2.<tr>tr>用于定义表格中的行
3.<td>td>用于定义表格中的单元格
4.字母td指表格中的数据(table data)，即数据单元格的内容

  3. 表头单元格标签

    表头单元格里面的文本内容加粗居中显示

    标签表示HTML表格的表头部分
Ⅸ.列表标签

表格是用来显示数据的，那么列表就是用来布局的

列表的特点：整齐，整洁，有序，作为布局自由方便

列表的分类：无序列表，有序列表，自定义列表

  1. 无序列表

      标签表示HTML中的无序列表，一般会以项目符号呈现列表项，而列表项使用
    • 标签定义

      语法：
<ul>
    <li>列表项1li>
    <li>列表项2li>
    <li>列表项3li>
    ...
ul>
注意：
1.无序列表的哥哥列表项之间没有顺序之分，是并列的
2.<ul>ul>中只能嵌套<li>li>
3.<li>li>相当于一个容器，可以容纳所有元素
4.无序列表会带有自己的样式属性，但在实际使用时，会使用css来设置

      知识点：去掉 li 前面的项目符号

      list-style: none;

    • 有序列表

      其各个列表项会按照一定的顺序排列定义

        用于定义有序列表，列表排序以数字显示，并且使用
      1. 定义列表项

        语法：
<ol>
    <li>列表项1li>
    <li>列表项2li>
    <li>列表项3li>
    ...
ol>
注意：
1.<ol>ol>只能嵌套<li>li>
2.<li>li>相当一个容器，可以容纳所有元素
3.有序列表带有自己的样式属性，实际开发中，使用css设置

      2. 自定义列表

        常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号

        用于定义自定义列表

        定义项目名词

        描述项目名词

        语法：
<dl>
    <dt>名词1dt>
    <dd>名词1解释1dd>
    <dd>名词2解释2dd>
dl>
注意：
1.<dl>dl>里面只能包含<dt>dt>和<dd>dd>
2.<dt>dt>和<dd>dd>的个数没有限制，经常是一个<dt>对应多个<dd>

      3. 总结

        标签名 定义 说明
          		无序列表 只能包含
          • 没有顺序 使用较多。
          • 里面可以包含任何标签
            		有序列表 只能包含
            • 有顺序 使用相对较少。
            • 里面可以包含任何标签
            		自定义列表 只能包含
            。
            可以包含任何标签
          Ⅹ.表单标签

          1. 为什么需要表单：为了收集用户信息

          2. 表单的组成：表单域，表单控件，提示信息

            • 表单域

              表单域是一个包含表单元素的区域
<form>标签定义表单域，以实现用户信息的收集和传递
<form>会把它范围内的表单元素信息提交给服务器.
语法：
<form action="url地址" method="提交方式" name="表单域名称">
	各种表单控件
form>
              属性 属性值 作用
              action url地址 用于指定处理数据的程序
              method get/post 用于设置表单数据的提交方式
              name 名称 指定表单名称，以区分同个页面多个表单

            • 表单控件 input，select，textarea

              1. 表单元素

                input是输入的意思，而在表单元素中用于收集用户信息，在标签中包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式(文本，字段，复选框，按钮等)

                语法：
<input type="属性值" />
<input />为单标签
type属性设置不同用来指定不同的控件类型
                属性 属性值 描述
                type … 设置不同用来指定不同的控件类型
                name 由用户自定义 定义input元素的名称
                value 由用户自定义 规定input元素的值
                placeholder 提示信息 显示提示信息
                checked checked 默认选中的按钮或复选框
                maxlength 正整数 最大字段长度

            1.name 和value是每个表单元素都有的属性值主要给后台人员使用.
            2.name 表单元素的名字，要求单选按钮和复选框要有相同的name值

             - type属性值
  
 | 属性值   | 描述                                                 |
 | -------- | ---------------------------------------------------- |
 | button   | 定义可点击按钮(多数情况下，通过JS启动脚本)           |
 | checkbox | 定义复选框   name属性相同                            |
 | file     | 文件域,文件上传使用                                  |
 | hidden   | 定义隐藏的输入字段                                   |
 | image    | 定义图像形式的提交按钮                               |
 | password | 定义密码字段                                         |
 | radio    | 定义单选按钮   name属性相同才能实现多选1             |
 | reset    | 定义重置按钮，会清除表单所有数据                     |
 | submit   | 定义提交按钮，会把表单数据发送到服务器               |
 | text     | 定义单行输入字段，用户在其中输入文本，默认长度20字符 |

             - <label>标签：为input元素，定义标注(标签)
 
 用于绑定一个表单元素，当点击<label>标签内文本时,浏览器就会自动将光标，转移到对应的表单元素上，增加用户体验
  
 ```html
 语法：
 <label for="sex">男label>
     <input type="radio" name="sex" id="sex" />
核心：<label>label>标签的for元素应当与<input>标签id属性相同。

            2. select下拉表单元素

   在页面中，有多个选项让用户选择，并且需要节约空间时，可以使用
       
       
       
       ...

   1.