三、HTML+CSS_html+ccs-CSDN博客

本文链接：https://blog.csdn.net/qq_39083770/article/details/109838950

HTML前言

视图层View：展示信息，收集信息
- 相关技术：HTML、CSS、Bootstrap、JavaScript、jQuery、EasyUI
HTML：Hypertext Markup Language ，超文本标记语言
- 运行机制：解释型的语言（逐行翻译，运行效率相对较低，可以跨平台）
- 用于制作静态网页，展示并收集信息
  - 静态网页：网页内容固定不变
  - 动态网页：Servlet、JSP —> 网页内容自动更新、因人因时而异
  - html由浏览器运行，浏览器自带解释器

HTML

html代码文件扩展名： .html 或 .htm

语法结构

<!DOCTYPE html>
<html>
  <head>  	<!--网页的头部-->
    <title>定义整个网页的标题，在网页的标题栏中显示</title>
    <!--空标签，用于定义网页的附加信息，如编码、定时刷新-->
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/> 	
  </head>
  <body bgcolor="网页背景色" text="字体颜色">
    网页的内容
  </body>
</html>

标签

head部分

meta：空标签，用于定义网页的附加信息，如编码、定时刷新

<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="refresh" content="5;http://www.baidu.com" />

body部分：定义的内容在网页中显示

bgcolor：背景色 text：前景色

<body bgcolor="背景色" text="前景色">
  通过颜色的名称：red blue等
  通过RGB：#RRGGBB 简写#RGB代表对应颜色的数值两位是相同的
</body>

文本

<h1></h1> <h2></h2>知道h6，值越小，标题越大
常见属性：align位置，取值为center、right、left默认

换行和新段落：
<br />换行
<p>
	新段落
</p>
&nbsp;：空格
&copy;：版权

水平分割线：
<hr wigth="" align="" size="" color=""/>
宽 对齐方式 长 颜色

字体：
<font color="" size="" face="">对谁做设置</font>
颜色 尺寸，从1～7，7最大 字体类型，默认宋体

图片

<img src="图片的路径及图片名" width="宽" height="高" align="对齐方式"/>
align图片相对其后的内容的对其方式：middle | left | right | top | bottom

超链接

<a href="目标资源的路径" target="目标资源显示的位置">文字或图片</a>
target： _self默认    在当前窗口打开 
				_blank       在新窗口打开

表格

<table border="边框粗细" cellspanding="边框间距" bgcolor="" background ="" align="" width="" height="">
 边框线的粗细 内部边框与外边框距离 表格背景颜色 表格背景图片 表格显示在网页横向位置 相对屏幕的百分比 高度（数值px）
  <tr align=""> 表格字体相对于表格的位置
    <td colspan="2"></td>
    <tb rowspan="2"></tb>
  </tr>
  <tr>
  	<td></td>
    <td></td>
  </tr>
</table>

td标签：	rowspan：跨行合并
				colspan：跨列合并

表单：

提供人机交互界面
通过网页收集用户数据信息，并将用户信息发送到server（服务端）

<form>
	表单元素  
</form>

单行文本：
	<input type="text" name="名称" value="默认数据/输入的数据" />
  readonly：只读，布尔类型，存在为true，反之false，即写在样式里面就是ture
  disabled：不可用，布尔类型，没有值，直接写在样式中即可
  hidden：隐藏，存在即为true
密码输入框：
	<input type="password" name="" value="" />
单选按钮：
	<input type="radio" name="" value="" />
	默认选中：checked="true | false"，也可以不给值，存在即为true
	一组单选按钮中的name要相同
	value做选择后的数据传输
多选按钮，复选框：
	<input type="checkbox" name="" value="" />
	同一个复选框，名称建议相同
	默认选中：checked
	value做选择后的数据传输
下拉列表：
	<select name="">
    <option value="">内容1</option>
    <option value="">内容2</option>
	</select>
	默认选中：selected
文本域：
	<textarea name="" rows="" cols="">默认值</textarea>
	没有value属性，标签内容为默认值部分
	cols：列数
	rows：行数
	readonly：只读
提交按钮
	<input type="submit" name="名称" value="提交" />
	提交表单
重置按钮
	<input type="reset" name="reset" value="重置" />
	清空表单中用户填写的数据，恢复初始状态
