Html 基础

一、结构标签

斜体 -> 字体格式

斜体 -> 字体格式

粗体 -> 字体格式

粗体 -> 字体格式

span -> 没有明确语义,与CSS联用

短文本引用 -> 引用的意思等同“...”间的内容

长文本引用
 -> 长和短之分在于多行和单行


 -> 换行符   -> 空格 
 -> 水平横线

地址|签名
 -> 用来修饰特定关键词

code -> 修饰单行编程代码

code
 -> 修饰多行编程代码

盒子
 -> 页面排版

 -> 表格摘要
  caption-side:top|bottom -> 控制显示位置
   ->表格第一行
    title属性:鼠标悬浮提示的文本
   -> 表格第二行至结束
    title属性:鼠标悬浮提示的文本
   

  
摘要

    
标题
  

    
内容


 -> 目录结构
  
列表标题
  
列表内容


a

email -> 发邮件



问题:当表单只含一个input时,按enter会提交表单,含多个input时,不会提交表单
解决:终止表单提交(onsubmit="return false")
若多个标签

问题:文本框的光标没有在左上角的位置
解决:标签体间不能有空格
多行文本框

 -> FOR属性绑定关联元素,常与单/复选框联用
 -> 单选框
 -> 复选框
提交 -> 表单提交按钮
重置 -> 表单重置按钮
 -> 输入框内容不能为空
属性:autocomplete="on|off" -> 是否缓存输入记录

 -> 下拉框，可设置多选
  前端显示的值 -> 单个选项
  $("#select").find("option:selected").val(); -> 获取下拉框选中的值


HTML页面容器,将页面显示在框内(window.frames[index])

二、浏览器样式

滚动条属性设置
::-webkit-scrollbar{width:5px;}
滚动条未出现
::-webkit-scrollbar-track{background-color:gray;}
滚动条已出现
::-webkit-scrollbar-thumb{background-color:blue;}
鼠标悬浮滚动条
::-webkit-scrollbar-thumb:hover{background-color:green}
鼠标拖拽滚动条
::-webkit-scrollbar-thumb:active{background-color:blue;}

body{
  min-width: 1000px;   -> 解决页面滚动条无法滑动到最右侧
  min-height: 1000px; -> 解决页面滚动条无法滑动到最底部
}

三、自定义属性

语法:data-*,获取自定义属性时忽略data-,*为自定义的属性名
 -> 自定义一个name的属性
javascript:element.dataset.name; -> 获取自定义属性的值
jquery:$element.data("name"); ->  获取自定义属性的值
TIP:data-user-role; -> 驼峰式(userRole)

四、组合设置

1、不换行,溢出隐藏,溢出内容显示...
table th, 
table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 30px; -> 防止不换行内容撑开超出屏幕范围
}

2、表格标题固定,内容滚动
table tr{
    display: table;
    width: 100%;
    table-layout: fixed;
}
table tbody{
    display: block;
    overflow: auto;
    height: 300px;
}

3、水平居中
div{
  display: inline|inline-block; -> 行内元素
  text-align: center;
}

div{ 
  display: block; -> 块状元素
  margin: 0 auto;
}

div[class='parent']{ -> 父元素
  display: flex;
  flex-direction: column;
}
div[class='child']{ -> 子元素水平居中
  align-self: center;
}

div[class='parent']{ -> 父元素
  display: flex;
}
div[class='child']{ -> 子元素水平居中
  margin: auto;
}

div{
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

4、垂直居中(设置所有祖先元素的高度[默认为0])
html,body{ -> 父元素
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
div{ -> 子元素垂直居中
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

div[class='parent']{ -> 当前元素的子元素垂直居中
  display: inline-block;
  vertical-align: middle;
}

div[class='parent']{ -> 父元素
  display: flex;
}
div[class='child']{ -> 子元素垂直居中
  align-self: center;
}

div[class='parent']{ -> 父元素
  display: table;
}
div[class='child']{ -> 子元素垂直居中
  display: table-cell;
  vertical-align: middle;
}

div[class='parent']{ -> 父元素
  height: 300px;
}
div[class='child']{ -> 子元素垂直居中
  line-height: 300px;
}

5、表格自适应填充
table{
  width:100%
}
th{
  min-width:5%, -> 方式一
  max-width:5%, -> 方式二
}