15天深度复习JavaWeb的详细笔记(四)——HTML、CSS

亦凉 2023-10-02 21:16 43阅读 0赞

## Demo04-HTML、CSS ##

### 1，HTML ###

#### 1.1 介绍 ####

*  HTML 是一门语言，所有的网页都是用HTML 这门语言编写出来的，也就是HTML是用来写网页的，像京东，12306等网站有很多网页。
 *  HTML(HyperText Markup Language)：超文本标记语言:
    
     *  超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容
     *  标记语言：由标签构成的语言(以前学的xml也是标记语言)
 *  这些标签不像XML那样可以自定义，因为需要把这些标签交给浏览器解析,那么浏览器肯定要认识你这些标签啊,所以==HTML中的标签都是预定义好的，运行在浏览器上并由浏览器解析，==然后展示出对应的效果

W3C标准:

W3C是万维网联盟，这个组成是用来定义标准的。他们规定了一个网页是由三部分组成，分别是：

*  结构：对应的是 HTML 语言
 *  表现：对应的是 CSS 语言
 *  行为：对应的是 JavaScript 语言

HTML定义页面的整体结构；CSS是用来美化页面，让页面看起来更加美观；JavaScript可以使网页动起来，比如轮播图也就是多张图片自动的进行切换等效果

#### 1.2 快速入门 ####

*  HTML 文件以.htm或.html为扩展名
 *  <!DECTYPE html>
    
     *  html5的表示
 *   *  页面的字符集
 *  HTML 结构标签
    
    <table> 
     <thead> 
      <tr> 
       <th>标签</th> 
       <th>描述</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>&lt;HTML&gt;</td> 
       <td>定义 HTML 文档</td> 
      </tr> 
      <tr> 
       <td>&lt;head&gt;</td> 
       <td>定义关于文档的信息</td> 
      </tr> 
      <tr> 
       <td>&lt;title&gt;</td> 
       <td>定义文档的标题</td> 
      </tr> 
      <tr> 
       <td>&lt;body&gt;</td> 
       <td>定义文档的主体</td> 
      </tr> 
     </tbody> 
    </table>
 *  HTML 标签不区分大小写
 *  HTML 标签属性值 单双引皆可
 *  HTML 语法松散
    
    比如 font 标签不加结束标签也是可以展示出效果的。但是建议同学们在写的时候还是不要这样做，严格按照要求去写。

#### 1.3 基础标签 ####

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>&lt;h1&gt; ~ &lt;h6&gt;</td> 
   <td>定义标题，h1最大，h6最小</td> 
  </tr> 
  <tr> 
   <td>&lt;font&gt;</td> 
   <td>定义文本的字体、字体尺寸、字体颜色</td> 
  </tr> 
  <tr> 
   <td>&lt;b&gt;</td> 
   <td>定义粗体文本</td> 
  </tr> 
  <tr> 
   <td>&lt;i&gt;</td> 
   <td>定义斜体文本</td> 
  </tr> 
  <tr> 
   <td>&lt;u&gt;</td> 
   <td>定义文本下划线</td> 
  </tr> 
  <tr> 
   <td>&lt;center&gt;</td> 
   <td>定义文本居中</td> 
  </tr> 
  <tr> 
   <td>&lt;p&gt;</td> 
   <td>定义段落</td> 
  </tr> 
  <tr> 
   <td>&lt;br&gt;</td> 
   <td>定义折行</td> 
  </tr> 
  <tr> 
   <td>&lt;hr&gt;</td> 
   <td>定义水平线</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][eb4346efbe0b46c1b92538826b5b10c5.png_pic_center]

关于font字体标签:

*  face 属性：用来设置字体。如 “楷体”、"宋体"等
 *  color 属性：设置文字颜色。颜色有三种表示方式
    
     *  **英文单词**：red,pink,blue…
        
        这种方式表示的颜色特别有限，所以一般不用。
     *  **rgb(值1,值2,值3)**：值的取值范围：0~255
        
        此种方式也就是三原色（红绿蓝）设置方式。 例如： rgb(255,0,0)。
        
        这种书写起来比较麻烦，一般不用。
     *  **\#值1值2值3**：值的范围：00~FF
        
        这种方式是rgb方式的简化写法，以后基本都用此方式。
        
        值1表示红色的范围，值2表示绿色的范围，值3表示蓝色范围。例如： \#ff0000
 *  size 属性：设置文字大小

