0
点赞
收藏
分享

微信扫一扫

Java Web(三)HTML 和 CSS

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.列表标签

有序列表

Java Web(三)HTML 和 CSS_HTML

无序列表

Java Web(三)HTML 和 CSS_CSS_02

type:设置项目符号

6.表格标签
  • table:定义表格

border:规定表格边框的宽度width:规定表格的宽度cellspacing:规定单元格之间的空白

  • tr:定义行

align:定义表格行的内容对齐方式

  • td:定义单元格

rowspan:规定单元格可横跨的行数

colspan:规定单元格可横跨的列数

7.表格标签
8.表单标签
  • 表单:在网页中主要负责数据采集功能,使用<fom>标签定义表单
  • 表单项(元素):不同类型的input元素、下拉列表、文本域等
  • form:定义表单

action:规定当提交表单时向何处发送表单数据,ULmethod:规定用于发送表单数据的方式

  • get:浏览器会将数据直接附在表单的action URL之后。大小有限制
  • post:浏览器会将数据放到http请求消息体中。大小无限制
9.表单项标签

Java Web(三)HTML 和 CSS_HTML_03

Java Web(三)HTML 和 CSS_CSS_04

二.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>

举报

相关推荐

0 条评论