html----常见的标签

手册：https://www.w3school.com.cn/html5/index.asp

HTML标签：

<strike>为文字加上一条中线</strike>

<em>: 文字变成斜体.</em>

2<sup>2</sup>                  #

_2²

log<sub>2<sup>2</sup></sub>    #log22

<br>:换行.

<hr>:水平线

&lt; &gt；&quot；&copy;&reg;   特殊字符

块级标签：就是独占一行，可以自行设置宽高！如：先学到的 div,p,h1-h6，ul li dl dt dd

内联标签：按内容占位，高度和广度是由自己的内容填充的 如： a,br,img

判断块级标签和内联标签的方法：

　　1.是否独占一行（可以通过设置背景颜色去判断）

　　2.是否可以单独为元素设置高度和宽度。

display:inline(行内)                 强制变成行类元素(可以在一行，不可以设置宽高)
display:block(块级)                  强制变成块级元素，独占一行
display:inline-block(行类块)         可以在一行，又可以给每一个设置不同宽高   img  input  textarea(自带行类块)

1. 块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
2. 有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
3. li内可以包含div
4. 块级元素与块级元素并列、内联元素与内联元素并列。

标签嵌套问题

p标签嵌套div标签
<p  style="background-color: blue;width: 100px">
　　p标签
　　<div style="background-color: rgba(255,46,51,0.4);width: 200px;height: 200px">
        div标签
    </div>
</p>
此时浏览器会解释成

<p  style="width: 100px"> p标签 </p>

　　<div style="width: 200px;height: 200px">
        div标签
    </div>
<p></p>   #多出一个p标签，并且之前的 p标签 和 div 标签分离

a标签嵌套div标签

问题不是很明显，唯一就是div标签不可以将a标签撑起(如果给a设置背景颜色，就只是a标签自己本身，给a标签设置display:block;,此时a标签的背景颜色就可以完全罩住div标签了)，
但是div标签还是a标签的子标签，可以继承a标签的一些属性(如颜色)，

img标签

src: 要显示图片的路径.

alt: 图片没有加载成功时的提示.

title: 鼠标悬浮时的提示信息.

width: 图片的宽

height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

a标签

绝对 URL - 指向另一个站点（比如 href="http://www.jd.com）
相对 URL - 指当前站点中确切的路径（href="index.htm"）
锚 URL - 指向页面中的锚（href="#top"）
<a href="javascript:;" id="showBindEmailModal">去绑定</a>

列表标签

<ul>: 无序列表 [type属性：disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]
　　　　<ul>
　　　　　　<li></li>
　　　　</ul>
<ol>: 有序列表
         <li>:列表中的每一项.
<dl>  定义列表
<dt> 列表标题</dt>
   <dd> 列表项</dd>
<dt>列表标题</dt>
　　<dd> 列表项</dd>
</dl>

表格标签

<table border="">
         <tr>
                <th>标题</th>
                <th>标题</th>
         </tr>

         <tr>
                <td>内容</td>
                <td>内容</td>
         </tr>
</table>

<tr>: 表行
<th>: 表头
<td>:表数据

属性:
    border: 表格边框.
    cellpadding: 内边距   汉字和内边框的距离
    cellspacing: 外边距.　外边框和内边框之间的距离
    width: 像素 百分比.（最好通过css来设置长宽）
    rowspan:  单元格竖跨多少行
    colspan:  单元格横跨多少列（即合并单元格）　　 
　　 bgcolor：表格的背景颜色
　　 background：表格的背景图片
　　 style="text-align: center"    文字居中　

表单元素

type:        text 文本输入框

             password 密码输入框

             radio 单选框

             checkbox 多选框  

             submit 提交按钮            

             button 按钮(需要配合js使用.) button和submit的区别？

             file 提交文件：form表单需要加上属性enctype="multipart/form-data" 

value:    表单提交项的值.对于不同的输入类型，value 属性的用法也不同：

                type="button", "reset", "submit" - 定义按钮上的显示的文本

                type="text", "password", "hidden" - 定义输入字段的初始值

                type="checkbox", "radio", "image" - 定义与输入相关联的值

checked:  radio 和 checkbox 默认被选中

readonly: 只读. text 和 password

disabled: 对所用input都好使.

select标签

 <select>
     <optgroup label="汽车"></optgroup>      #为每一项加上分组
     <option value="">宝马</option>
     <option value="">奔驰</option>
 </select>

<textarea> 多行文本框

<form id="form1" name="form1" method="post" action="">
        <textarea rows="" cols="">
        在w3school，你可以找到你所需要的所有的网站建设教程。
        </textarea>
</form>

属性：
　　cols：规定文本区内可见的列数   cols=20 一行10字
　　rows：规定文本区内可见的行数。 
　　required ：定义为了提交该表单，该 textarea 的值是否是必需的。
　　

<label>标签

1 label 元素不会向用户呈现任何特殊效果。
2 <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

<form method="post" action="">
        <label for=“username”>用户名</label>     #点击用户名，光标会自动进入 input 框中
        <input type=“text” name=“username” id=“username” size=“20” />
</form>

<fieldset>标签

标签的拼接

<img th:src="'/website'+${file.image}"/>