JavaWeb基础教程-----（5）HTML&CSS

最新推荐文章于 2023-07-04 19:17:28 发布

NQGL.

最新推荐文章于 2023-07-04 19:17:28 发布

阅读量215

点赞数

分类专栏： JavaWeb 文章标签： html css

本文链接：https://blog.csdn.net/weixin_45595929/article/details/130695187

版权

JavaWeb 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

HTML&CSS

一、HTML
二、CSS

一、HTML

1. HTML介绍

1.1 介绍

HTML 是一门语言，所有的网页都是用HTML 这门语言编写出来的，也就是HTML是用来写网页的。
HTML(HyperText Markup Language)超文本标记语言：
- 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容
- 标记语言：由标签构成的语言
HTML 运行在浏览器上，HTML标签由浏览器来解析
HTML 标签参考手册
HTML标签都是预定义好的。例如：使用< img>展示图片
W3C 标准:网页主要由三部分组成
- 结构: HTML
- 表现: CSS
- 行为: JavaScript

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

1.2 HTML快速入门

新建文本文件，后缀名改为.html
编写HTML结构标签
在< body>中定义文字

<html>
	<head>
		<title>HTML快速入门</title>
	</head>
	<body>
		Hello！！
	</body>
</html>

HTML 文件以.htm或.html为扩展名
HTML 结构标签
HTML 标签不区分大小写
HTML 标签属性值单双引皆可
HTML 语法松散，但是建议按照要求书写

2. 标签

2.1 基础标签

在这里插入图片描述

Html表示颜色color：
- 英文单词：red，green，blue…
- rgb(值1,值2,值3)：值的范围0-255；rgb(255,0,0)
- #值1值2值3：值的范围00-ff；#ff0000
特殊符号使用转义字符

2.2 图片音频视频标签

在这里插入图片描述

img：定义图片
- src：规定显示图像的 URL（统一资源定位符）
- height：定义图像的高度
- width：定义图像的宽度
audio：定义音频。支持的音频格式：MP3、WAV、OGG
- src：规定音频的 URL
- controls：显示播放控件，controls=“controls”
video：定义视频。支持的音频格式：MP4、WebM、OGG
- src：规定视频的 URL
- controls：显示播放控件

尺寸单位：
（1）像素(默认)：px
（2）百分比%：占父标签的百分比。例如宽度设置为 50%，意思就是占它的父标签宽度的一般（50%）

资源路径：

绝对路径：完整路径
相对路径：相对位置关系
./ 表示当前路径，同一级目录，可省略（./a.jpg或者a.jpg）
…/ 表示上一级路径
…/…/ 表示上两级路径

2.3 超链接标签

在这里插入图片描述

< a>标签的属性：

href：指定访问资源的URL。href是超文本引用Hypertext Reference的缩写。
target：指定打开资源的方式
- _self：默认值，在当前页面打开
- _blank：新的空白页面打开

2.4 列表标签

在这里插入图片描述

有序列表中的 type 属性用来指定标记的标号的类型（数字、字母、罗马数字等）。
无序列表中的 type 属性用来指定标记的形状
注意：不建议使用type属性，用css样式修改类型更好

2.5 表格标签

在这里插入图片描述

table ：定义表格
- border：规定表格边框的宽度
- width ：规定表格的宽度
- cellspacing：规定单元格之间的空白
tr ：定义行
- align：定义表格行的内容对齐方式
td ：定义单元格
- rowspan：规定单元格可横跨的行数，即多行合并单元格
- colspan：规定单元格可横跨的列数，即多列合并单元格
th：定义表头单元格

【示例】：

<table border="1" cellspacing="0" width="500">
  <tr>
    <th>序号</th>
    <th>品牌logo</th>
    <th>品牌名称</th>
    <th>企业名称</th>
  </tr>
  <tr align="center">
    <td>010</td>
    <td><img src="../img/三只松鼠.png" width="60" height="50"></td>
    <td>三只松鼠</td>
    <td>三只松鼠</td>
  </tr>

  <tr align="center">
    <td>009</td>
    <td><img src="../img/优衣库.png" width="60" height="50"></td>
    <td>优衣库</td>
    <td>优衣库</td>
  </tr>

  <tr align="center">
    <td>008</td>
    <td><img src="../img/小米.png" width="60" height="50"></td>
    <td>小米</td>
    <td>小米科技有限公司</td>
  </tr>
