html 标签基础

203 阅读1分钟

a标签

//默认在当前页面打开
<a href="需要跳转的路径"/> 
//target 表示目标
//_black 表示在空白窗口打开新页面
<a href="" target="_black"> </a>

img标签

<img src="图片路径" title="鼠标放上去图片的名字" alt="图片加载失败的文字">

ul无序列表标签

//实心圆(默认)
<ul type="disc">
  <li></li>
</ul>
//空心圆
<ul type="circle">
  <li></li>
</ul>
//实心方块
<ul type="square">
  <li></li>
</ul>

ol有序列表标签

//start  从第几个开始
    <ol type="1" start="3">
        <li>数字排序(默认)</li>
        <li>数字排序(默认)</li>
    </ol>

    <ol type="a">
        <li>小写字母排序</li>
        <li>小写字母排序</li>
    </ol>

    <ol type="A">
        <li>大写字母排序</li>
        <li>大写字母排序</li>
    </ol>
    
    <ol type="i">
        <li>小写罗马排序</li>
        <li>小写罗马排序</li>
    </ol>

    <ol type="I">
        <li>大写罗马排序</li>
        <li>大写罗马排序</li>
    </ol>

i标签

<i>字体倾斜</i>

字体倾斜

b标签

<b>字体加粗</b>

普通字体 字体倾斜

sup标签

把文字变成上标 10<sup>2</sup>

把文字变成上标 102

u标签

<u>给文字加下划线</u>

给文字加下划线

center标签

<center>文字居中</center>
文字居中

table表格

*cellspacing 单元格之间空间

border 边框

align="center" 居中显示

colspan 列合并

rowspan 行合并

    <table border="1px" cellspacing="0">
		<col span="6" width="200px" >
		<col span="1" width="300px" >
		<tr height="50px" align="center">
			<th colspan="7" >个人简历</th>
		</tr>
		<tr height="50px">
			<td>姓名</td>
			<td></td>
			<td>性别</td>
			<td></td>
			<td>年龄</td>
			<td></td>
			<td rowspan="4">照片</td>
		</tr>
    </table>

table分组

	<!-- table有属性rules 分割线属性 
		属性值 all所有  none 没有  cols 列线 rows 行线 groups组分割线
		组分割线想要有效,必须用colgroup进行列分组
		-->
		<table width="800" height="300" rules="groups" >
			<!-- 列分组  col或者colgroup col是单标签 colgroup是双标签 都有属性span设置分组的列数 默认值是1 -->
			<col span="3" style="background-color: red;"/>
			<col span="2" style="background-color: skyblue;"/>
			<col style="background-color: green;"/>
			<!-- <colgroup span="2" style="background-color: red;"></colgroup>
			<colgroup span="1" style="background-color: skyblue;"></colgroup>
			<colgroup span="3" style="background-color: orange;"></colgroup> -->
			<thead>
				<tr>
					<!-- th有水平居中和加粗的效果 -->
					<th>1</th>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
				</tr>
			</thead>
			<tbody>


				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
				</tr>
			</tbody>
			<tfoot>


				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
				</tr>
			</tfoot>
		</table>

form

	<form action="用户提交地址" method="选择请求类型  post || get"></form>

表单字段集

<fieldset>
	<legend>我是标题</legend>
</fieldset>