Java Web(三)HTML和CSS

2022-11-23 10:31:21 浏览数 (1)

HTML 和 CSS

什么是 HTML?
  • HTML 是一门语言，所有的网页都是用 HTML 这门语言编写出来的
  • HTML(HyperText Markup Language):超文本标记语言

​ 超文本：超越了文本的限制，比普通文本更强大。除了文字 信息，还可以定义图片、音频、视频等内容​ 标记语言：由标签构成的语言

  • HTML 运行在浏览器上，HTML 标签由浏览器来解析
  • HTML 标签都是预定义好的。例如：使用<img>展示图片
  • W3C 标准：网页主要由三部分组成
  • 结构：HTML 表现：CSS 行为：JavaScript
一.HTML
1.快速入门

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

代码语言：javascript复制
<html>
    <head>
      <title></title>
    </head>
    <body>
      <font color = "red">乾坤未定,你我皆是黑马</font>
    </body>
</html>
2.基础标签

html 表示颜色：1.英文单词：red,pink,blue...2.rgb(值 1，值 2，值 3)：值的取值范围：0~255rgb(255,0,0)3.#值 1 值 2 值了：值的范围：00~FF

转义字符

3.图片、音频、视频标签
  • img:定义图片
  • src:规定显示图像的 URL(统一资源定位符) height:定义图像的高度 width:定义图像的宽度
  • audio:定义音频。支持的音频格式：MP3、WAV、OGG
  • src:规定音频的 URLcontrols:显示播放控件
  • video:定义视频。支持的音频格式：MP4,WebM、OGG
  • src:规定视频的 URLcontrols:显示播放控件
4.超链接标签
  • href:指定访问资源的 URL
  • target:指定打开资源的方式
  • _seIf:默认值，在当前页面打开_blank:在空白页面打开
5.列表标签

有序列表

无序列表

type:设置项目符号

6.表格标签
  • table:定义表格
  • border:规定表格边框的宽度 width:规定表格的宽度 cellspacing:规定单元格之间的空白
  • tr:定义行
  • align:定义表格行的内容对齐方式
  • td:定义单元格
  • rowspan:规定单元格可横跨的行数 colspan:规定单元格可横跨的列数
7.表格标签
8.表单标签
  • 表单：在网页中主要负责数据采集功能，使用<fom>标签定义表单
  • 表单项（元素）：不同类型的 input 元素、下拉列表、文本域等
  • form:定义表单
  • action：规定当提交表单时向何处发送表单数据，ULmethod：规定用于发送表单数据的方式
  • get:浏览器会将数据直接附在表单的 action URL 之后。大小有限制
  • post:浏览器会将数据放到 http 请求消息体中。大小无限制
9.表单项标签
二.CSS
什么是 CSS?
  • CSS 是一门语言，用于控制网页表现

​ CSS(Cascading Style Sheet):层叠样式表

  • W3C 标准：网页主要由三部分组成

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

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{
      color:red;
    }
  </style>
</head>
<body>

<div>Hello CSS~</div>

</body>
</html>

1.CSS 导入方式

CSS 导入 HTML 有三种方式：

1.内联样式：在标签内部使用 style 属性，属性值是 css 属性键值对 <div style="color:red">Hello CSS~</div> 2.内部样式：定义<style>标签，在标签内部定义 css 样式 <style type="text/css"> div{ color:red; } </style> 3.外部样式：定义 ink 标签，引入外部的 css 文件 <link rel="stylesheet"href="demo.css"> demo.css div{ color:red; }

2.CSS 选择器

2.1 概念：选择器是选取需设置样式的元素（标签）

代码语言：javascript复制
div{
  color:red;
}

2.2 分类

2.2.1 元素选择器

代码语言：javascript复制
元素名称{color:red;}
 div{color:red;}

2.2.2id 选择器

代码语言：javascript复制
#id属性值{color:red;}

#name{color:red;)
<div id="name">hello css2</div>

2.2.3 类选择器

代码语言：javascript复制
.class属性值{color:red;}

.cls{color:red;}
<div class="cls">hello css3</div>

html css php 编程算法

0 人点赞