Java开发学习-前端基础（HTML、CSS）

已于 2022-07-25 20:52:49 修改
阅读量357 收藏 3
点赞数 3
分类专栏： 开发 文章标签： 前端 html java
于 2022-07-25 20:45:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57150526/article/details/125983049
版权

文章目录

认识HTML

  1. HTML标签

    2.jpg

  2. HTML中的嵌套

    img

    • 第一个元素

      <p>HTML是一门伟大的语言！</p>

    • 第二个元素

      <div><p>HTML是一门伟大的语言！</p></div>

      div元素是p元素的父元素

  3. 完整的html文档结构

    1. <!DOCTYPE html>

      • 作用：告知浏览器该页面的文档类型，指示浏览器使用哪个版本HTML
      • 位置：第一行，在<html>之前
      • 无结束标签

    2. <html lang = “en”> ……</html>

      • 告知浏览器自身是个HTML文档
      • lang属性（语言属性）：浏览器对特定语言有针对性辅助操作

    3. 标签属性

      • 标签属性与标签名、标签属性间用空格分隔。
      • 属性有，键值对与单个属性的表现形式

    4. 文档头部<head>…

      • 网页标签标题<title>…
      • 只能有一个网页标题

    5. 文档主体<body>

  4. 注释<!-- -->

  5. MDN：Web文档，用于查询一些元素用法，效果。

文本标签
  1. 块状和内联标签：块状标签：<p>,<h>,<div>,会为自己的内容占据新的一行，内联标签<span>,<img>,<strong>不会
  2. 标题<h1>~<h6>
  3. 常用文本标签<p>,<strong>,<span>
  4. 图片标签
    1. src = “路径”
    2. alt = “描述图片的替换文本”//当url错误时生效
  5. 链接标签（内联标签）<a>
    • href = “链接指向的网址”
    • title = “链接说明信息”//鼠标停靠时显现
    • target = “_self”、“_blank”、“_parent”、“_top”
  6. 列表
    • <ul>无序列表
    • <ol>有序列表
    • <li>列表项
表单标签

  1. form标签

    1. action属性：值为处理此表单信息程序所在的URL，在提交时信息会发送到此地址
    2. method：GET，POST，规定发送表单信息方法

  2. 单行文本输入框（块）

    <!-- action=""则表单信息将提交到当前页面 -->
<form action="">
  <input type="text" />
</form>

    • placeholder = ”占位文本“

    • name=“input的名字”

    • value = “输入框的初始值”

    • 不可修改的输入框“readonly”，“disable”，区别

    • 属性disabledreadonly
      对象 所有表单元素 input 和 textarea
      作用 使文本框不能输入，当表单以 POST 或 GET 的方式提交时，使用了 disabled 的元素的值不会被传递出去 仅使文本框不能输入
      外观 *使文本框变灰外观没有变化

  3. 多行文本输入框和密码输入框

    • 多行输入框（内联）

      <!-- name属性表示表单元素的名称，placeholder属性表示表单元素的占位文本 -->
<textarea
  name="sign"
  rows="5"
  cols="30"
  placeholder="请输入个性签名"
></textarea>
      • rows，cols，表示行数和宽度

    • 密码输入框

      <!-- type属性表示表单元素的类型，name属性表示表单元素的名称，placeholder属性表示表单元素的占位文本 -->
<input type="password" name="password" placeholder="密码" />

  4. 单选框和复选框

    • 单选框

      <input type="radio" name="gender" value="male" />男
<input type="radio" name="gender" value="female" />女

      • 选择的选项name相同

      • lable标签用于统一内容效果

        label> <input type="radio" name="gender" value="male" />男 </label>
<label> <input type="radio" name="gender" value="female" />女 </label>

        //用id识别
<input id="male" type="radio" name="gender" value="male" />
<label for="male">男</label>
<input id="female" type="radio" name="gender" value="female" />
<label for="female">女</label>

    • 复选框

      <label> <input type="checkbox" name="interest" value="coding" />编程 </label>
