Java-web-CSDN博客

本文链接：https://blog.csdn.net/Eisenis/article/details/132611614

HTML&CSS

1.什么是HTML?

全称是超文本标记语言---->HyperText Markup Languuage

分析全称不难看出,这是一门比普通文本语言功能更强,可以定义图片,音视频,通过标签由浏览器解析运行的语言.

2.什么是CSS?

全称是层叠样式表---->Cascading Style sheet

用来控制页面的样式

HTML的基本语法

标签	作用
img	图片标签
<h1-h6>	标题标签
<hr>	水平分页标签

CSS的基本语法

1.怎么在HTML中引入CSS: 有三种引入方式,如下:

名称	语法描述	实例
行内样式	在标签内使用style属性,属性值是CSS的键值对	<h1style="xxx">中国</h1>
内嵌样式	定义<style>标签,在标签内定义CSS样式	<style>h1{....}</style>
外联样式	定义在<link>标签,通过href属性引入	<link rel = "styleheet"href = "css/news.css">

2.什么时候用什么方式引入CSS方法

1.内联样式会出现大量的重复代码,且后期维护复杂,所以少用

2.内部样式,通过定义CSS选择器,让样式作用于当前页面的指定标签是=上

3.外部样式.HTML和CSS实现完全分离,企业开发用的最多的方式

3.颜色表示

在前段开发中,最常见的有三种,分别是关键字,RGB表示法,十六进制表示法等

4.CSS选择器

1.什么是CSS的选择器?

就是我们选取需要设置样式的元素(标签),由于可选的标签太多,暂时只总结三种:

元素(标签)选择器:

-->选择器的名字必须是标签的名字

-->作用就是选择器中的样式会同等作用于同名标签上

div{
color:red
}

Id选择器

-->选择器的名字前需要加上#

-->作用:选择器的样式只作用于这个指定的Id上,而且是有且仅有这个标签(因为id是唯一的)

#id属性值{
color:blue
}

类选择器

-->选择器前必须加 .(一个点)

-->作用就是他会将选择器中的样式作用于这个类中所有的属性值和该名字一样的类上,可以是多个.

5.超链接

1.在代码中怎么实现?

通过标签<a href="..."target="...">央视网</a>

属性:

href:指定资源访问的URL

target:指定在何处打开资源链接

_self:默认值,在当前页面打开

_blank:在空白页面打开

属性:	作用
src:	规定视频的URL
controls:	显示播放控件
width:	播放器的宽度
height:	播放器的高度

属性:	作用
src	规定音频的URL
controls	显示播放控件

效果	标签	标签(强调)
加粗	b	strong
倾斜	i	em
下划线	u	ins
删除线	s	del

盒子模型

1.盒子是啥?

为了方便我们操作而设计的一个矩形,里面包含页面中的所有元素

2.盒子模型的组成

content:内容区域

padding:内边距区域

border:边框区域

margin:外边距区域

布局标签

我们在开发中常用的两个,因为这两个标签都没有含义所有方便布局

1.<div></div>

特点:一行只能显示一个,宽和高的都是默认但可以通过width和height设置

2.<span></span>

特点:可以一行显示多个内容,宽高默认,不能自己设置

表格标签

1.表格标签是什么?有何用?

就是网页中的表格,由行和列组成,常用来统计数据

2.表格标签用到的标签

1.<table>:定义整个表格,里面可以包含多个<tr>,

常用属性有:

border:规定表格边框的宽度

width:规定表格的宽度

cellspacing:规定单元之间的空间

<tr>:表格的行,可以包裹多个<td>

<td>:普通的表格单元格,可以包裹内容,如果表头单元格,可以替换为<th>

表单标签-----<重点涉及到后端用>

1.什么是表单?

就是我们平时在网页上看到的登录页面,注册页面这类页面.

2.怎么用?

表单标签<form>></form>

表单属性:

1.action:规定提交和发送表单数据的URL(网址)

2.method:规定发送表单数据的方式有两种GET和POST

GET:表单数据是

xxxxxxxx?username=Tom&age=12,url中携带的数据大小有限制

POST:表单数据是在请求体中携带的,没有大小限制

3.表单项

虽然表单项的形式各种各样,但是表单项的标签就三个

<input>:表单项,通过type属性控制输入的形式.

TYPE取值	描述
text	默认值，定义单行的输入字段
password	定义密码字段
radio	定义单选按钮
checkbox	定义复选框
file	定义文件上传按钮
date/time/datetime-local	定义日期/时间/日期时间
number	定义数字输入框
email	定义邮件输入框
hidden	定义隐藏域
submit / reset / button	定义提交按钮 / 重置按钮 / 可点击按钮