#### 1.4图片,音频,视频标签 ####

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>&lt;img&gt;</td> 
   <td>定义图片</td> 
  </tr> 
  <tr> 
   <td>&lt;audio&gt;</td> 
   <td>定义音频</td> 
  </tr> 
  <tr> 
   <td>&lt;video&gt;</td> 
   <td>定义视频</td> 
  </tr> 
 </tbody> 
</table>

*  img：定义图片
    
     *  src：规定显示图像的 URL
     *  height：定义图像的高度
     *  width：定义图像的宽度
        
         *  height属性和width属性有两种设置方式：
            
             *  像素：单位是px(如果只写了height="200"那其实就是height=“200px”)
             *  百分比。占父标签的百分比。例如宽度设置为 50%，意思就是占它的父标签宽度的一般（50%）
 *  audio：定义音频。支持的音频格式：MP3、WAV、OGG
    
     *  src：规定音频的 URL
     *  controls：显示播放控件(也就是播放按钮)
 *  video：定义视频。支持的音频格式：MP4, WebM、OGG
    
     *  src：规定视频的 URL
     *  controls：显示播放控件(也就是播放按钮)
     *  height：定义视频的高度
     *  width：定义视频的宽度

资源路径有如下两种设置方式：

*  绝对路径：完整路径
    
    这里的绝对路径是网络中的绝对路径。 格式为： 协议://ip地址:端口号/资源名称,如:
    
        <img src="https://th.bing.com/th/id/R33674725d9ae34f86e3835ae30b20afe?rik=Pb3C9e5%2b%2b3a9Vw&riu=http%3a%2f%2fwww.desktx.com%2fd%2ffile%2fwallpaper%2fscenery%2f20180626%2f4c8157d07c14a30fd76f9bc110b1314e.jpg&ehk=9tpmnrrRNi0eBGq3CnhwvuU8PPmKuy1Yma0zL%2ba14T0%3d&risl=&pid=ImgRaw" width="300" height="400">
    
    这里src属性的值就是网络中的绝对路径。
 *  相对路径：相对位置关系
    
    找页面和其他资源的相对路径。
    
    > ./ 表示该html文件当前所在目录的路径(可省略)
    > 
    > …/ 表示该html文件当前所在目录的上一级目录的路径
    > 
    > …/…/ 表示该html文件当前所在目录的上两级目录路径

#### 1.5 超链接标签 ####

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>&lt;a&gt;</td> 
   <td>定义超链接，用于链接到另一个资源</td> 
  </tr> 
 </tbody> 
</table>

*  href：指定访问资源的URL
 *  target：指定打开资源的方式
    
     *  \_self:默认值，在当前页面打开
     *  \_blank：在空白页面打开
     *  一般情况下:在页面内部跳转用前者,如果是跳转到外部页面用后者

#### 1.6列表标签 ####

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>&lt;ol&gt;</td> 
   <td>定义有序列表</td> 
  </tr> 
  <tr> 
   <td>&lt;ul&gt;</td> 
   <td>定义无序列表</td> 
  </tr> 
  <tr> 
   <td>&lt;li&gt;</td> 
   <td>定义列表项</td> 
  </tr> 
 </tbody> 
</table>

*  typeol和ul的属性,用来设置符号的类型

#### 1.7表格标签 ####

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>&lt;table&gt;</td> 
   <td>定义表格</td> 
  </tr> 
  <tr> 
   <td>&lt;tr&gt;</td> 
   <td>定义行</td> 
  </tr> 
  <tr> 
   <td>&lt;td&gt;</td> 
   <td>定义单元格</td> 
  </tr> 
  <tr> 
   <td>&lt;th&gt;</td> 
   <td>定义表头单元格</td> 
  </tr> 
 </tbody> 