<label> <input type="checkbox" name="interest" value="other" />其他 </label>

    • 需要注意的是：复选框是只有2种状态的表单控件：已选中或未选
      中。在只有一个复选框的情况下，它允许用户对某事说“是”或“否”，比
      如同意或不同意某个条款。而只有一个单选框的情况下，用户一旦选
      择了这个单选框，就不能再取消选择了，除非他刷新了网页~

  5. 选项菜单<select>和<option>

    <select name="career">
  <option value="default">请选择职业</option>
  <option value="staff">公司职员</option>
  <option value="freelancer">自由职业者</option>
  <option value="student">学生</option>
  <option value="other">其他</option>
</select>

    实现多选

    <select name="career" multiple>
  <option value="default">请选择职业</option>
  <option value="staff">公司职员</option>
  <option value="freelancer">自由职业者</option>
  <option value="student">学生</option>
  <option value="other">其他</option>
</select>

  6. 按钮

    <button>注册</button>

    属性type种类submit

  7. watermark,image_d2F0ZXJtYXNrLnBuZz94LW9zcy1wcm9jZXNzPWltYWdlL3Jlc2l6ZSx3XzEwMA==,t_60,g_se,x_10,y_10

CSS-美化文档

  1. HTML内部添加样式

    1. 在标签中添加声明（作为属性）

      style=""

    2. 在引号之间添加样式

    3. 样式由属性和值组成，用:隔开，用;结尾

  2. 字体大小/字体粗细

    • 字体大小

      <!-- 设置字体的大小为12px -->
<p style="font-size: 12px;">
  一个轻量级和模块化的前端框架，用于开发快速和强大的web接口。
</p>
<!-- 设置字体的大小为24px -->
<p style="font-size: 24px;">
  一个轻量级和模块化的前端框架，用于开发快速和强大的web接口。
</p>

    • 字体加粗

      <p style="font-weight: 200;">优课达--学的比别人好一点～</p>
<p style="font-weight: lighter;">优课达--学的比别人好一点～</p>
<p style="font-weight: 400;">优课达--学的比别人好一点～</p>
<p style="font-weight: normal;">优课达--学的比别人好一点～</p>
<p style="font-weight: 700;">优课达--学的比别人好一点～</p>
<p style="font-weight: bold;">优课达--学的比别人好一点～</p>

  3. 字体颜色/文字对齐方式

    • 颜色
      • image-20220723201836227
      • image-20220723201912605
      • image-20220723201930424
      • image-20220723201954929
    • 文字对齐方式
      • ·text-align:center;文字居中对齐
      • ·text-align:left;文字左对齐
      • ·text-align:right;文字右对齐

  4. 文字行高/字间距/字体

    • 行高 >= 字体大小，为文本所在行空间的高度line-height: 30px
      • 可以改变行距
      • 使文字垂直居中：设置行高等于盒子高度
    • 字间距letter-spacing:30px
    • 字体ont-family: 'Goudy Bookletter 1911', sans-serif, 'Gill Sans Extrabold';系统选择
CSS引入和选择器

  1. CSS的三种引入方式

    1. 行内样式

    2. 内部样式：将行内样式抽离image-20220723203403891

    3. 外部样式

      引入头部写法

      <link rel="stylesheet" type="text/css" href="index.css" />
      1. rel属性 rel属性规定了当前文档与被链接文档之间的关系，但是rel属性的stylesheet值被所有浏览器支持，也就是说你只要记住一个值即可。

      1. type属性 type属性规定了被链接文档的 MIME（多用途互联网邮件扩展类型）类型，type属性对应的最常见的值就是text/css，该类型描述样式表.

      2. href属性 href属性后跟的是要引入的链接地址

  2. 相对路径/绝对路径

    1. 绝对路径是硬盘真正存在的路径
    2. 相对路径就是相对于文件自身位置，去寻找要引入的资源文件
      • ./当前文件夹目录
      • ../回到上一级文件夹目录（可叠加）
      • 文件夹名表示进入该文件夹../css/index.css

  3. 常用选择器

    • 标签选择器

       <style>
      h3 {
        font-size: 25px;
        color: #330867;
      }
      h4 {
        font-size: 18px;
        color: #30cfd0;
      }
      p {
        font-size: 14px;
        line-height: 28px;
        color: #4a5252;
      }
 </style>

    • 选择器的层叠性：之前写过的标签又会重新写一次，造成的结果

      • 添加新效果
      • 改变之前已经存在的效果
      • 如果未精确选中可能因权重问题不会变化

    • 类选择器：将重复特殊点的模块批量处理

      .article {
  color: red;
  font-size: 14px;
}

      一个元素可添加多个类名

      <p class="common color font-size">
  common设置通用样式，color设置特殊颜色，font-size设置特殊字体大小
