HTML详解
注释
代码语言:javascript复制<!-- html注释 -->
/* css 注释 */
// 单行注释
/* 多行注释*/
h1 标签啊每个页面只能使用一次 用来放网页的logo
代码语言:javascript复制<!-- html标签都是自身携带 语义:普通语义 和 强调语义:搜索引擎会优先抓取 -->
<b>加粗</b>
<i>倾斜</i>
<u>下划线</u>
<s>删除线</s>
<strong>加粗</strong>
<em>em</em>
<ins>ins</ins>
<del>del</del>
列表
有序列表(ol)
无序列表(ul)
自定义列表(dl dt)
代码语言:javascript复制<ol>
<li></li>
<li></li>
</ol>
<ul>
<li></li>
<li></li>
</ul>
<dl>
<dt></dt>
<dt></dt>
</dl>
表格
表单
- type
表单属性
代码语言:javascript复制-type = 'text' 文本框
- type = 'password' 密码框
- type = 'radio' 单选框
- type = 'checkBox' 复选框
- type = 'file' 上传文件
- type = 'submit' 提交按钮
- type = 'reset' 重置按钮
- type = 'button' 按钮 等同于
button/button
- value 表单元素的值
- name 表单元素的名称,提交数据的键名 textarea /两个属性/ /* 禁止拖拽 */ resize: none; /* 去掉焦点框 */ outline: none;
盒子模型
代码语言:javascript复制/* 加padding能撑大盒子 -- 盒子尺寸计算公式: border padding width/height */
/* css3.0新增的功能 -- 启动盒子内减模式 */
box-sizing: border-box;
盒子模型属性
margin 同样适用
/* padding: 10px 20px 40px 80px; 含义:上 右 下 左 */
/* padding: 10px 40px 80px; 含义: 上 左右 下 */
/* padding: 10px 80px; 含义: 上下 左右 */
文字居中
行高: 文字垂直居中:设置行高属性的值等于高度属性值
div 垂直居中
代码语言:javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 500px;
height: 300px;
background: #ccc;
/* margin:auto; */
position: absolute;
left: 50%;
margin-left: -250px;
top: 50%;
margin-top: -150px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
/*加粗*/
font-weight:bold;
/* 倾斜*/
font-style:italic
/*文字修饰线*/
text-decoration: underline;
/* 首行缩进*/
text-indent:2em;