HTML学习总结记录

1.超链接

应用场景:主要实现网站(web应用)内部跳转、网站之间的跳转
语法:

<a href="链接地址"  target="_blank|_self|_parent|_top">内容</a>

target属性的属性值

描述
_blank在新窗口中打开被链接文档。
_self默认。在相同的框架中打开被链接文档。
_parent在父框架集中打开被链接文档。
_top在整个窗口中打开被链接文档。

(1)创建超链接,连接到百度

<a href="www.baidu.com" target="_self" title = "百度一下你就知道">
     <h1 style="text-align:center">百度</h1>
</a>

(2)创建一个图像链接

 <a href="http://www.baidu.com">
        <img border="2px" width="900px" height="600px" src="test.jpg" />
 </a>

(3)创建一个网页内部的超链接 (锚点链接)

首先指定跳转到哪个目标位置:

<a href="#目标名称">链接文字</a>

然后在目标位置设置相对应的跳转名称:

<a name="目标名称"> </a>

(4)创建一个电子邮件链接

<a herf=“mailto: test@163.com">联系我们</a>

2.表格

作用:帮助设计界面布局
语法:

	<table >       <!-- <table>为表格标记,表格的整体外观由<table>标记的属性决定 -->
	    <tr>      <!-- <tr> 为表行标记,表示表格中新的一行的开始; --> 
		<th>...</th>  <!-- <th> 为表头标记,<th>标记的文字按照粗体字显示 --> 
		...
		</tr>
		<tr>
		<td>...</td>> <!-- <td> 为表项(定义表格的具体数据),数据的内容放在<td></td>标记之间。 --> 
		...
		</tr>
	</table>

(1)单元格合并:colspan和rowspan

<td colspan="2">20</td>
<!-- colspan="2"向右合并两个单元格 --> 
<td rowspan="3">20</td>
<!-- rowspan="2"向下合并两个单元格 --> 

(2)表格边框:cellspacing和cellspacing

cellspacing="0"  //字与单元格边框的距离为0

在这里插入图片描述

cellpadding="0" //指的是单元格之间的距离为0

在这里插入图片描述

表格属性

属性描述
widthpixels、%规定表格的宽度
alignleft、center、right水平对齐方式
valigntop、bottom、middle垂直对齐方式。
borderpixels设置表格边框的粗细,其取值为正数,单位是象素,省略则不带边框。
bgcolorrgb(x,x,x)、#XXXXXX、colorname背景颜色
bordercolorrgb(x,x,x)、#XXXXXX、colorname边框颜色
cellpaddingpixels、%单元格间距,指的是单元格之间的距离,单位是象素
cellspacingpixels、%单元格的边距,指的是字与单元格边框的距离,单位是象素
frame属性值规定外侧边框的那个部分是可见的
rules属性值规定内侧边框的哪个部分是可见的
rowspan数字行合并
colspan数字列合并

3.表单

应用场景:用于在Web应用中采集用户数据
语法:
<form action="资源名称" method="get|post">  
	表单yuan's
</form>
<!-- action: 表单提交的地址 -->
<!-- method: 提交保单的方法 -->
<!-- get—发送数据的大小有限制(256byte),表单中的数据显示在url后面,如:user.html?userid=zhangsan。 post—发送教据的大小没有限制,而且不会现在在url后面 -->

一些input元素:

1.文本框

<input  type="text"(文本框)  name="username"(文本框名称)  placeholder="请输入用户名"(提示) size="value"(文本框长度) maxlength="value"(文本框可输入最大字符数) >

value表示默认值

2.密码框

<input  type="password"(密码框)  name="password"(密码框的名称) placeholder="请输入密码"(提示) size="value"(密码框的长度) >

3.单选按钮

<input name="sex" type="radio"(单选按钮框) value="男"(值) check="checked">男
<input name="sex" type="radio" value="" >

checked表示此项默认被选中

4.复选框

<input type="checkbox"(复选框) name="class" value="Chinese"(值)/>语文
<input type="checkbox" name="class" value="math" >数学
<input type="checkbox" name="class" value="English">英语

5.按钮

<input type="button"(普通按钮) name="Button" value="button"(按钮上面的文字)>
<input type="submit"(提交按钮) name="Submit" value="submit">
<input type="reset" (重置按钮) name="Reset"  value="reset">
<input type="image" (图片按钮) name="Image"   src="image_url">

6.菜单/列表

<select name="select_name" size="number" multiple="multiple"(与许多选)>
  <option="select_name" selected="selected"(默认值)>选项名称</option>
  <option="select_name" >选项名称</option>
...
</select>

7.多行文本域

<textarea name="textname" rows="文本域行数" cols="文本域列数">

8.按钮

<button type="button">Click Me!</button>
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页