Javaweb：HTML、CSS

server/2024/12/19 0:23:12/

学习资源1

学习资源 2

黑马javaweb

HTML

1、基础标签、样式

图片标签：<img>

src:绝对路径、相对路径(绝对磁盘路径，网络路径；./当前目录）
width:宽度（百分比）
height:高度（百分比）

标题标签：<h1>--<h6>

水平线标签：<hr>

<!DOCTYPE html>:文档类型为html

<title>标题</title>

<span>:无语义标签

超链接：<a> </a>

href:url路径
target:何处打开（_self当前页面，_blank空白页面）

视频<video>:

src:url路径
controls：播放控件
width：宽度
height: 高度

音频<audio>:

src:url路径
controls:播放控件

段落：<p>

文本加粗：<b>

换行：<br>

<div>:无语义

一行一个，宽度父元素宽度，高度看内容。

表格<table>：

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

表格的行<tr>

表格的单元格<td>

表头单元格<th> （有加粗居中效果）

表单标签<form>

action:提交的url地址，默认当前页面
method:提交方式如get,post
表单项必须有name属性

表单项标签：

<input>

type:

<select>

<textarea>

CSS

1、引入方式

行内样式：写在标签的style属性中(style="color:red;")
内嵌样式：写在style标签中(<style>h1{}...</style>)
外联样式：写在单独的.css文件中，需要link（<link rel='stylesheet' href='路径'>)

color：

color:red;
color:rgb(255,0,0);
color:#ff0000;

2、选择器

元素选择器（h1{})
id选择器(#id名字{})
类选择器(.class名字{})
优先级：id>类>元素

3、段落属性

p

{text-indent:35px;首行缩进

line-height:40px;行高

text-align:right;对齐方式

}

4、页面布局

盒子模型：

内容区域：content
内边距区域：padding
边框区域：border
外边距区域：margin(不属于盒子

<div>属性：

width:200px;

height:200px;

box-sizing:border-box;//指定前面参数为盒子大小

padding：20px 20px 20px 20px;//上右下左

border:10px solid red //边框，线条类型，颜色

margin:30px //都一样

5、input属性

type:

text 输入字段
password 密码形式用*
radio 单选按钮
checkbox 复选按钮
file 文件上传按钮
data/time/datetime-local 日期/时间/日期时间
number 数字输入框
email 邮件输入框
hidden 隐藏域
submit/reset/button 提交/重置/可点击按钮