a标签:
<a href="指定的网页">需要展现给用户查看的内容</a>
1. a标签不仅可以让文字点击,还可以让图片点击
2. 一个a标签必须有一个href属性
3. 如果通过href属性指定的地址,必须在前面加上http/https://
4. <a href="" target="_self"></a>_self用于在当前选项卡跳转
5. <a href="" target="_blank"></a>用于在新的选项卡跳转
6. <a href="" title=""></a>title中的内容为鼠标停在该位置时所显示的内容
7. <base target="_blank">在head中,使href的链接在新选项卡中跳转
q、h、br标签:
<p>段落</p>
<h1>一级标签</h1>//标题标签,有1-6级,字体逐级变小
<hr />水平线,无/也可以
<p>段落</p>
<!--xx-->注释
<br> 换行
图片相关标签:
<img src="">显示一张图片,属性有width,height
title鼠标停住对图片的描述
alt当图片不在时显示的内容
<font size/color/face>
假链接:
1. # <a href="#"></a> 自动回到网页顶部
2. javascript: <a href="javascript:"></a>
滚动到所需位置:
<a href="#+id/如果是新界面路径+#+id"></a>
添加属性:
在标签中添加属性,id=""
无序列表:
<ul>
<li>
可以添加h标签p标签
</li>
</ul>
有序列表:
<ol>
<li></li>
</ol>
有序列表会自动添加序号
定义列表:
<dl>
<dt></dt>定义标题,可以是图片
<dd></dd>对标题的描述
</dl>
1. 图文混排
2. 做网站尾部的相关信息
3. 可以一个dt对应多个或者没有dd,但不推荐
4. 和li标签一样,丰富界面时可以在dt和dd中添加其他标签
表格标签:
<table>
<caption>
表格标签名//会在表格居中的位置默认
</caption>
<tr>一对tr代表着类似excel表格中的一行数据
<td></td>一对td代表着类似excel表格中的一个单元格数据
</tr>
</table>
<th></th>为列标题,写在tr内。自动加粗并居中
1. <table border="n">设置边框长度,默认是0
2. 宽度和高度:
可以给table和td
水平对齐
可以给table/tr/td
align属性可控制对齐方式:left,center,right
垂直
可以给tr/td
valign 可控制当前行中所有单元格垂直方向的对齐方式:top/
外边距和内边距
只能给table
3. 表格的宽度和高度默认是按照内容的尺寸来,也可以在table标签中添加width和height
4. 给td设置的宽度和高度,不会影响总宽度和总高度
5.td和tr均设置了align属性,那么单元格会按照td设置的来对齐
6. 外边距(cellspacing):单元格与单元格间的距离
内边距:就是单元格和文字之间的间隙,默认是1
合并单元格:
水平:<td colspan="n"></td>合并n个单元格,但会多出n-1个,向后/下合并
垂直:<td rowspan="n"></td>
表单标签1:
<form>
<input type="text">//一个明文输入框
<input type="password">//暗文输入框
<input type="text" value="xx">//添加xx的默认值
<input type="radio">xxx;//一个xxx的选择项
在其中添加name属性,并取值相同就会使选项互斥;
<input type="radio" checked="checked">//默认选中
<input type="checkbox">//添加多选框
<表单元素>
</form>
表单标签2:
<input type="button">//一个按钮
<input type="button" value="xxx">//按钮处显示的文字
<input type="image" src="路径">//图片按钮
<input type="button" onclick="alert(xxx);">//点击完按钮显示的字
<input type="reset">//清空按钮
<input type="submit">//提交按钮
注意点:1. 需要给form添加action属性,作用:指定需要提交到的服务器地址
2. 需要给提交到的服务器表单元素添加一个name的属性
lable标签:
<form action="">
<lable for="aaa">账号:</lable><input type="text" id="aaa">//让输入框和文字绑定,点击文字锁定输入框
Datalist格式:
<datalist>
<option>待选项内容</option>
</datalist>
例:
<input type="text" list="aaa">
<datalist id="aaa">
<option>xxxxx</option>
<option>xxxxx</option>
<option>xxxxx</option>
</datalist>