</p>

      .common {
  font-size: 22px;
  color: #333333;
  letter-spacing: 8px;
}

.current {
  color: #ff6973;
}

    • id选择器

      在标签里定义id（独一无二）

      <p id="p-item">这是一段文字</p>

      使用id选择器

      #p-item {
  font-size: 24px;
  font-weight: 400;
}

  4. 高级选择器

    • 后代选择器p a-----选择所有p标签内的所有a标签

      /* 选择id名为password的标签内部所有类名为box的元素内部的所有p标签 */
#password .box p{}
/* 选择所有p标签内部的所有span标签 */
p span{}
/* 选择所有p标签内部的所有类名为spanItem的标签 */
p .spanItem{}

      ul li {
    /* 去除li标签前面的小圆点 */
    list-style: none;
    font-size: 22px;
}

.first-ul li {
    color: rgb(212, 166, 28);
}

.second-ul li {
    color: rgb(230, 127, 122);
}

      补充一点：从上面这个例子可以看出一种编程思想，就是抽离，将li标签公有的属性抽离在ul li选择器内，因为这个选择器选中的是所有的li，然后再分别用.first-ul li和.second-ul li选择器来设置不同的属性。

    • 交集选择器 a（标签名）.special(类名){}

    • 子选择器 选择的是儿子(最近的文本内容)

      <p>
    <span>Span 1. 在p标签内
        <span>Span 2. 在p标签的span标签内</span>
    </span>
</p>
<span>Span 3. 与p标签相邻</span>

      后代选择器

      span {
    color: black;
}

p span {
    color: orangered;
}

      image-20220723210118913

      子选择器

      span {
    color: black;
}

p>span {
    color: orangered;
}

      image-20220723210202478

    • 并集选择器 在标签名或者类名后面用，隔开

      .box,p,h3,.phone{}

  5. 选择器的优先级

    • 单个选择器的优先级：id选择器> 类选择器>标签选择器

    • 文字属性的继承性：父标签的元素改变带动相应的子元素改变

    • 高级选择器的优先级：选择器权重叠加（一定是选中的情况）

      <ul class="ul-item">
  <li>
    <p>文字的颜色到底是什么颜色？</p>
  </li>
</ul>

      ul li p {
  color: blue;
}
p {
  color: red;
}

      image-20220723210757665

      样式的确定取决于权重+继承性

CSS-盒模型

  1. content

    • div块标签：h、p、ul、li这些块标签都是在此标签基础上改造的
    • div默认宽度是父元素宽度，高度为0px
    • width\height
    • backgroud-color

  2. padding内边距

    • 背景颜色包含了padding和content

    • padding元素写法（上右下左）

      • .box {
    padding: 20px;
}

      • .box {
    padding-top: 20px; /*上内边距*/
    padding-right: 20px; /*右内边距*/
    padding-bottom: 20px; /*下内边距*/
    padding-left: 20px; /*左内边距*/
}

      • div{
    padding:20px 20px 20px 20px;
}

      • //上下一样，左右一样
