欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Java后端需要掌握的Html和CSS

程序员文章站 2022-06-23 09:44:05
Java后端需要掌握的Html和CSS一:Html常见用法文本标签 Title

tigerwang

&l...

Java后端需要掌握的Html和CSS

一:Html常见用法

  1. 文本标签

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <!--几级标签-->
        <h1>tigerwang</h1>
        <h3>sdkfsldkf</h3>
    
        <!--段落标签  <b> 加粗-->
        <p>哈哈哈哈哈</p>
        <p><b>好好学习,天天向上</b></p>
    
        <hr color="black" width="100%" size="30px" align="left">
    
        <font color="red" size="5" face="楷体">小王同学</font><br>
    
        <hr>
    
        <span><b>春眠不觉晓</b></span><br>
        <span><i>处处闻啼鸟</i></span><br><!--<i>斜体-->
        <span>夜来风雨声</span><br>
       <center> <span>花落知多少</span></center>
    
    
    
    </body>
    </html>
    
  2. 图片标签

    src中路径,可以写绝对路径,也可以是相对路径。这里需要注意的是相对路径中../表示上一级目录,本目录下直接加/alt里面的是如果访问失败,就会显示alt里面的内容。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>图片标签</title>
    </head>
    <body>
        <!--相对路径-->
    <img src="../img/1.jpg" alt="好美的图片" width="400px" height="600px" align="left">
        <!--绝对路径-->
    <img src="https://goss.veer.com/creative/vcg/veer/800water/veer-150325295.jpg" alt="好美的图片" width="400px" height="600px" align="left">
    </body>
    </html>
    
  3. 列表标签

    列表标签中又分为有序,无序和自定义标签:

    • 有序列表

      type里面可以确定用什么来确定顺序,start里面确定从哪个开始

      <h3>有序列表</h3>
      <ol type="A" start="B">
          <li>小明</li>
          <li>小花</li>
          <li>小华</li>
          <li>小强</li>
      </ol>
      
    • 无序列表

      type中有disc,square,circle这些属性来改变前面的标志

      <ul type="circle">
          <li>古力娜扎</li>
          <li>迪丽热巴</li>
          <li>玛尔扎哈</li>
          <li>噗哒噗哒</li>
      </ul>
      
    • 自定义列表

      <st>
          <cl>A</cl>
          <cl>B</cl>
          <cl>C</cl>
      </st>
      
  4. 超链接标签

    <a>标签为超链接标签,可以跳转到其他地方。里面有两个属性:

    href:点击跳转的资源路径

    target: _self 当前窗口打开, _blank 新开一个窗口打开

    <a href="https://www.baidu.com" target="_blank">我可以跳转到百度的,你点我试试看</a>
    
  5. 表格标签

    border="1"  边框,单位是像素px
    cellspacing="0"   单元格外边距,通常设置为0,用于消除td之间的间距
    cellpadding="10"  单元格内边距:单元格的边框和内部文本的距离,通常设置为10,可以撑大表格,显示清晰美观
    align="center"
    	1.作用在table标签上:整个表格在对窗口居中显示
    	2.作用在tr标签上:表示当前行的文本内容在单元格中居中显示
    
    表头使用th :具有 加粗 和 文本内容居中显示的功能
    
    • 普通表格

      <table border="1px" cellpadding="10" cellspacing="0" align="center">
      
          <caption><h2>职工表</h2></caption>
          <tr>
              <th>部门编号</th>
              <th>职工标号</th>
              <th>职工薪资</th>
          </tr>
          <tr>
              <td>001</td>
              <td>20200303</td>
              <td>2000</td>
          </tr>
          <tr>
              <td>002</td>
              <td>20200323</td>
              <td>3000</td>
          </tr>
          <tr>
              <td>003</td>
              <td>20200603</td>
              <td>2500</td>
          </tr>
      
      </table>
      
    • 合并行或者列的表格

      跨行
      1.从上到下
      2.第一个单元格保留,剩下的删除
      3.给第一个单元格一个属性 rowspan="3" 包含自己在内的总行数
      
      
      跨列
      1.从左到右
      2.第一个单元格保留,剩下的删除
      3.给第一个单元格一个属性 colspan="4" 包含自己在内的总列数
      

      举个例子:

      <table bgcolor="green" border="1px" cellpadding="10" cellspacing="0" align="center">
      
          <caption><h2>职工表</h2></caption>
          <tr>
              <th rowspan="4">部门编号</th>
              <th>职工标号</th>
              <th>职工薪资</th>
          </tr>
          <tr>
              <!--<td>001</td>-->
              <td colspan="2">20200303</td>
      
          </tr>
          <tr>
              <!--<td>002</td>-->
              <td>20200323</td>
              <td>3000</td>
          </tr>
          <tr>
              <!--<td>003</td>-->
              <td>20200603</td>
              <td>2500</td>
          </tr>
      
      </table>
      
  6. form表单标签

    表单提交的方式:post和get

    这里面试可能会问两者的区别:

    1.get请求方式会把提交的数据显示在浏览器的地址栏,post不会显示
    2.get方式提交的数据有大小和长度的限制,post没有
    3.get不安全,post安全

    具体的使用,看下面的例子:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>form表单标签</title>
    </head>
    <body>
    <form action="跳转到的页面.html" method="get">
        <label for="s">文本:</label><input id="s" type="text" placeholder="文本输入框"><br>
        <label for="a">密码:</label><input id="a" type="password" placeholder="密码输入框"><br>
        性别:<input type="radio" name="sex" value=""><input type="radio" name="sex" value=""><br>
        兴趣:<input type="checkbox" name="check" value="旅游">旅游
              <input type="checkbox" name="check" value="吃货">吃货
              <input type="checkbox" name="check" value="学习">学习
              <input type="checkbox" name="check" value="编程">编程 <br>
        文件:<input type="file"><br>
              <input type="submit" value="确定提交"><br>
        按钮:<input type="button" value="点我"><br>
        <input type="hidden"><br>
        取色器: <input type="color"><br>
        日期:<input type="date"><br>
        时间:<input type="datetime-local"><br>
        邮箱:<input type="email"><br>
        数字:<input type="number" style="width: 40px"><br>
        下拉框:<select name="se" id="sese">
                    <option value="你好">你好</option>
                    <option value="他好">他好</option>
                    <option value="很好">很好</option>
                </select>
        <br>
        文本域:<textarea name="" id="" cols="30" rows="10"></textarea>
    </form>
    </body>
    </html>
    

    上面的例子中需要注意的如下:

    1.text 文本输入框
    2.password 密码输入框
    3.radio 单选
    3.checkbox 复选框
    4.file 文件引入按钮
    5.submit提交按钮
    6.button 普通按钮,本身不具备任何功能
    7.image 图片提交
    8.hidden 隐藏域 提交默认的数据
    扩展:
    9.color 取色器
    10.date 日期
    11.dateTime_local 日期和时间
    12.email 邮箱,有@校验功能
    13.number 数字
    
    1.以上所有的表单项都应该有name和value属性,
    	radio和checkbox必须要有name和value
    	text和password可以省略value
    	
    2.text和password还有一个placeholder输入提示属性,不会对输入的值造成干扰
    
    3.radio和checkbox 要实现单选和复选,name属性值必须一致 ,checked 关键字表示默认选中
    

