笙鹿鸣
笙鹿鸣

Javaweb笔记

HTML

HTML网页常用基础知识

网页结构

JavaSE C/S Client server 客户端–服务器

JavaWeb B/S Broswer Server 浏览器–服务器

网页的组成部分：

内容（结构）、表现、行为

HTML: Hyper Text Markup Language(超文本标记语言)

ALT+F2 选择浏览器

HTML书写规范：

表示整个 html 页面的开始

头信息

标题

标题

body 是页面的主体内容

页面主体内容

表示整个 html 页面的结束

HTML注释 ：

HTML做注释快捷键：ctrl+shift+/

ctrl+d 复制粘贴当前行

标签的格式:

<标签名>封装的数据

标签拥有自己的属性

​ 1、基本属性 ： bgcolor=“red” 可以修改简单的样式效果 可以修改简单的样式

​ 2、事件属性 ： οnclick=“alert(‘你好！’);” 可以直接设置事件响应后的代码

button ： 按钮

标签：单标签，双标签

​ 1、单表签格式：<标签名/> br 换行 hr 水平线

​ 2、双标签格式：<标签名> …封装的数据…

​ 3、属性必须有值，属性值必须加引号

HTML中常用标签介绍：

1、设置字体标签

​ font标签

<html>
<head>
<meta charset="UTF-8">
<title>1.font标签.htmltitle>
head>
<body>

 
   我是字体标签font>


body>
html>

2、特殊字符

​ 常用br标签换行

3、超链接标签

​ a标签

<html>
<head>
<meta charset="UTF-8">
<title>4.超链接.htmltitle>
head>
<body>

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

4、显示图片标签

​ img 标签可以在 html 页面上显示图片


<html>
<head>
<meta charset="UTF-8">
<title>5.img标签.htmltitle>
head>
<body>
    


    美女找不到
    <img src="../imgs/2.jpg" width="200" hight="260"/>
    <img src="../imgs/3.jpg" width="200" hight="260"/>
    <img src="../imgs/4.jpg" width="200" hight="260"/>
    <img src="../imgs/5.jpg" width="200" hight="260"/>
    <img src="../imgs/6.jpg" width="200" hight="260"/>
    <img src="../imgs/7.jpg" width="200" hight="260"/>

body>
html>

5、表格标签

​ table标签

 
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>表格标签title>
 head>
 <body>

 

 <table align="center" border="1" width="300" height="300" cellspacing="0">
   <tr>
     <th >1.1th>
     <th>1.2th>
     <th>1.3th>
   tr>
   <tr>
     <td>2.1td>
     <td>2.2td>
     <td>2.3td>
   tr>
   <tr>
     <td>3.1td>
     <td>3.2td>
     <td>3.3td>
   tr>
 table>
 body>
html>

6、跨行跨列标签

​ 属性设置跨列：colspan
​ 属性设置跨行： rowspan


<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>7.表格的跨行跨列title>
 head>
 <body>

  
  <table width="500"  height="500"  cellspacing="0" border="1">
    <tr>
      <td colspan="2">1.1td>
      <td>1.3td>
      <td>1.4td>
      <td>1.5td>
    tr>



    <tr>
      <td rowspan="2">2.1td>
      <td>2.2td>
      <td>2.3td>
      <td>2.4td>
      <td>2.5td>
    tr>


    <tr>
      <td>3.2td>
      <td>3.3td>
      <td>3.4td>
      <td>3.5td>
    tr>


    <tr>
      <td>4.1td>
      <td>4.2td>
      <td>4.3td>
      <td colspan="2"  rowspan="2">4.4td>
    tr>



    <tr>
      <td>5.1td>
      <td>5.2td>
      <td>5.3td>

    tr>
  table>


 body>
html>

7、内嵌窗口

​ iframe 框架标签


<html>
<head>
<meta charset="UTF-8">
<title>8.iframe标签.htmltitle>
head>
<body>
 我是一个单独的完整页面
  
  <iframe src="3.标题标签.html" width="500" height="400" name="abc">iframe>
  <br/>

  <ul>
    <li><a href="0-标签语法.html" target="abc">0-标签语法.htmla>li>
    <li><a href="1.font标签.html" target="abc">1、font标签.htmla>li>
    <li><a href="2.特殊字符.html" target="abc">2、特殊字符.htmla>li>
  ul>

body>
html>

8、表单标签

8.1 表单标签

​ forme标签就是表单

