Html 基础

一、结构标签

<em>斜体</em> -> 字体格式

<i>斜体</i> -> 字体格式

<strong>粗体</strong> -> 字体格式

<b>粗体</b> -> 字体格式

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

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

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

<br/> -> 换行符 &nbsp; -> 空格 <hr/> -> 水平横线

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

<code>code</code> -> 修饰单行编程代码

<pre>code</pre> -> 修饰多行编程代码

<div>盒子</div> -> 页面排版

<table summary="表格简介">
  <caption>摘要</caption> -> 表格摘要
  caption-side:top|bottom -> 控制显示位置
  <tr>
    <th>标题</th> ->表格第一行
    title属性:鼠标悬浮提示的文本
  </tr>
  <tr>
    <td>内容</td> -> 表格第二行至结束
    title属性:鼠标悬浮提示的文本
   </tr>
</table>

<dl> -> 目录结构
  <dt>列表标题</dt>
  <dl>列表内容</dl>
</dl>

<a href="链接地址" title="鼠标停留显示的文本" target="_blank">a</a>

<a href="mailto:wjx@qq.com">email</a> -> 发邮件

<img src="图片地址" alt="图片加载失败显示的文本" title = "鼠标停留显示的文本">

问题:当表单只含一个input时,按enter会提交表单,含多个input时,不会提交表单
解决:终止表单提交(onsubmit="return false")
<form method="提交方式" action="提交地址">若多个标签</form>

问题:文本框的光标没有在左上角的位置
解决:标签体间不能有空格
<textarea rows="行数" cols="列数">多行文本框</textarea>

<label for="标签id"></label> -> FOR属性绑定关联元素,常与单/复选框联用
<input type="radio" checked="true" name="name" /> -> 单选框
<input type="checkbox" checked="true" name="name" /> -> 复选框
<input type="submit">提交</input> -> 表单提交按钮
<input type="reset">重置</input> -> 表单重置按钮
<input placeholder='提示' required='required' /> -> 输入框内容不能为空
属性:autocomplete="on|off" -> 是否缓存输入记录

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

HTML页面容器,将页面显示在框内(window.frames[index])
<iframe src="/hello.html" height="300px" width="300px" 
name="iframe" scrolling="yes|auto|no" frameborder="1|0">
</iframe>

二、浏览器样式

滚动条属性设置
::-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;}

三、自定义属性

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

四、组合设置

1、不换行,溢出隐藏,溢出内容显示...
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%, -> 方式二
}