HTML、CSS --javaweb学习笔记

记录一些重要的知识点

CSS引入方式

• 行内样式：<h1 style="...">
• 内嵌样式：<style>…</style>
• 外联样式：xxx.css <link href="...">

颜色表示

• 关键字：red、green.......
• rgb表示法：rgb(255,0,0)、rgb(134,100,89)
• 十六进制：#ff0008、#cccccc、#ccc

CSS选择器:用来选取需要设置样式的元素(标签)

<span>标签

• <span>是一个在开发网页时大量会用到的没有语义的布局标签
• 特点:一行可以显示多个(组合行内元素)，宽度和高度默认由内容撑开

路径

• 绝对路径:绝对磁盘路径(D:/xxxx)、绝对网络路径(https://xxxx)
• 相对路径:从当前文件开始查找。(./:当前目录，../:上级目录)

超链接标签:<a>

属性:

• href:指定资源访问的url
• target:指定在何处打开资源链接
• self:默认值，在当前页面打开
• blank:在空白页面打开

text-decoration:规定添加到文本的修饰，none表示定义标准的文本（去除超链接下划线）

视频标签:<video>

• src:规定视频的url
• controls:显示播放控件
• width:播放器的宽度
• height:播放器的高度

<br> 换行
<hr>水平线
<p>...</p>  段落标签
<strong>、<b>   加粗
&nbsp;  空格占位符
line-height:设置行高
text-indent:定义第一个行内容的缩进
text-align:规定元素中的文本的水平对齐方式
 

div

• 盒子:页面中所有的元素(标签)，都可以看做是一个 盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
• 盒子模型组成:内容区域(content)、内边距区域(padding)、:边框区域(border)、外边距区域(margin)

布局标签:实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签
标签:<div><span>
特点:

div标签:

• 一行只显示一个(独占一行)
• 宽度默认是父元素的宽度，高度默认由内容撑开
• 可以设置宽高(width、height)

span标签:

• 一行可以显示多个
• 宽度和高度默认由内容撑开
• 不可以设置宽高(width、height)

CSS属性：

• width:设置宽度
• height:设置高度
• border:设置边框的属性，如:1pxsolid #080;
• padding:内边距
• margin:外边距  （上右下左）
  

注意:如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上-位置，如:padding -top、padding -left、padding -right

表格标签

场景:在网页中以表格(行、列)形式整齐展示数据，如:班级表

<table>：定义表格
<tr>：定义表格中的行，一个<tr>表示一行
<th>：表示表头单元格，具有加粗居中效果
<td>：表示普通单元格

表单标签

场景:在网页中主要负责数据采集功能，如 注册、登录等数据采集
标签:<form>

表单项:不同类型的input 元素、下拉列表、文本域等

• <input>:定义表单项，通过type属性控制输入形式
• <select>:定义下拉列表
• <textarea>:定义文本域

属性:

• action:规定当提交表单时向何处发送表单数据，URL
• method:规定用于发送表单数据的方式。GET、POST
  get:表单数据拼接在url后面，?username=java,大小有限制
  post:表单数据在请求体中携带，大小没有限制

表单项

• <input>:表单项，通过type属性控制输入形式
• <select>:定义下拉列表，<option>定义列表项。
• <textarea>:文本域