前端学习之标签

文本标签

标题：h1~h6，大小依次减小，独占一行，文字加粗
斜体：i
水平分割线：hr
强制换行：br
段落：p，内容独占一行
加粗：b
加粗：strong
下划线：ins、u
倾斜：em
删除线：del
一行显示多个：span
代表一个空格-： 
把文字变成上标：sup
把文字居中：center
无语义div，也会独占一行
注释：!–

图像标签

（img src=“xx.png” alt=" " …）
src：设置图片路径地址（‘ ‘ 或 “ ” 都可）
title：设置鼠标经过显示的提示文字
alt：图片引入失败的提示文字
width：设置图片的宽度
height：设置图片的高度
（宽度和高度一般二选一设置，另一边等比缩放）
border：设置边框（默认黑色）

相对路径

同级： src=“图片名” :
html文件和引入的资源文件属于同一层文件夹

下一级： src=“文件名/图片名”
html文件和引入的资源文件所在的文件夹属于同一层目录

上一级： src=“…/文件名/图片名”
html文件和引入的资源文件所在的文件夹是并列关系

列表标签

无序列表
ul type=“disc”> :实心圆
ul type=“circle”> :空心圆
ul type=“square”> :实心方块

<ul>
	<li>...</li>
</ul>

有序列表
ol type=“1”> :数字排序
ol type=“a”> :字母排序
ol type=“A”> :字母排序
ol type=“i”> :罗马字符排序
ol type=“I”> :罗马字符排序

<ol>
	<li>...</li>
</ol>

超链接相关

<a href="https://www.ujs.edu.cn/" target="blank">江苏大学官网</a>

这里target表示目标，blank表示空白，即在空白窗口打开新页面

表格相关

表格标签：table
表格里的行标签：tr
单元格标签：td

border:表示边框（单位为px）
cellspacing:表示单元格间隙（实线设值为0）
width:设置单元格宽度
align:表示对齐方式
col:是column列的缩写
colgroup：列分组标签

th=加粗并水平居中的td
colspan：设值单元格宽度
rowspan：设值单元格高度

登录表单相关

input :输入
type：类型
text：文字输入框
password：密码输入框
button：普通按钮
radio：单选框
checkbox：复选框
reset：重置按钮
submit：提交按钮
file：文件选择框
select：下拉框

修饰相关

style：表示风格、样式
color：选择颜色
background：表示背景
background-color：背景颜色
width：宽
height：高
font：字体
size：尺寸
padding：拉长边框
border：边框
border-right：只留下边框的右边线条
banner：横幅
navigation：导航
bottom：底部
ackground-repeat: no-repeat 平铺方式（背景图不重复）
background-position：背景图位置
float：浮动

边框：border
实边框：solid
虚线边框：dashed、dotted

容器相关

span：容器标签，不具备任何特殊功能，仅当做容器来使用，用于包裹一段文本，便于给文本增加样式。

div：通用容器标签，不具备任何特殊功能，仅当作容器来使用，可以包裹任何内容，也可容器直接互相包裹。

text-align：center；，让容器内部元素水平居中
margin：auto；，让容器本身水平居中

特殊

margin：外边距
padding：内边距