HTML基础知识 + 简单的注册页面

记录不是首要目的,只是想回顾一下学习的内容~
(标签左右多了空格不是我有毛病,是编辑器这样做才能显示)

1.1 HTML简介
html:Hyper Text Markup Language 超文本标记语言,超文本即可含有超链接。

1.2 常用标签

①< p >…< /p > 段落标记

  • 段落内依据所在容器的宽度自动换行,浏览器会自动地在段落的前后添加空行。
  • < p >和< br >的区别。 图一是p标签,图二是br(换行标签)。

HTML基础知识 + 简单的注册页面_第1张图片
在这里插入图片描述
②< !-- …-- >注释

h标签,定义标题头,从1~6,权重依次降低。

  • 尽量靠近在html中的body标签,越近越好,以便让搜索引擎最快领略主题。
  • h4~h6会比较少用。

④< a >…< /a > 使用超链接与网络上的另一个文档相连。

  • 示例:< a href="">打开另一个页面< /a>
  • 超链接可以是一个字,一个词,或者一组词,可以是一幅图像。
  • 锚点标签:< a name=“ziti”>…< /a >
    作用:同一个文档中创建指向该锚的位置。
    示例:< a href = “#ziti”>段落标签< /a >

tips:锚点需要先定义再使用。
HTML基础知识 + 简单的注册页面_第2张图片
HTML基础知识 + 简单的注册页面_第3张图片
⑤< ul >< li >…< /li >< ul > 无序列表
< ol >< li >…< /li >< ol > 有序列表

  • 无序标记为小黑圆圈,有序可以为数字、字母等。
  • 示例:
    < ul >
    < li >ddd< /li >
    < li >kkk< /li >
    < /ul >
  • li中的内部可以使用段落、换行符、图片、链接、以及其他列表等。

⑥ table表格。

  • 标签和内容有:table(定义表格)、caption(定义表格大标题)、tr(行)、th(列,第一行的标题,会加粗)、td(列)、border(边框)、width(设置宽度,如果没设置就按字体大小来扩充) 等。

  • colspan(列合并)、rowspan(行合并)

  • 可用分组设置表格的格式:大标题caption、表格的属性名thead(也叫页眉)、表格的主要内容tbody(主体)、表格的tfoot(页脚),不一定都要有,只是可以按照这样的结构划分。

  • 例子:


<html>
<head>
	<title>表格title>
head>
<body>
	<table border="1px" width="600px">
		<caption>角色信息表caption>
		<thead>
			<tr>
				<th>序号th>
				<th>姓名th>
				<th>性别th>
				<th>年龄th>
				<th>电话th>
			tr>
		thead>
		<tbody>
			<tr>
				<td>1td>
				<td>李白td>
				<td>td>
				<td>18td>
				<td>123456td>
			tr>
			<tr>
				<td>2td>
				<td>干将莫邪td>
				<td>td>
				<td>25td>
				<td>133456td>
			tr>
			<tr>
				<td>3td>
				<td>赵云td>
				<td>td>
				<td>33td>
				<td>146533td>
			tr>
		tbody>
	table>
body>
html>

HTML基础知识 + 简单的注册页面_第4张图片
HTML基础知识 + 简单的注册页面_第5张图片
HTML基础知识 + 简单的注册页面_第6张图片
HTML基础知识 + 简单的注册页面_第7张图片
HTML基础知识 + 简单的注册页面_第8张图片

⑦其他标签:
HTML基础知识 + 简单的注册页面_第9张图片
HTML基础知识 + 简单的注册页面_第10张图片
HTML基础知识 + 简单的注册页面_第11张图片

⑧ < form >…< /form >表单

  • 用于用户信息收集,实现人机交互。
  • 包含元素:文本框、单选按钮、列表框、图片框、复选框等,统称为控件。
  • 常用于注册页面。
    HTML基础知识 + 简单的注册页面_第12张图片

