手册:https://www.w3school.com.cn/html5/index.asp
HTML标签:
<strike>为文字加上一条中线</strike>
<em>: 文字变成斜体.</em>
2<sup>2</sup> #22
log<sub>2<sup>2</sup></sub> #log22
<br>:换行.
<hr>:水平线
< >;";©® 特殊字符
块级标签:就是独占一行,可以自行设置宽高!如:先学到的 div,p,h1-h6,ul li dl dt dd
内联标签:按内容占位,高度和广度是由自己的内容填充的 如: a,br,img
判断块级标签和内联标签的方法:
1.是否独占一行(可以通过设置背景颜色去判断)
2.是否可以单独为元素设置高度和宽度。
display:inline(行内) 强制变成行类元素(可以在一行,不可以设置宽高) display:block(块级) 强制变成块级元素,独占一行 display:inline-block(行类块) 可以在一行,又可以给每一个设置不同宽高 img input textarea(自带行类块)
- 块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。
- 有几个特殊的块级元素只能包含内联元素,不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
- li内可以包含div
- 块级元素与块级元素并列、内联元素与内联元素并列。
标签嵌套问题
p标签嵌套div标签
<p style="background-color: blue; 100px">
p标签
<div style="background-color: rgba(255,46,51,0.4); 200px;height: 200px"> div标签 </div>
</p>
此时浏览器会解释成
<p style=" 100px"> p标签 </p>
<div style=" 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: 鼠标悬浮时的提示信息.
图片的宽
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="1"> <tr> <th>标题</th> <th>标题</th> </tr> <tr> <td>内容</td> <td>内容</td> </tr> </table>
<tr>: 表行 <th>: 表头 <td>:表数据
属性: border: 表格边框. cellpadding: 内边距 汉字和内边框的距离 cellspacing: 外边距. 外边框和内边框之间的距离 像素 百分比.(最好通过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="1">宝马</option> <option value="2">奔驰</option> </select>
<textarea> 多行文本框
<form id="form1" name="form1" method="post" action=""> <textarea rows="3" cols="20"> 在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}"/>