二:CSS的常见用法

CSS 指层叠样式表 (Cascading Style Sheets)

作用:

  • 它是用来美化网页用的
  • HTML代码是用来构建网页整体布局
  • CSS则是用来美化网页。两者缺一不可

1**.三种结合方式**

  • 内联样式(不推荐使用)

    <div style="color: red; font-style: revert; background-color:greenyellow;">
        <span>你好!世界;我会非常努力的</span>
    </div>
    

    直接在标签体里面写style,这样不利于后期维护,所以不建议这样写

  • 内部样式

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS三种结合方式</title>
        <style>
            #div2{
                color: #000;
                font-size: revert;
                background-color: orange;
                width: 600px;
                height: 90px;
            }
        </style>
    
    </head>
    <body>
    <div id="div2">
        <span>这是内部样式</span>
    </div>
        
    </body>
    </html>
    

    这种是利用选择器,在head标签里面写一个style标签,里面用选择器写样式

  • 外部样式

    单独创建一个css文件,将样式都写在里面,然后在HTML中用<link rel="stylesheet" href="../css/a.css">,将css文件引入,这也是当下最流行的写法了,方便维护和多人协作。强烈建议使用这个

  1. 常见的选择器

    • id选择器

      id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 “#” 来定义。

      注意:id选择器只能选择一个。

          <style>
              #mt01{
                  color: red;
                  font-size: 20px;
                  border: 1px solid black;
              }
          </style>
      
      
      <div id="mt01">
          <span>
              Hello World!!!
          </span>
      </div>
      
    • 类选择器

      类选择器以一个点号显示。

      注意:只要有同一类名的class都会被选择,它不像id选择器,这个可以重名

          <style>
      
              .mt02{
                   color: green;
                   font-size: 20px;
                   border: 1px solid darkolivegreen;
               }
      
        
          </style>
      
      <div class="mt02">
          <span>
              Hello World!!!
          </span>
      </div>
      <div class="mt02">
          <span>
              Hello ketty!!!
          </span>
      </div>
      
    • 属性选择器

      为拥有指定属性的 HTML 元素设置样式

      为带有 title 属性的所有元素设置样式
      [title]
      {color:red;}

      [type]{
                  border: 1px solid red;
              }
      
      <input type="text">
      <input type="text">
      <input type="text">
      

      上面例子中所有的type都被选中了。

    • 并集选择器

      可以同时使用多个标签或多个选择器中间使用逗号分开。

      p,h1{
                  color: blue;
              }
      
      <p>nihasdfsdl</p>
      <h1>szhdkkflds</h1>
      
      

      这个用的也比较多

    • 标签选择器

      直接通过标签名称来进行选择,这个是最简单的一种,就不举例子了。

  2. 常用的属性

    • 字体属性

      字体属性的功能:设置页面字体的显示样式。常用的如下:

    	font-family 设置使用的字体
    	font-style 设置字体的样式,是否斜体
    	font-variant 设置字体的大小写
    	font-weight 设置字体的粗细
    	font-size 设置字体的大小
    
    • 颜色和背景属性

      颜色和背景属性的功能:设置页面元素的颜色和背景颜色.常用的如下:

      color 设置元素前景色
      background-color 设置元素背景色	
      background-imge 设置元素背景图案	
      background-repeat 设置背景图案的重复方式	
      background-position 设置背景图案的初始位置	
      background-size 设置背景大小
      
    • 文本属性

      文本属性的功能:设置页面的显示效果。常用的如下:

      text-align 设置文本的对齐方式
      text-indent 设置文本的首行缩进		
      line-height 设置文本的行高		
      a:link 设置链接未访问的状态
      a:visited 设置链接访问过的的状态
      a:hover 设置链接的鼠标激活状态		
      
    • 边框属性

      边框属性是设置页面内边框元素的显示效果

      border: 1px solid red;
      
    • 块属性

      块属性是设置元素之间的距离,常用的如下:

      margin
      	两个容器之间的距离称为margin	
      	即从边框开始往外的距离
      
      padding
      	容器内部的边距称为padding
      	即从边框开始往里的距离
      	设置padding会增加宽,高,不想增加的话,要加上box-sizing: border-box;
      
      margin-top 设置顶边距
      			
      margin-right 设置右边距
      
      padding-top 设置顶端填充距
      
      padding-right  设置右侧填充距
      
      
    • 层属性

      一个容器可以嵌套另一个容器
      设置页面内元素的定位方式:

      • Relative 设置相当定位
        • Absolute 设置绝对定位
  3. 块元素和内联元素

    • 块元素

      自己单独占一行,就像一个段落,常见的有

      ul
      li
      form
      h1-h6
      hr
      p
      div
      
    • 内联元素

      概念:不会自己独立占一行,就好像一个单词,一直往后排

      特点:宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和 外边距的top/bottom(margin-top/margin-bottom)都不可改变。

      常用的有

      a
      big
      br
      em
      img
      input
      label
      selelct
      span
      textarea
      
    • 两者的转化

      • 内联元素---->块元素

        display:block – 显示为块级元素

      • 块元素---->内联元素

        display:inline – 显示为内联元素

      • 转换为内联块元素

        dipslay:inline-block – 显示为内联块元素,表现为同行显示并可修改宽高内外边距等属性

  4. 浮动

    • 两个块级元素都设置了宽度和高度,两个想要占一行,就使用浮动,来进行设置
    • 如果有嵌套,浮动相对的就是父元素,没有父元素,浮动相对的就是浏览器窗口
    • 两边都为左浮动,如果宽度放不下,会被挤下去
    • 默认情况下,子元素能够撑起父元素的高度
    • 如果子元素设置了浮动,是没有办法撑起父元素的高度
    • 如果子元素设置了浮动,父元素要么手动设置高度,要么清除浮动

本文地址:https://blog.csdn.net/qq_39594037/article/details/107391989

相关标签: css