div{
    padding: 20px 30px;
}

      • 上下一样左右不一样

        div{
    padding: 20px 30px 20px 10px;
}

      • 左右一样，上下不一样

        div{
    padding: 30px 10px 20px;
}

      • box-sizing：规定width和height指的是内容还是边界

        image-20220723212528946

    • border

      • 样式

        .box {
  /* 设置矩形大小 */
  width: 200px;
  height: 30px;
  /* 设置边框线 */
  border-width: 2px;
  border-color: grey;
  border-style: solid;
}

      • 简写

        .box {
  border: 2px solid blue;
}

      • 分别设置边框

        .box {
  /* 添加顶部border */
  border-top: 1px solid black;
  /*添加右侧border*/
  border-right: 3px solid orange;
  /*添加底部border*/
  border-bottom: 5px dashed pink;
  /*添加左侧border*/
  border-left: 10px dashed purple;
}

      • 层叠性设置边框

        .box {
  /*设置矩形的宽*/
  width: 300px;
  /*设置矩形的高*/
  height: 300px;
  /*设置矩形的背景颜色*/
  background-color: white;
  /*设置矩形的边框*/
  /*统一设置矩形的所有边框样式*/
  border: 2px solid black;
  /*重新设置一个下边框的样式来层叠掉统一设置的边框的样式*/
  border-bottom: 5px solid orange;
}

      • 无边框

        .box {
  border-bottom: none;
}

      • 圆角

        .box {
  border-radius: 12px;
}

        分开设置

        .box {
  width: 200px;
  height: 200px;
  background-color: violet;
  border-top-left-radius: 5px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 15px;
}

      • 阴影

        .box {
  width: 200px;
  height: 200px;
  border: 1px solid #c4c4c4;
  /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  border-radius: 15px;
}
        • x 偏移量：在 x 轴上移动，向右为正
        • y 偏移量：在 y 轴上移动，向下为正
        • 阴影模糊半径：就是边线的清晰度
        • 阴影扩散半径：就是向外伸展
        • 阴影颜色：就是矩形下面那个矩形的背景色。

    • margin（外边距）

      • 两个盒子之间margin计算：左右的两个盒子水平距离 = margin1-left + margin2-right，垂直距离 = max（margin1 - bottom， margin2-top）
      • 一般设置垂直距离值两个盒子同一空间只设置一个
      • 盒子左右居中：在父盒子中左右居中，前提子盒子有设置了width属性且margin:0 auto;

    • display:block/none

      • block性质：独占一行、可设置宽高
      • 行内元素和块元素之间转换：使用display属性
      • none：使标签在网页布局中消失

    • display：inline/inline-block

      • inline不能设置宽高、可以设置padding尽量不要用此方法设置块大小，可设置左右margin不能设置上下margin

      • inline-block能同行显示的块元素

        解决空白折叠现象

        • 去除回车

          <!-- 将div标签写在一行 -->
<div class="box1"></div><div class="box2"></div>

        • 给父元素添加word-spacing属性设置为负数

        • 给父元素设置font-size：0px

定位（1）

  1. position - static(默认定位)

    top、left、right、bottom属性无效

  2. position - relative(相对定位)

    top、left、right、bottom属性先参照static布局的前提下，再不改变页面布局的前提下改变位置：相当于留有原来的盒子空间，自身根据属性抽离到另一空间

  3. position - absolute（绝对定位）

    会因为absolute的设置，不会在原有的层次上留空间，整个根据top、left、right、bottom属性抽离为第二图层。

    image-20220724213435774

    偏移方式：相对于最近的非static定位的祖先元素偏移

    总结下：absolute（绝对定位） 和 relation（相对定位）的区别，relation 是相对自己进行 top、left、right、bottom 进行偏移，而 absolute 是寻找最近的 非 static 的祖先节点进行偏移。

  4. position-fixed

    fixed  为 固定定位

    固定定位和绝对定位类似，但元素的包含块为屏幕视口（viewport）

    固定定位不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。

    定位基于viewport

  5. z-index

    1. 默认非 static 元素的 z-index 都为 0
    2. z-index 越大，则越在最上面，离观察者越近
    3. 同样的 z-index， 在 HTML 中的元素越靠后，则越在最上面，离观察者越近

  6. position-sticky：效果元素滚到顶部会黏在顶部，向下滚动是，又会恢复其在文档中的位置。

