黑马程序员2023新版JavaWeb开发教程，实现javaweb企业开发全流程（
Java第31期, DAY01, P1-P13
学习笔记：
1.开发模式：前后端分离和混合两种开发模式，现在主流是前后端分离:
2.前端代码通过浏览器解析和渲染形成用户看到的网页
3.Web标准: HTML负责网页的结构, CSS负责网页的表现, JS负责网页的行为
4.HTML(HyperText Markup Language)：超文本标记语言
HTML不是一种编程语言, 而是一种标记语言
HTML是大小写不敏感语言, 属性值单双引号都可以, HTML语法松散, 不严格
HTML中无论几个空格都只会显示一个空格, 可使用空格占位符 
HTML文档也叫做web页面
超文本：超越了文本的限制，比普通语言更强大。除了文字信息还可以定义图片，音频，视频等内容。
标记语言：由标签构成的语言
5.CSS(Cascading Style Sheet)：层叠样式表，用于控制页面的样式(表现)
6.HTML标签(元素):
HTML标签是由尖括号包围的关键词, 比如 <html>
HTML标签通常是成对出现的, 比如 <b> 和 </b>
标签对中的第一个标签是开始标签, 第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
7.HTML基本结构:
8.基本标签:
<h1>-<h6>: 标题(从大到小)
<hr>: 分隔
<!--xxx-->: 注释
<p>: 段落
<b>: 加粗
<strong>: 强调, 类似加粗
<br>: 换行
<span>: 没有任何语义的布局标签
9.媒体标签:
通用属性:
src: 媒体的url
controls: 视频或音频是否显示播放控件
<img>: 图片
<video>: 视频
<audio>: 音频
10.一些通用属性:
width: 宽度
height: 高度
color: 颜色
11.文本属性:
font-size: 文本大小(后面需要加px)
text-decoration: 规定添加到文本的修饰, none表示定义标准的文本
color: 定义文本的颜色
line-height: 行高
text-indent: 段落首行缩进
text-align: 文本的水平对其方式
12.CSS引入方式:
行内样式(不推荐):<h1 style="color: red;"/>
内嵌样式:
<head>
<style>
h1{
color: red;
}
</style>
</head>
外联样式:
xxx.css:
h1{
color: red;
}
xxx.html:
<head>
<link rel="stylesheet" href="xxx.css">
</head>
13.颜色表示:
关键字: red, green...
RGB表示法: rgb(255,255,255)
HEX表示法: #FFFFFF, 若R,G,B的两位均相同可简写如#FFCCBB简写#FCB
14.CSS选择器:
元素选择器(标签选择器):
元素名称{
color: red;
}
使用: <元素名称>
ID选择器(每个标签ID唯一, 不可重复):
#ID属性值{
color: red;
}
使用: <任意元素 id="ID属性值">
类选择器:
.class属性值{
color: red;
}
使用: <任意元素 class="class属性值">
优先级: ID选择器 > 类选择器 > 元素选择器
15.<a>: 超链接
href: 指定访问的url
target: 指定何处打开
_self(默认): 在当前页面打开
_blank: 在新标签页打开
16.<div>: 没有语义的布局标签
box-sizing: border-box(指定width和height为盒子的大小)
background-color: 背景色
padding: 内边距(上右下左, 如果四个边距一样可以简写成一个)
border: 边框大小 线条类型(如solid实线) 颜色;
margin: 外边距(写法和内边距一样)
如果只设置一个方向的边距/内边距/外边距, 可以在属性后加-方向(top, left, right, bottom)
如: padding-top, margin-right
17.CSS盒子组成:内容(content), 内边距(padding), 边框(border), 外边距(margin)
18.<table>: 一个表格整体, 可以包含多个<tr>, 属性:
border: 边框宽度
width: 表格宽度
cellspacing: 单元之间的空间
子标签:
<tr>: 表格中的行, 可以包含多个<td>
<td>: 单元格, 如果是表头单元格, 可以替换为<th>(加粗+居中)
19.<from>: 一个表单整体, 可以包含多个<input>:
action: 表单提交的url, 默认提交到当前页面
method: 提交方式(get, post)
get(默认): url?属性1=值1&属性2=值2, 大小有限制
post: 在消息体(请求体)中传递, 大小无限制
表单项必须有name属性才可提交
20.表单项:
name: 属性名
value: 属性值
<input>: 表单项
type: 输入形式, 可填:
text(默认): 单行文本输入框
password: 密码输入框
radio: 单选框(多个单选框name需相同)
checkbox: 复选框
file: 文件上传按钮
date: 日期选择
time: 时间选择
datetime-local: 日期时间选择
number: 数字输入框
email: 邮箱输入框
hidden: 隐藏域
button: 按钮
submit: 提交按钮
reset: 重置按钮
<select>: 下拉列表
<option>: 列表项
<textarea>: 文本域
cols: 一行最多输入字符数
rows: 行数
学习心得：通过今天的学习, 学会了HTML的基础标签, CSS的基础属性, 能够制作一个简单的页面
