Java Web(三)HTML+CSS开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的13天，点击查

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的13天，点击查看活动详情

HTML和CSS

什么是HTML?

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

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

HTML运行在浏览器上，HTML标签由浏览器来解析
HTML标签都是预定义好的。例如：使用展示图片
W3C标准：网页主要由三部分组成

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

一.HTML

1.快速入门

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

<html>
    <head>
        <title></title>
    </head>
    <body>
        <font color = "red">乾坤未定,你我皆是黑马</font>
    </body>
</html>

2.基础标签

标签	描述
~	定义标题，h1最大，h6最小
	定义文本的字体、字体尺寸、字体颜色
	定义粗体文本
	定义斜体文本
	定义文本下划线
	定义文本居中
	定义段落
	定义折行
	定义水平线

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

转义字符

HTML原代码	现实结果	描述
&lt	<	小于号或显示标记
&gt	大于号或显示标记
&amp	&	可用于显示其它特殊字符
&quot	"	引号
&reg	®	已注册
&copy	©	版权
&trade	™	商标
&nbsp		不断行的空白

3.图片、音频、视频标签

标签	描述
	定义图片
	定义音频
	定义视频

img:定义图片

src:规定显示图像的URL(统一资源定位符)

height:定义图像的高度 width:定义图像的宽度
audio:定义音频。支持的音频格式：MP3、WAV、OGG

src:规定音频的URL controls:显示播放控件
video:定义视频。支持的音频格式：MP4,WebM、OGG

src:规定视频的URL controls:显示播放控件

4.超链接标签

标签	描述
	定义超链接，用于链接到另一个资源

href:指定访问资源的URL
target:指定打开资源的方式

_seIf:默认值，在当前页面打开 _blank:在空白页面打开

5.列表标签

标签	描述
	定义有序列表
	定义无序列表
	定义列表项

有序列表

无序列表

type:设置项目符号

6.表格标签

标签描述

定义表格

定义行
		定义单元格
		定义表头单元格

table:定义表格

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

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

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

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

7.表格标签

标签	描述
	定义HTML文档中的一个区域部分，经常与CSS一起使用，用来布局网页
	用于组合行内元素。

8.表单标签

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

action：规定当提交表单时向何处发送表单数据，UL method：规定用于发送表单数据的方式
- get:浏览器会将数据直接附在表单的action URL 之后。大小有限制
- post:浏览器会将数据放到http请求消息体中。大小无限制

标签	描述
	定义表单
	定义表单项，通过type属性控制输入形式
	为表单项定义标注
	定义下拉列表
	定义下拉列表的列表项
	定义文本域

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.内部样式：定义标签，在标签内部定义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>

Java Web(三)HTML+CSS