写点什么

Java Web(三)HTML 和 CSS

作者:浅辄
  • 2022-11-11
    吉林
  • 本文字数:1388 字

    阅读完需:约 5 分钟

HTML 和 CSS

什么是 HTML?

  • HTML 是一门语言,所有的网页都是用 HTML 这门语言编写出来的

  • HTML(HyperText Markup Language):超文本标记语言


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


  • HTML 运行在浏览器上,HTML 标签由浏览器来解析

  • HTML 标签都是预定义好的。例如:使用<img>展示图片

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

  • 结构:HTML 表现:CSS 行为:JavaScript

一.HTML

1.快速入门

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


<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


<!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 概念:选择器是选取需设置样式的元素(标签)


div{  color:red;}
复制代码


2.2 分类


2.2.1 元素选择器


元素名称{color:red;} div{color:red;}
复制代码


2.2.2id 选择器


#id属性值{color:red;}
#name{color:red;)<div id="name">hello css2</div>
复制代码


2.2.3 类选择器


.class属性值{color:red;}
.cls{color:red;}<div class="cls">hello css3</div>
复制代码


发布于: 刚刚阅读数: 3
用户头像

浅辄

关注

大丈夫生于天地之间,岂能郁郁久居人之下 2022-11-08 加入

阿里云技术博主认证

评论

发布
暂无评论
Java Web(三)HTML和CSS_Java web_浅辄_InfoQ写作社区