​ input type=“text” 是文件输入框 value设置默认内容
​ input type=“password” 是密码输入框 value设置默认显示内容
​ input type=“radio” 是单选框 name可以对其进行分组checked="checked"表示默认选中
​ input type=“checkbox” 是复选框 checked="checked"表示默认选中
​ input type=“reset” 是重置按钮 value属性修改按钮上的文本
​ input type=“submit” 是提交按钮 value属性修改按钮上的文本
​ input type=“button” 是按钮 value属性修改按钮上的文本
​ input type=“file” ` 是文件上传域
​ input type=“hidden” 是隐藏域 当我们要发送某些信息，而这些信息，不需 要用户参与，就可以使用隐藏域（提交时同时发送给服务器）

​ select 标签是下拉列表框
​ option 标签是下拉列表中的选项 selected="selected"设置默认选中

​ textarea 表示表示多行文本输入 （起始标签和结束标签中的内容是默认值）
​ rows 属性设置可以显示几行的高度
​ cols 属性设置每行可以显示几个字符宽度


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表单的显示title>
head>
<body>

    <form>
       <h1 align="center">用户注册h1>
      <table align="center">
        <tr>
          <td> 用户名称:td>
          <td>
            <input type="text" value="默认值"/><br/>
          td>
        tr>
        <tr>
          <td>用户密码:td>
          <td><input type="password" /><br/>td>
        tr>
        <tr>
          <td>  确认密码:td>
          <td><input type="password" /><br/> td>
        tr>
        <tr>
          <td>性别: td>
          <td><input type="radio" name="sex" checked="checked"/>男
            <input type="radio" name="sex"/>女<br/>
          td>
        tr>
        <tr>
          <td> 兴趣爱好:td>
          <td> <input type="checkbox"/>抽烟<input type="checkbox"/>喝酒烫头<br/>td>
        tr>
        <tr>
          <td>  国籍:td>
          <td>
            <select>
              <option>--请选择国籍option>
              <option selected="selected">中国option>
              <option>俄罗斯option>
              <option>乌克兰option>
            select><br/>
          td>
        tr>
        <tr>
          <td> 自我评价:td>
          <td>  <textarea rows="10" close="20" >我才是默认值textarea><br/>td>
        tr>
        <tr>
          <td>   <input type="reset"/>td>
          <td align="center"> <input type="submit" />td>
        tr>
        <tr>
         
          <td > <input type="hidden" name="fdejcvhsdg"/>td>
        tr>

      table>


    form>
body>
html>
8.2 表单提交的细节

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表单的显示title>
head>
<body>

    <form action="https://locallhost:8080" method="post">
        <td > <input type="hidden" name="action" value="login"/>td>
       <h1 align="center">用户注册h1>
      <table align="center">
        <tr>
          <td> 用户名称:td>
          <td>
            <input type="text" name="username" value="默认值"/><br/>
          td>
        tr>
        <tr>
          <td>用户密码:td>
          <td><input type="password" name="password"/><br/>td>
        tr>
        
        <tr>
          <td>性别: td>
          <td><input type="radio" name="sex" checked="checked" value="boy"/>男
            <input type="radio" name="sex" value="girl"/>女<br/>
          td>
        tr>
        <tr>
          <td> 兴趣爱好:td>
          <td> <input name="hobby" type="checkbox" value="Smoking"/>抽烟
             <input name="hobby" type="checkbox" value="Drinking"/>喝酒
             烫头
             <br/>
          td>
        tr>
        <tr>
          <td>  国籍:td>
          <td>
            <select name="county">
              <option value="none">--请选择国籍option>
              <option selected="selected" value="cn">中国option>
              <option value="ru">俄罗斯option>
              <option value="wkl">乌克兰option>
            select><br/>
          td>
        tr>
        <tr>
          <td> 自我评价:td>
          <td>  <textarea rows="10" close="20" >我才是默认值textarea><br/>td>
        tr>
        <tr>
          <td>   <input type="reset" />td>
          <td align="center"> <input type="submit" />td>
        tr>

      table>


    form>
body>
html>

9、其他常用标签

​




  
  其他标签


    
  
div标签1

  
div标签2

  span标签1
  span标签2
  
p标签段落1

  
p标签段落2

CSS技术

1、CSS 技术介绍

​ CSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

2、CSS语法规则

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-acBqWH0q-1647157677235)(C:\Users\lenovo\Pictures\Saved Pictures\image-20220313110423206.png)]

​ 选择器：浏览器根据“选择器”决定受 CSS 样式影响的 HTML 元素（标签）。

** 属性** (property) 是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并 由花括号包围，这样就组成了一个完整的样式声明（declaration），例如：p {color: blue}

​ **多个声明：**如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的 最后可以不加分号(但尽量在每条声明的末尾都加上分号)

** 例如：**

​ p{

​ color:red;font-size:30px;

​ }

​ 注：一般每行只描述一个属性

​ CSS 注释：/注释内容/

3、CSS与HTML结合方式

​ 常用第三种

  • 1、

    在标签的 style 属性上设置”key:value value;”，修改标签样式

  • 2、

    在 head 标签中，使用 style 标签来定义各种自己需要的 css 样式。

    格式如下：

    xxx {

    Key : value value;

    }

  • 3、

    把 css 样式写成一个单独的 css 文件，再通过 link 标签引入即可复用。

    使用 html 的 “stylesheet” type=“text/css” href="./styles.css" /> 标签 导入 css 样

    式文件

    CSS:

div{
  border: 1px solid red;
}
span{
  border: 1px solid red;
}

​ HTML:


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  
  <link rel="stylesheet" type="text/css" href="1.css"/>
head>
<body>
  
  <div  >div 标签 1div>
  <div   >div 标签 2div>
  <span  >span 标签 1span>
  <span   >span 标签 2span>
body>
html>

4、CSS选择器

1、标签名选择器

​ 标签名选择器的格式是：

​ 标签名{

​ 属性：值;

​ }

​ 标签名选择器，可以决定哪些标签被动的使用这个样式


<html>
<head>
 <meta charset="UTF-8">
 <title>CSS选择器title>
    <style type="text/css">
      div{
            border: 1px solid yellow;
            color :blue;
            font-size : 30px;
      }
      span{
            border: 1px dashed blue;
            color :yellow;
            font-size : 20px;
      }
    style>

head>
<body>


 
 <div>div标签1div>
 <div>div标签2div>
 <span>span标签1span>
 <span>span标签2span>

body>
html>

2、id选择器

​ id 选择器的格式是：

​ #id 属性值{

​ 属性：值;

​ }

​ id 选择器，可以让我们通过 id 属性选择性的去使用这个样式。


<html>
<head>
 <meta charset="UTF-8">
 <title>ID选择器title>
  <style type="text/css">

    #id001{
          color:blue;
          font-size: 30px;
          border: 1px yellow solid;
    }

    #id002{
      color:red;
      font-size:20px;
      border: 5px blue dotted;
    }

  style>
head>
<body>

 

 <div id="id002">div标签1div>
 <div id="id001">div标签2div>

body>
html>

3、class 选择器（类选择器）

​ class 类型选择器的格式是：

​ **.**class 属性值{

​ 属性：值;

​ }

​ class 类型选择器，可以通过 class 属性有效的选择性地去使用这个样式


<html>
<head>
<meta charset="UTF-8">
<title>class类型选择器title>
  <style type="text/css">

    .class01{
      color: blue;
      font-size: 30px;
      border: 1px yellow solid;
    }

    .class02{
      color: gray;
      font-size: 26px;
      border: 1px red solid;
    }

  style>
head>
<body>

 

 <div class="class02">div标签class01div>
 <div class="class01">div标签div>
 <span >span标签class01span>
 <span>span标签2span>

body>
html>

4、组合选择器

​ 组合选择器的格式是：

​ 选择器 1，选择器 2，选择器 n{

​ 属性：值;

​ }

​ 组合选择器可以让多个选择器共用同一个 css 样式代码。


<html>
<head>
<meta charset="UTF-8">
<title>class类型选择器title>
  <style type="text/css">
    .class01,#id01{
      color:blue;
      font-size:20px;
      border:1px yellow solid;
    }
  style>
head>
<body>

 

   <div class="class01">div标签class01div> <br />
   <span id="id01">span 标签span>  <br />
   <div>div标签div> <br />
   <div>div标签id01div> <br />

body>
html>

5、常用选择器

​ 1、字体颜色

​ color：red；

​ 颜色可以写颜色名如：black, blue, red, green 等

​ 颜色也可以写 rgb 值和十六进制表示值：如 rgb(255,0,0)，#00F6DE，如果写十六进制值必

​ 须加#2、宽度

​ width:19px;

​ 宽度可以写像素值：19px；

​ 也可以写百分比值：20%；

​ 3、高度

​ height:20px;

​ 高度可以写像素值：19px；

​ 也可以写百分比值：20%；

​ 4、背景颜色

​ background-color:#0F2D4C

​ 4、字体样式：

​ color：#FF0000；字体颜色红色

​ font-size：20px; 字体大小

​ 5、红色 1 像素实线边框

​ border：1px solid red;

​ 7、DIV 居中

​ margin-left: auto;

​ margin-right: auto;

​ 8、文本居中：

​ text-align: center;9、超连接去下划线

​ text-decoration: none;

​ 10、表格细线

​ table {

​ border: 1px solid black; /设置边框/

​ border-collapse: collapse; /将边框合并/

​ }

​ td,th {

​ border: 1px solid black; /设置边框/

​ }

​ 11、列表去除修饰

​ ul {

​ list-style: none;

​ }


<html>
<head>
<meta charset="UTF-8">
<title>06-css常用样式.htmltitle>