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

川长思鸟来 2022-10-29 06:23 222阅读 0赞

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

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

1.2 常用标签

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 1]  
②< !-- …-- >注释

③<h?>…</h?> h标签，定义标题头，从1~6，权重依次降低。

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

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

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

tips:锚点需要先定义再使用。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 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（页脚），不一定都要有，只是可以按照这样的结构划分。
 *  例子：

<!DOCTYPE html>
    <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>1</td>
    				<td>李白</td>
    				<td>男</td>
    				<td>18</td>
    				<td>123456</td>
    			</tr>
    			<tr>
    				<td>2</td>
    				<td>干将莫邪</td>
    				<td>男</td>
    				<td>25</td>
    				<td>133456</td>
    			</tr>
    			<tr>
    				<td>3</td>
    				<td>赵云</td>
    				<td>男</td>
    				<td>33</td>
    				<td>146533</td>
    			</tr>
    		</tbody>
    	</table>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 8]

⑦其他标签：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 9]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 10]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 11]

⑧ < form >…< /form >表单

*  用于用户信息收集，实现人机交互。
 *  包含元素：文本框、单选按钮、列表框、图片框、复选框等，统称为控件。
 *  常用于注册页面。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 12]

<!DOCTYPE html>
    <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">1998</option>
    				<option value="1999">1999</option>
    				<option value="2000">2000</option>
    				<option value="2001">2001</option>
    				<option value="2002">2002</option>
    				<option value="2003">2003</option>
    			</select><br>
    		<label>头像：</label>
    			<img src="image/headLogo/13.gif">
    			<select>
    				<option value="1">1</option>
    				<option value="2">2</option>
    				<option value="3">3</option>
    				<option value="4">4</option>
    			</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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 13]  
除了实现以上，还加了文本框、上传文件写法。

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

<!DOCTYPE html>
    <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">2015</option>
    				<option value="2016">2016</option>
    				<option value="2017" selected="selected">2017</option>
    				<option value="2018">2018</option>
    				<option value="2019">2019</option>
    			</select>年
    			<select name="" id="">
    				<option value="1">1</option>
    				<option value="2" selected="selected">2</option>
    				<option value="3">3</option>
    				<option value="4">4</option>
    			</select>月
    			<select name="" id="">
    				<option value="1">1</option>
    				<option value="2" selected="selected">2</option>
    				<option value="3">3</option>
    				<option value="4">4</option>
    			</select>日
    		</td>
    	</tr>
    	<tr>
    		<td align="right">头像：</td>
    		<td>
    			<img src="image/headLogo/13.gif" alt="not find"/>
    			<select name="" id="">
    				<option value="1">1</option>
    				<option value="2">2</option>
    				<option value="3">3</option>
    				<option value="4">4</option>
    				<option value="5">5</option>
    			</select>
    		</td>
    	</tr>
    	<tr>
    		<td align="center" colspan="2">
    			<input type="submit" value="注册">
    		</td>
    		
    	</tr>
    </table>
    </form>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 14]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70]: /images/20221024/b2c22c4484b94638ae8bee0b9a443035.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 1]: /images/20221024/61152dc128e54602bda461363fa8e901.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 2]: /images/20221024/768ba402337c443ab351c985b12d887f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 3]: /images/20221024/f3219203df414921b7092c4433770157.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 4]: /images/20221024/24c2d436c8a849a3ba832231aaf637ab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 5]: /images/20221024/31c4d8969d5f41d284f885bcd263e235.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 6]: /images/20221024/4f8958a6d006499f9b38a2e25c8d00bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 7]: /images/20221024/d4f99467c9b24cf2a7df10d85d7d04ee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 8]: /images/20221024/5b6b8e40e2f64df9afebd9730c352504.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 9]: /images/20221024/6b8f35e05f7046bdbbbb70953dc5cc54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 10]: /images/20221024/644ad72b87804795beb75a2b3c807193.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 11]: /images/20221024/5ded517430514df4a7270d73f8791aa2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 12]: /images/20221024/a2d7e0db7d704e6e8fec67c226429ba9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 13]: /images/20221024/8714ef9e613e455887cc74e1607f4ebf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 14]: /images/20221024/6277fa77d81c401cbd40529fcd2b99c7.png