<html>
<head>
	<title>表单title>
head>
<body>
	<form action="" method="">
		<label>请输入姓名:label>
			<input type="text" name="" id="" value=""><br>
		<label>请输入密码:label>
			<input type="password" name="" id="" value=""><br>
		<label>请重复密码:label>
			<input type="password" name="" id="" value=""><br>
		<label>性别:label>
			<input type="radio" name="xb" id="" value=""><input type="radio" name="xb" id="" value=""><br>
		<label>兴趣爱好:label>
			<input type="checkbox" name="" id="" value="">看书
			<input type="checkbox" name="" id="" value="">旅游
			<input type="checkbox" name="" id="" value="">思考
			<input type="checkbox" name="" id="" value="">爬山<br>
		<label>生日:label>
			<select>
				<option value="1998" selected="selected">1998option>
				<option value="1999">1999option>
				<option value="2000">2000option>
				<option value="2001">2001option>
				<option value="2002">2002option>
				<option value="2003">2003option>
			select><br>
		<label>头像:label>
			<img src="image/headLogo/13.gif">
			<select>
				<option value="1">1option>
				<option value="2">2option>
				<option value="3">3option>
				<option value="4">4option>
			select><br>
		<input type="button" name="" value="普通按钮">
		<input type="submit" name="" value="提交按钮"><br>
		
		<textarea rows="5" cols="50" value="" id="">请输入textarea>
		<input type="file"><input type="button" name="" value="上传"><br>
		
	form>
body>
html>

HTML基础知识 + 简单的注册页面_第13张图片
除了实现以上,还加了文本框、上传文件写法。

总结:最后它的格式虽然是很糟糕的,但是如果把这些内容添加到表格里面,也可以实现得很工整。


<html>
<head>
	<title>注册页面title>
head>
<body>
	<form action="" method="post">
<table border="0" width="500px">
	<tr>
		<td align="right">请输入用户名:td>
		<td><input type="text" name="" id=""/>td>
	tr>
	<tr>
		<td align="right">请输入密码:td>
		<td><input type="password" name="" id=""/>td>
	tr>
	<tr>
		<td align="right">再次输入密码:td>
		<td><input type="password" name="" id=""/>td>
	tr>
	<tr>
		<td align="right">性别:td>
		<td>
			<input type="radio" name="xb" id="" checked="checked" /><input type="radio" name="xb" id=""/>td>
	tr>
	<tr>
		<td align="right">兴趣爱好:td>
		<td>
			<input type="checkbox" name="" id=""/>游泳
			<input type="checkbox" name="" id="" checked="checked"/>爬山
			<input type="checkbox" name="" id=""/>看书
			<input type="checkbox" name="" id=""/>思考
		td>
	tr>
	<tr>
		<td align="right">生日:td>
		<td>
			<select name="" id="">
				<option value="2015">2015option>
				<option value="2016">2016option>
				<option value="2017" selected="selected">2017option>
				<option value="2018">2018option>
				<option value="2019">2019option>
			select><select name="" id="">
				<option value="1">1option>
				<option value="2" selected="selected">2option>
				<option value="3">3option>
				<option value="4">4option>
			select><select name="" id="">
				<option value="1">1option>
				<option value="2" selected="selected">2option>
				<option value="3">3option>
				<option value="4">4option>
			select>td>
	tr>
	<tr>
		<td align="right">头像:td>
		<td>
			<img src="image/headLogo/13.gif" alt="not find"/>
			<select name="" id="">
				<option value="1">1option>
				<option value="2">2option>
				<option value="3">3option>
				<option value="4">4option>
				<option value="5">5option>
			select>
		td>
	tr>
	<tr>
		<td align="center" colspan="2">
			<input type="submit" value="注册">
		td>
		
	tr>
table>
form>
body>
html>

HTML基础知识 + 简单的注册页面_第14张图片

你可能感兴趣的:(javaWeb,html)