定位（2）

  1. float：left\right：让元素贴着父元素的左边/右边排版。使用场景

    1. 想要一组元素同时靠左靠右对齐
    2. 使文字围绕图片

  2. 模态框：位于浏览器中心，有半透明背景

    <!DOCTYPE html>
<head>
  <link rel="stylesheet" type="text/css" href="./index.css" />
</head>
<body>
  <nav class="nav">
    ……
  </nav>
  <main>
    ……
  </main>
  <div class="mask"></div>
  <div class="modal">
       <img src="https://style.youkeda.com/img/ykd-components/logo.png?x-oss-process=image/resize,w_800/watermark,image_d2F0ZXJtYXNrLnBuZz94LW9zcy1wcm9jZXNzPWltYWdlL3Jlc2l6ZSx3XzEwMA==,t_60,g_se,x_10,y_10" />
  </div>
</body>

    .mask {
  position: fixed; /*1设置元素撑满屏幕*/
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7); /*2透明度颜色*/
}

    .modal {
  background-color: #fff;

  /* 设置长宽 */
  width: 300px;
  height: 150px;

  /* 设置圆角20px */
  border-radius: 20px;
}

.modal > img {
  display: block;
  width: 200px;
  margin: 39px auto; /*1使logo始终在父元素中左右居中*/
}

    元素居中

    • 元素水平居中
      • 行内元素：在父容器使用text-align:center
      • 块元素：在子容器上使用margin:0 auto
    • 元素垂直居中
      • flex
      • margin-top = (父元素高度 - 子元素高度) / 2
      • position的方向都是以DOM元素的左上角顶点偏移
背景

  1. 一般单一色调

    background: red;