普通按钮
	<input type="button" name="名称" value="普通" />
	没有任何效果，可以在Javascript中自定义功能

 表单标签
	<form action="url" methed="" >
    url：uniform resource location 统一资源定位符，俗称网址
    action 属性为指定表单数据提交的资源网络路径，主要书写的是程序的网络路径，默						认提交给自己（当前页面）
    method 表单提交的当时，可取值get默认 / post
    	get：将提交的数据追加到浏览器的地址栏，以明文的方式在地址栏后面进行传递数据
    			数据不安全、不适合传输大量的数据、中文处理相对麻烦容易出现乱码
    	post：表单以数据包的形式打包成文件的方式传递数据、不会显示在地址栏中
    			数据安全、允许传输大量的数据、中文处理相对简单
     form表单不允许嵌套
	</form>

CSS —> cascade StyleSheet 级联样式表(层叠样式表)

CSS样式优先级高于HTML
定义在网页中，用于给网页提供更丰富的视觉效果，美化HTML
浏览器运行 —> CSS代码无法独立运行，必须伴随着HTML运行而运行
样式分类
- 行内样式：应用在一个网页中的一个标签的样式
- 行内样式style属性，优先级高于内嵌样式的方式
```
<标签 style="样式的规则；样式的规则2；">内容</ 标签>
```
- 内嵌样式：在同一网页中，多个页面元素定制相同的样式
```
<html>
  <head>
    <style type="text/css">
      选择器名称{
        样式属性名：值；
        样式属性名2：值；
      }
    </style>
  </head>
</html>
```
- 外部样式：定义统一站点内的多个网页，样式风格统一
  - 定义外部的样式表文件
  - 将公用的样式css代码定义在 . css文件中
  - 文件中不能包含html标签，只能有css相关语法
  - 需要在网页中引用外部文件
```
将外部样式文件引入到当前网页中
<head>
  <link rel="stylesheet" type="text/css" href="文件路径">
</head>
```

样式的规则

文字

font-family：字体
color：颜色
font-size：大小px
text-align：对齐方式
text-decoration：none 无下划线
text-decoration：underline 有下划线

边框相关

border：solid 2px粗细 red颜色
width：宽
height：高
border-color：颜色

背景相关

background-image:url(图片的路径)
背景平铺：
	background-repeat:no-repeat不平铺 | repeat | repeat-x横向平铺 | repeat-y纵向平铺
背景对齐位置：
	background-position:center
背景颜色：
	background-color:red
大小：
	background-size:100%

选择器分类

标签选择器：同一个网页中，相同的标签制定相同样式

<style type="text/css">
  标签名{
    样式规则
  }
</style>

class选择器：同一个网页中，相同、不同的标签制定相同的样式

<style type="text/css">
  .选择器名称{
    样式规则
  }
</style>
需要手动调用，直接利用选择器名字使用，一个标签可以使用多个class选择器，调用多个的话中间用空格隔开
<标签 class="选择器名字1 选择器名字2"></标签>

id选择器：在用一个网页中，多个相同或不同的标签制定相同的样式

<style type="text/css">
  #选择器名字{
    样式规则
  }
</style>
需要手动调用，直接利用选择器名字使用，一个标签只能使用一个id选择器
<标签 id="选择器名字"></标签>

伪类选择器：同一网页上的特定标签上产生特定的样式

<style type="text/css">
  标签名：动作名{
    样式属性名1:值1；
    样式属性名2:值2；
  }
</style>
定义之后自动使用
a:hover{  //设置鼠标指针样式
    cursor: wait;  鼠标放在超链接上变为等待状态 point样式为手
    font-size: 36px;  鼠标放上变大效果
    color:red;  鼠标放上时字体颜色
}
visited：已访问过的		
active:当前活动的
link：未访问过的

页面布局

span：
- 行级标签：标签自身不影响原始内容的风格，通常用于对行中的部分内容进行样式控制时使用

div：

块级层标签：层标签中的内容单独占一块空间，影响行中原有显示效果
浮框广告效果

left：x坐标
top：y坐标
z-index：z坐标
position：absolute绝对定位
width：宽
height：高
background-color：red	背景色
display：none | block块级显示 | inline行级显示   是否显示

盒子属性

边框:
	border：solid 1px red
外间距：
	margin | margin-top | margin-bottom | margin-left | margin-right
内间距，也称内补白：
	padding | padding-top | padding-bottom | padding-left | padding-right
流式布局
	float：left 浮动方式 从左到右
	float：right