懒人HTML5笔记-2(常用标签)

一. 超链接标签

  • 常用范例
<a href="#bottom" name="top">回到底部(锚点功能)a>
<a href="index01.html" target="_blank">跳转到本地的资源a>
<a href="http://www.baidu.com">跳转到网络位置a>
br*80【敲Tab】
<a href="#top" name="bottom">回到顶部(锚点功能)a>

二. 图片

  • 常用范例
<image src="img/02.png" title="图片的提示"/>
<image src="file:///c:/tmp/图片.png" />
<image src="http://www.a.cn/path/to/image.png" width="200px"/>
只给出宽或者高的属性,另一个对应的属性会保持比例缩放。

align属性用于调整图片与文字的位置关系。

三. 表格

  • 常用范例
<table boder="1px">
	<tr>
		<td>1td>
		<td>2td>
		<td>3td>
	tr>
	<tr>
		<td>1td>
		<td>2td>
		<td>3td>
	tr>
	<tr>
		<td>1td>
		<td>2td>
		<td>3td>
	tr>
table>
上边的表格随内容自适应大小。
给tr和td标签指定height和width属性,表格宽高就不会自适应内容了。

<table border="1px">
	<tr height="100px">
		<th width="100px">11td>
		<th width="100px">22td>
		<th width="100px">33td>
	tr>
	<tr height="100px">
		<td>11td>
		<td>22td>
		<td>33td>
	tr>
	<tr height="100px">
		<td>11td>
		<td>22td>
		<td>33td>
	tr>
table>
未指定width属性的td会自动对齐。
align="center"属性设置在table中是表格整体的居中,设置在tr中是表格行的文本居中,设置在td中是单元格文本的居中。

th标签可作为标题,内容会自动加粗并居中。

table标签的cellpadding属性设置内容和单元格的距离,cellspacing单元格和单元格之间的距离。

生成表格快捷键
table>tr*3>th*3【敲Tab】

列合并属性:colspan=“合并的列数”。需要去掉合并后的多余列元素td/th。
行合并属性:rowspan=“合并的行数”。需要去掉合并后的多余行元素td/th。

背景色的调整:bgcolor

四. 表单

传送到后端的参数形式是:键=值
其中键是标签name属性,值是标签的value属性。
懒人HTML5笔记-2(常用标签)_第1张图片
懒人HTML5笔记-2(常用标签)_第2张图片
懒人HTML5笔记-2(常用标签)_第3张图片
在这里插入图片描述
radio使用checked="checked"来实现默认选中(同checkbox)。
懒人HTML5笔记-2(常用标签)_第4张图片

<form action="https://www.baidu.com/s" method="get">
	<select name="country">
		<option value="1">中国option>
		<option value="2">美国option>
		<option value="3"  selected="selected">韩国option>  <--默认选中
		 value="4">泰国option>
	select>
form>
这里value的属性值才会作为键值对name=value的值传到后台。

H5中提供了placeholder及autofocus属性,具体可以使用Alt + /快捷键来查看。

五. iframe标签

<ul>
	<li><a href="http://www.baidu.com" target="ifm">百度a>li>
	<li><a href="http://www.taobao.com" target="ifm">淘宝a>li>
	<li><a href="http://www.jd.com" target="ifm">京东a>li>
ul>


<iframe width="1000px" height="550px" name="ifm" src="http://www.baidu.com">iframe>

你可能感兴趣的:(前端)