1、基础知识
W3school HTML辅助学习官网
结构:
<meta charset="utf-8"/>
<head>
样式设置
(1)css引入
(2)js引入
(3)其它
</head>
<body>
定义展示到页面主体的标签
</body>
元素=标签+属性修饰+文本
插件推荐:vscode中 Live Server 实时加载的小服务器
换行:
br:直接换行
hr:带分割线的换行
<div> 块 <span> 层
图片标签:
<img src="路径" title="鼠标悬停时提示的文字" alt="图片加载失败的时提示文字" />
表格标签:
tr:一行 td:行内的一格 th:自带加粗居中效果的td
表格合并效果:
<td rowspan="3"></> 表示横跨3行
<td colspan="3"></> 表示纵跨3列
表单标签 form:
action 定义数据的提交地址,(1)URL(2)相对地址(3)绝对地址
method 提交方式 (1)get(2)post
表单项标签:
input:type 输入信息的表单项类型,有text、password、submit、reset
表单项标签一定要定义name属性,该属性用于明确提交时的参数名,还需要定义value属性,用于明确提交时的实参。
get与post的区别:
get:
参数会以键值对的形式加在url后面 url?key=value&key=value......
信息直接放在url中不安全
url有长度限制
地址中只能是字符不能是文件
post:
数据是通过请求体单独打包发送
请求体中数据可以是字符也可以是字节
单选框:
<input type="radio" name="xxx" value="yyy">文字
设置不同的value来区分不同的选项
多个单选框使用同一个name会产生冲突效果,多选框 type="checkbox" 且设置相同的name后不会冲突,设置不同的value来区分不同的选项
多选框:
<input type="checkbox" name="xxx" value="yyy">文字
默认设置checked="true"
hidden隐藏域
readonly 只读 会提交给后台
disable 不可用 不会提交后台
多行文本框 textarea:
文本框无value属性
<textarea> </textarea>
下拉框 select:
option 定义选项 默认选项 selected
<select>
<option> </option>
</select>
默认选项:
<optional value=" " selected> </optional>
file 文件上传框
页面布局:
<div> </div> 块元素 独占一行 宽高的css设置有效
<span> </span> 行内元素 不独占一行 宽高的css设置无效
span可以帮助单独设置整体中某一部分的css样式
2、CSS
方式一:行内式
通过元素的style属性引入样式
语法:style="样式名:样式值;样式名:样式值"
方式二:内嵌式
通过在head标签中的style标签定义本页面的公共样式,通过**选择器**作用到相应的对象。
(1)元素选择器
语法:
input{
}作用于input标签的样式
方式三:外部样式表
将css代码单独放到一个.css文件中,那个html需要这些代码就在其head中通过link属性引入。
<link href="路径" rel="css文件名">
(2)id选择器
根据标签的id值确定样式的作用范围,一般每个元素都有一个id属性,在一个页面中id具有唯一性
语法:
#id值{ }
(3)class选择器
根据元素的class属性值确定样式的作用范围,元素的class值可以重复并且一个元素的class属性可以有多个值。
语法:
.class值{ }
<input id="xxx" class="值1 值2 值3 ......" type=" " value=" ">
3、CSS浮动
将div中display默认类型block改为inline,但是会失去块中宽高属性值的设置
div1
div2 div1 div2
float:
相对于上级父块的左右浮动:left、right
相对于浏览器窗口的浮动:fixed
相对于元素原本位置浮动:relative
4、CSS定位
position static默认 absolute 绝对
bottom
left/right
top
5、CSS盒子模型
border:边线
padding:内边距
margin:外边距
margin-left:左外边距
margin-right:右外边距
padding/margin设置:
如果指定一个值:上右下左
两个值:x1(上下)x2(左右)
四个值:x1(上)x2(右)x3(下)x4(左)