background: #ffffff;
background: rgba(200, 200, 200);
background: rgba(0, 0, 0, 0.5);

  2. 渐变色

    background:linear-gradient(to right, #95ca47,#4dc891)  
背景属性     线性渐变         渐变方向   开始颜色  结束颜色

    • 渐变方向使用语义化英文实现：

      • to right / to left          向右/向左渐变
      • to top / to bottom      向上/向下渐变
      • to right bottom /  to right top        向右下/向右上渐变
      • to left bottom / to left top            向左下/向左上渐变
      • xxxdeg    xxx 范围（0 到 360）      更精确的渐变方向

    • 渐变位置image-20220725202551467

      MDN：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_gradients

  3. 背景图片

    • 基础引入

      {
	background-image: url(url) /*url不加引号*/
}

    • 没填充满容器的话，背景会repeat，需要设置background-repeat

      值描述
      repeat这是默认值。如果背景图片比容器小，将在垂直和水平方向进行重复
      repeat-x背景图片只在水平方向重复
      repeat-y背景图片只在垂直方向重复
      no-repeat背景图片将只显示一次，不重复

    • 背景图片位置background-position

      值描述
      • top left
      • top center
      • top right
      • center left
      • center center
      • center right
      • bottom left
      • bottom center
      • bottom right
      		 左侧两个元素为一组一起出现，分别代表垂直和水平布局

      比如：
      background-position: top left; 效果等于
      background-position-x: left;
      background-position-y: top;
      如果只写一个关键词，那么另一个关键词默认是center
      x% y%第一个值是水平位置，第二个值是垂直位置。
      左上角是 0% 0%。右下角是 100% 100%。如果只写一个值，另一个值将是 50%。
      xpx ypx第一个值是水平位置，第二个值是垂直位置。
      左上角是 0 0，单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果只写一个值，另一个值将是50%

    • 高级特性background-size

      值描述
      cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
      背景图像的某些部分也许无法显示在背景定位区域中。
      contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
      xpx ypx手动设置宽度和高度
      x% y%手动设置宽度和高度相对于容器的百分比

      cover 就是满足图片长宽中较小的一方撑满屏幕。 contain   就是满足图片长宽中较大的一方撑满屏幕。

    • 合并写法

      watermark,image_d2F0ZXJtYXNrLnBuZz94LW9zcy1wcm9jZXNzPWltYWdlL3Jlc2l6ZSx3XzEwMA==,t_60,g_se,x_10,y_10

      .box {
  width: 350px;
  height: 250px;
  border: 1px solid #e8e8e8;
  font-size: 30px;
  font-weight: bold;
  color: yellowgreen;

  background-image: url(https://style.youkeda.com/img/ykd-components/logo.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
/*写成*/
.box {
  width: 350px;
  height: 250px;
  border: 1px solid #e8e8e8;
  font-size: 30px;
  font-weight: bold;
  color: yellowgreen;

  background: url(https://style.youkeda.com/img/ykd-components/logo.png)
    no-repeat center / contain;
}
yoke菜籽
关注
专栏目录
JAVA WEB前端开发实践教程
07-22
JAVA WEB前端开发实践教程 该教程不仅仅详细讲解了前端开发的基础知识，还结合具体实例，讲解了各个知识点的具体应用
前端开始学java_[Java教程]开启前端学习之路
weixin_36219842的博客
03-01 182
[Java教程]开启前端学习之路0 2014-06-10 17:00:06前言第一次在博客园写博客，写写自己开启前端学习之路。应该是受邢师兄的影响吧，不得不说邢师兄人很好，学习也很认真，师兄的前端也是自学的，但是学的很好，大家可以看看我师兄的博客，http://www.cnblogs.com/allenxing/。之前只是听师兄介绍过前端，自己也就慢慢开始学习，师兄说坚持写博客很好，...
JavaWeb前端开发知识总结(javaScript)
Somnus blog
05-03 1051
JavaWeb前端开发知识总结-JavaScript
前端 java入门_Java Web前端基础
weixin_42561464的博客
02-13 504
​Java Web的学习是需要一定的计算机基础的，主要有前端基础和Java基础和一定的网络基础，这些基础知识还是需要掌握到一定的程度的。​今天我们先来一起看下前端基础，主要包含HTML(超文本标记语言)，CSS(层叠样式表)，JavaScript。​首先，前端知识有什么疑惑，可以到w3School中查看，链接。1.超文本标记语言–HTML​HTML是英文Hyper Text Markup Lang...
JavaWeb前端开发知识总结(HTML)
Somnus blog
05-03 3985
JavaWeb前端开发知识总结-HTML
二手图书交易系统-html+css+js-期末设计-前端页面-web开发
01-29
在使用后台语言Java搭建实现动态加载前,大概的静态页面结构和样式 ## 目前利用JavaScript/JQuery实现的逻辑功能 * 插件xSlider实现轮播效果 * 点击书本分类实现滚动条平滑滑动 * 书本分类菜单的伸缩 * 编辑页获取...
狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
【狂神Java学习笔记——前端入门——HTML、CSS、JavaScript学习代码】是针对初学者的一份详实的学习资料，这份笔记记录了跟随B站知名up主“遇见狂神说”的java系列视频中关于前端开发的基础内容。笔记内容不仅与视频...
dongdalu-html--css--java-script-master_sql_MYSQL_
09-30
标题中的“dongdalu-html--css--java-script-master_sql_MYSQL_”暗示这是一个与Web开发相关的项目，重点涉及HTML、CSS、JavaScript以及SQL（特别是MYSQL）的使用。这个开源项目利用VuePress构建了一个Java面试题库...
j2ee课程作业-前端代码 Java学习资料
06-29
这个项目不仅提供了宝贵的Java学习资料，还涵盖了前端开发的重要概念和技术。让我们详细了解一下这个作业所涵盖的知识点。 1. **J2EE（Java 2 Platform, Enterprise Edition）**：J2EE是Java平台上用于构建企业级...
基于Java与HTML/CSS的2016春季百度前端培训班ifeTrain设计源码
最新发布
10-01
该项目是2016春季百度前端培训班的ifeTrain设计源码，包含50个文件，涵盖31个PNG图片、7个DS_Store文件、6个HTML文件、3个CSS文件、2个JPG文件、1个Markdown文件，主要使用Java语言，辅助以HTML和CSS进行前端设计。
Web前端教程汇总
07-09
Web前端教程汇总视频教程 Web前端教程汇总视频教程
Java前端知识积累——前端开发技巧
qq_35706707的博客
10-14 2005
杂糅 弹出窗口方法 弹出窗口的方法就是先把弹出框写在页面里，然后设置可见状态为不可见，在某个事件触发后设置为可见。
“Java前端基础：探索Web开发的基础知识“
热门推荐
光就是羁绊之力，它会再度被某人继承，散发出耀眼的光。
01-14 1万+
1、Javaweb 1.1 基本概念 web开发： web，代表网页（网站）的意思，比如www.baidu.com 静态web： 列如静态web页面设计使用的：html，css。 静态web性质：提供给所有人看的数据始终不会发生变化。 动态web 比如：淘宝、网易云、几乎所有的网站都使用动态web。 它提供给所有人看到的数据始终会发生变化，每个人在不同的时间，不同的地点看到的信息各不相同。 技术栈：Servlet/JSP，ASP，PHP。 在Java中，动态web资源开发的技术称为Javaw
JavaWeb开发-前端
Holy
01-18 215
1.HTML 1.1 HTML概念 HTML，超文本标记语言 超文本：比普通文本功能强大 标记语言：使用标签对内容进行描述，不是编程语言 1.2 HTML语法规范 HTML文件：后缀以.html和.htm结尾 HTML由和两部分组成 HTML标签，以开始标签开始结尾标签结束 HTML忽略大小写 1.3 HTML标签 标题标签：(n=1~6)加粗显示，单独占一行，并
Java与前端开发入门
吃不胖.
08-18 593
JavaScript库是预先编写好的JavaScript代码，可以提供常见的功能和效果，如动画、表单验证和轮播图等。可以在HTML文件的头部使用<style>标签将CSS样式内嵌在HTML文件中，也可以将CSS样式保存为.css文件并在HTML文件中使用<link>标签将其导入。可以在HTML文件的<head>或<body>中添加<script>标签，将JavaScript代码嵌入HTML文件。CSS样式定义后，浏览器会解析HTML文件和CSS文件，将网页元素应用CSS样式后渲染为最终页面。
JavaWeb开发-01-前端基础知识
wangjh11234的博客
05-22 1185
JavaWeb开发-01-前端基础知识
（Java高级教程）第四章必备前端基础知识-第三节1：JavaScript简介和基础语法
快乐江湖的博客
01-26 693
JavaScript：JavaScript诞生于1995年，它的出现主要是用于处理网页中的前端验证。所谓的前端验证，就是指检查用户输入的内容是否符合一定的规则。为了解决前端验证的问题，当时的浏览器巨头NetScape（网景）公司就开发出一种脚本语言，起初命名为LiveScript，后来由于SUN公司的介入更名为了JavaScript，但注意Java和JavaScript的关系就像老婆和老婆饼的一样，没有任何关系。下面是JavaScript的发展历程年份事件1995年。
javaWeb学习-1.前端基础-1.HTML基础
xingzhes_的博客
01-24 410
文章目录1.HTML基础 总览javaWeb学习笔记思维导图问题扩展与汇总：1. 表单基本操作：1.1 表单基本语法：1.2 几个常用表单元素1、文本框2、密码框3、单选按钮4、复选框5、下拉列表框6、按钮7、多行文本域8、文件域9、邮箱10、网址11、数字12、滑块13、搜索框1.3 表单的几个高级应用：隐藏域、只读、禁用、标注1、隐藏域2、只读、禁用3、表单元素的标注1.4 表单的初级提示与验证：1、placeholder2、required3、pattern 1.HTML基础 总览 javaWeb学
java前端开发_Java前端开发学习什么内容
weixin_42151373的博客
02-15 3106
Java是一门高级编程语言，现在java工程师需求很大，所以java的前景很好，有些朋友往java前端开发方向发展，那么，Java前端开发学习什么内容呢?动力节点java学院小编来告诉你。就目前市场行情来看，Java最流行的应用还是Web开发。像HTML、CSS、Javascript等都是基础的知识，一定要打好基础，另外作为开发人员对目前最流行的Javascript框架Jquery更是必学不可的。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值