</table>

2.6 布局标签

在这里插入图片描述

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

2.7 表单标签

表单：在网页中主要负责数据采集功能，使用标签定义表单
表单项(元素)：不同类型的 input 元素、下拉列表、文本域等

在这里插入图片描述

form：定义表单
- action：规定当提交表单时向何处发送表单数据，该属性值就是URL
- method ：规定用于发送表单数据的方式
  - get：默认值。浏览器会将数据直接附在表单的action URL之后，大小有限制，url的长度有限制 4KB
  - post：浏览器将数据放到http请求消息体中，大小无限制

【示例】：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

  <form action="#" method="post">
    <input type="text" name="username">
    <input type="submit">
  </form>

</body>
</html>

2.8 表单项标签

< input>：表单项，通过type属性控制输入形式
<select>：定义下拉标签，<option>定义列表项
<textarea>：文本区域

在这里插入图片描述

<label>：当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上；<label> 标签的 for 属性应当与相关元素的 id 属性相同。
radio：使用name属性达到互斥效果

标签项的内容需要提交，必须定义 name 属性。
id属性值是每个标签的唯一标识。一般用于css和js中引用,它只在前端页面中起作用。
单选框、复选框、下拉列表需要使用 value 属性指定提交的值。

【示例】：

<body>

<form action="#" method="post">

  <input type="hidden" name="id" value="123">

  <label for="username">用户名：</label>
  <input type="text" name="username" id="username"><br>

  <label for="password">密&ensp;&ensp;码：</label>
  <input type="password" name="password" id="password"><br>

  性&ensp;&ensp;别：
    <input type="radio" name="gender" value="1" id="male"><label for="male">男</label>
    <input type="radio" name="gender" value="2" id="female"><label for="female">女</label>
    <br>

  爱&ensp;&ensp;好：
    <input type="checkbox" name="hobby" value="1">旅游
    <input type="checkbox" name="hobby" value="2">电源
    <input type="checkbox" name="hobby" value="3">游戏
    <br>

  头&ensp;&ensp;像：
    <input type="file"><br>

  城&ensp;&ensp;市：
    <select name="city">
      <option>北京</option>
      <option>上海</option>
      <option>广州</option>
    </select><br><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>

效果：
在这里插入图片描述

二、CSS

CSS 是一门语言，用于控制网页表现
CSS(Cascading Style Sheet)层叠样式表

1. CSS导入方式

CSS 导入 HTML有三种方式：

内联样式：在标签内部使用style属性，属性值是css属性键值对（复用性差）

<div style="color: red">Hello CSS~</div>

内部样式：定义<style>标签，在标签内部定义css样式

<style type="text/css">
    div{
        color: red;
    }
</style>

外部样式：定义link标签，引入外部的css文件
写一个demo.css文件

    div{
        color: red;
    }

<link rel="stylesheet"  href="demo.css">

【示例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    span{
      color: blue;
    }
  </style>
  <link href="../css/demo.css" rel="stylesheet">
</head>
<body>

<div style="color: red">hello css</div>

<span>hello css </span>

<p>hello css</p>

</body>
</html>

p{
    color: chartreuse;
}

2. CSS选择器

选择器就是选取需设置样式的元素（标签）
分类：
选择器优先级顺序：
行内样式(例如<p class=“style”></p>) > ID选择器(#) > Class选择器(.) > 元素选择器(p/div) > 通配符(*) > 自带样式 > 继承
【示例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: red;
        }

        #name{
            color: blue;
        }

        .cls{
            color: yellow;
        }

    </style>
</head>
<body>

<div>div1</div>
<div id="name">div2</div>
<div class="cls">div3</div>

<span class="cls">span</span>

</body>
</html>