</table>

table用来定义表格:

*  属性:
    
     *  width：宽度
     *  border：边框
     *  cellpadding：定义内容和单元格的距离
     *  cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
     *  bgcolor：背景色
     *  align：对齐方式
 *  内嵌标签:
    
     *  tr：定义行
        
         *  属性:
            
             *  bgcolor：背景色
             *  align：对齐方式
         *  内嵌标签:
            
             *  td：定义单元格
                
                 *  colspan：合并列
                 *  rowspan：合并行
             *  th：定义表头单元格

#### 1.8布局标签 ####

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>&lt;div&gt;</td> 
   <td>块级标签,占满一整行,用来定义 HTML 文档中的一个区域部分</td> 
  </tr> 
  <tr> 
   <td>&lt;span&gt;</td> 
   <td>行内标签,用于组合行内元素。</td> 
  </tr> 
 </tbody> 
</table>

*  这两个标签，一般都是和css结合到一块使用来实现页面的布局
 *  div标签 在浏览器上会有换行的效果，而 span\`标签在浏览器上没有换行效果。

#### 1.9表单标签 ####

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>&lt;form&gt;</td> 
   <td>定义表单</td> 
  </tr> 
  <tr> 
   <td>&lt;input&gt;</td> 
   <td>定义表单项，通过type属性控制输入形式</td> 
  </tr> 
  <tr> 
   <td>&lt;label&gt;</td> 
   <td>为表单项定义标注</td> 
  </tr> 
  <tr> 
   <td>&lt;select&gt;</td> 
   <td>定义下拉列表</td> 
  </tr> 
  <tr> 
   <td>&lt;option&gt;</td> 
   <td>定义下拉列表的列表项</td> 
  </tr> 
  <tr> 
   <td>&lt;textarea&gt;</td> 
   <td>定义文本域</td> 
  </tr> 
 </tbody> 
</table>

*  form是表单标签，它**在页面上没有任何展示的效果。需要借助于表单项标签来展示不同的效果**

##### 1.9.1form标签属性 #####

*  action：规定当提交表单时向何处发送表单数据，该属性值就是URL
    
    以后会将数据提交到服务端，该属性需要书写服务端的URL。而今天我们可以书写 **\# 表示提交到当前页面**来看效果。
    
     *  **要想提交数据，input输入框必须设置 name属性**,name的属性值就是提交数据时的参数名
 *  method ：规定用于发送表单数据的方式
    
    method取值有如下两种：
    
     *  get：默认值。如果不设置method属性则默认就是该值
        
         *  请求参数会拼接在URL后边
            
             *  因为url长度是有限的,所以get方式提交的数据也是有限的
     *  post：
        
         *  浏览器会将数据放到http请求消息体中
            
             *  请求参数无限制的

##### 1.9.2表单项标签 #####

*  <select>标签:定义下拉列表，内嵌标签<option>用来 定义列表项
 *  <textarea>是文本域标签:可以输入多行文本，而 input输入框只能输入一行文本

下面详细说input标签:

<table> 
 <thead> 
  <tr> 
   <th>type 取值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>text</td> 
   <td>默认值。定义单行的输入字段</td> 
  </tr> 
  <tr> 
   <td>password</td> 
   <td>定义密码字段</td> 
  </tr> 
  <tr> 
   <td>radio</td> 
   <td>定义单选按钮</td> 
  </tr> 
  <tr> 
   <td>checkbox</td> 
   <td>定义复选框</td> 
  </tr> 
  <tr> 
   <td>file</td> 
   <td>定义文件上传按钮</td> 
  </tr> 
  <tr> 
   <td>hidden</td> 
   <td>定义隐藏的输入字段</td> 
  </tr> 
  <tr> 
   <td>submit</td> 
   <td>定义提交按钮，提交按钮会把表单数据发送到服务器</td> 
  </tr> 
  <tr> 
   <td>reset</td> 
   <td>定义重置按钮，重置按钮会清除表单中的所有数据</td> 
  </tr> 
  <tr> 
   <td>button</td> 
   <td>定义可点击按钮</td> 
  </tr> 
 </tbody> 
</table>

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <form action="#" method="post">
            
            <input type="hidden" name="id" value="123">
    
            <label for="username">用户名：</label>
            <input type="text" name="username" id="username">
            <br>
    
            性别：
            <input type="radio" name="gender" value="1" id="male"> <label for="male">男</label>
            <input type="radio" name="gender" value="0" id="female"> <label for="female">女</label>
            <br>
    
            爱好：
            <input type="checkbox" name="hobby" value="1"> 旅游
            <input type="checkbox" name="hobby" value="2"> 电影
            <br>
    
            头像：
            <input type="file"><br>
    
            城市:
            <select name="city">
                <option>北京</option>
                <option value="shanghai">上海</option>
                <option>广州</option>
            </select>
            <br>
    
            个人描述：
            <textarea cols="20" rows="5" name="desc"></textarea>
            <br>
            <br>
            <input type="submit" value="免费注册">
            <input type="reset" value="重置">
            <input type="button" value="一个按钮">
        </form>
    </body>
    </html>

*  第10行:
    
     *  开发中有时主键id需要前端传给后端,但是我们又不想让用户看到或修改这个id,就可以用type="hidden"将其隐藏
 *  第12行的for="username"和13行的id=“username”:
    
     *  目的是使其产生关联,这样的话我鼠标点"用户名:"文本鼠标就会定位到输入框
 *  第17行的name="gender"和18行的name=“gender”:
    
     *  目的是为了让这两个单选框产生互斥的效果,这样的话用户就只能二选一了
     *  第22和第23行同理
 *  第17行的value="1"和18行的value=“0”:
    
     *  如果不设置这两个,无论选择男还是女提交数据时都是提交on
     *  第22和23行同理
 *  第32行的value=“shanghai”:
    
     *  如果写了那么提交数据时就提交value的值
     *  如果没写就默认提交option标签中的文本

>  *  以上标签项的内容要想提交，必须得定义 name 属性
>  *  每一个标签都有id属性，id属性值是唯一的标识
>  *  单选框、复选框、下拉列表需要使用 value属性指定提交的值

### 2，CSS ###

#### 2.1 概述 ####

==CSS 是一门语言，用于控制网页表现。==我们之前介绍过W3C标准。W3C标准规定了网页是由以下组成：

*  结构：HTML
 *  表现：CSS
 *  行为：JavaScript

CSS也有一个专业的名字：Cascading Style Sheet（层叠样式表）。

#### 2.2 css 导入方式 ####

css 导入方式其实就是 css 代码和 html 代码的结合方式。CSS 导入 HTML有三种方式：

*  内联样式：在标签内部使用style属性，属性值是css属性键值对
    
        <div style="color: red">Hello CSS~</div>
    
    > 给方式只能作用在这一个标签上，如果其他的标签也想使用同样的样式，那就需要在其他标签上写上相同的样式。复用性太差。
 *  内部样式：定义

rel="stylesheet"是为了告诉浏览器引入的文件为css样式的文件

#### 2.3 css 选择器 ####

*  元素选择器:
    
     *  元素名称\{color:red;\}
 *  id选择器:
    
     *  \#id属性值\{color:red;\}
 *  类选择器:
    
     *  .class属性值\{color:red;\}

> 如果这三种选择器作用在了同一个元素上,那么谁范围小谁生效,即优先级:id选择器>类选择器>元素选择器

#### 2.4 css 属性 ####

css有很多css属性，你要想把它们都学会，需要花费很长的时间。而我们作为java程序员，不需要重点掌握这部分内容。对于网页三剑客中css是对我们要求最低的.几乎不需要使用,真的要使用时可以去W3school查看帮助文档:[W3school][]

[eb4346efbe0b46c1b92538826b5b10c5.png_pic_center]: https://img-blog.csdnimg.cn/eb4346efbe0b46c1b92538826b5b10c5.png#pic_center
[W3school]: https://www.w3school.com.cn/h.asp