第二天web学习（基本的简单html标签学习）

小陈努力学前端

已于 2022-05-27 19:22:07 修改

阅读量157

点赞数

文章标签： html

于 2022-05-27 19:07:49 首次发布

本文链接：https://blog.csdn.net/newnew66/article/details/125009481

版权

<!--
<a href="目标地址">提示文字或图像<a>
作用：跳转到目标地址指定的页面
目标地址有相对路径和绝对路径，一般建议使用相对路径
1 同一网站不同页面
2 不同网站的页面
3 同一页面不同位置之间，锚链接

邮件超链接：
<a href="mailto:邮箱地址">联系我们</a>
表格标签：显示数据页面局部布局->如：form-table
<table>（表）
<tr>(表头行)
（表头列）<th>列名称</th>...
</tr>
<tr>
<td>列的数据</td>
</tr>....
</table>
表格常用的属性：rowspan="数字" （行合并）
colspan="数字"（列合并）
快捷输入：网页中多个位置代码相同->先选中一个位置，alt键，选择所有位置，输入内容
表单标签：
作用：用户在浏览器端摄入数据然后提交给服务器，就需要表单
<form action="提交数据的目标地址" name="数据名称" value="数据">（表单标签）
<input type="表单元素类型名" name="数据名称" value="数据">

</form>
text:单行文本框 password:密码文本框 radio checkbox submit reset button file hidden
同一组单选按钮同时只能选择一个：name属性值相同就是一组
checked="checked"表示选中，有checked表示选中
提交按钮：默认行为就是提交表单中的数据
重置按钮：默认行为就是还原表单元素中的数据
一般按钮：没有默认功能，必须自己编写js代码来定义其功能
get方式：表单数据和地址在一起，在浏览器的地址栏中可以看到如下格式的数据：地址？name属性值=value属性值&.....
不安全
post方式:数据封装在数据包中，抓包软件，Chrome使用开发者工具
多行文本框
<textarea name="名称" row="可见行数" col="可见列数" > 内容 </textarea>
下拉列表框
<select name="名称">
<option value="数据" selected="selected">选项文字</option>
表单元素必须要有name属性值，没有name属性值，这个表单元素的value元素不能提交
特殊的html属性:enabled允许 disabled 禁用
文本框特有的html属性 readonly="readonly"只读
表单中多个表单元素在网页上
其他标签：
div:层，一般用于页面布局，本质上就是网页中的一个矩形
dl-dt-dd:图文混排
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首页</title>
</head>
<body>
<h1>首页</h1>
<hr/>

<a href="001.html">到我的第一个网页</a>
<a href="images\IMG_5254(20220511-073953).JPG">武忠祥</a>
<a href="http://www.baidu.com">百度</a>

<a href="#tp">锚链接</a>

<a href="mailto:2814745460@qq.com">联系我们</a>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<a name="tp">锚链接位置</a>

<table>
<tr>
<th>学号</th>
<th>姓名</th>
<th>HTML分数</th>
<th>CSS分数</th>
<th>Javasript分数</th>
</tr>
<tr>
<td>001</td>
<td>张三</td>
<td>89</td>
<td>23</td>
<td>32</td>
</tr>
<tr>
<td>001</td>
<td>李四</td>
<td>32</td>
<td>32</td>
<td>43</td>
</tr>
</table>
<table>
<tr>
<td>ok</td>
<td rowspan="2">ok</td>

<td>ok</td>
<td>ok</td>
<td>ok</td>
</tr>
<tr>
<td>ok</td>
<td>ok</td>
<td>ok</td>
<td>ok</td>
<td>ok</td>
</tr>
<tr>
<td>ok</td>

<td colspan="3">ok</td>
<td>ok</td>
<td>ok</td>
<td>ok</td>
</tr>
</table>

<h1>注册用户</h1>
<hr>
<form action="001.html" method="post">
<p>用户<input typr="text" name="user_name" value=""/></p>
<p>密码<input typr="text" name="login_pass" value=""/></p>
<p>性别:
<input type="radio" name="gender" value="1" checked="checked"/>男
<input type="radio" name="gender" value="2" checked=""/>女
</p>
<p>爱好：
<input type="checkbox" name="book" value="1" />看书
<input type="checkbox" name="football" value="2" />踢足球
</p>
<p>头像：
<input type="file" name="photo" value=""/>

<input type="hidden" name="no" value="001"/>
</p>
<p>政治面貌：
<select name="face">
<option value="1">111</option>
<option value="2" selectde="selected">222</option>
<option value="3">333</option>
</select>
</p>
<p>自我评价：
<textarea name="desc" rows="3" cols="30" ></textarea>
</p>
<p>
<input type="submit" name="注册" value="注册"/>
<input type="reset" name="重新填写" value="重新填写"/>
<input type="button" name="一般按钮" value="一般按钮"/>
</p>
</form>
</body>
</html>