SLsecWeb学习（html表单提交）

最新推荐文章于 2022-11-19 14:03:50 发布

Ki10Moc

最新推荐文章于 2022-11-19 14:03:50 发布

阅读量315

点赞数 2

分类专栏： htmlbase操作文章标签： web

本文链接：https://blog.csdn.net/m0_52367015/article/details/113049416

版权

htmlbase操作专栏收录该内容

1 篇文章 0 订阅

订阅专栏

学习目标：学会使用HTML表单提交（页面登录）

基本内容学习

1、base结构

```php
<!DOCTYPE html>
<html>该页面的开头
  <head>
     <title>这里是标题哈</title>
  </head>
  <body>
    <!-- page contents -->这里是页面的body（主题内容）
  </body>
</html>页面结束标语```

2.base元素

1）<h1>..............</h1>标题
<h2>..............</h2>副标题
<h3>..............</h3>h3、h4、h5、h6元素，它们分别用作不同级别的标题。
<h4>..............</h4>
......................

2）<p>...............</p>段落

3）在网页添加图片
<a href="#"><img src="file:///C:/Users/82551/Desktop/QQ%E5%9B%BE%E7%89%8720210123045351.jpg" alt="一只仰卧着的软小萌"></a>
src后内容为该图片的地址（域名），还需要一个alt属性标记的文本。即在打开页面时图片无法加载时显示的替代文本。

注意：img元素是没有结束标记的。

4）页面跳转
<a href="https://pdsu.one">传送至pdsu.one</a>从一个页面跳转到另一个
             该部分为域名地址       超链接的文本
<a> 标签的 href 属性用于指定超链接目标的 URL。

5）将页面舔砖的超链接（锚点）嵌套在段落内
	<p>
	Here's a <a target="_blank" href="http://freecodecamp.one"> link to freecodecamp.one</a> for 	you to follow.
    </p>
  
  6）无序列表
   <ul>
    <li>玛卡巴卡</li>
    <li>小点点</li>
    <li>软小萌</li>
  </ul>
7）有序列表
 	<ol>
    <li>不听话的小孩</li>
    <li>老是蹭杨哥饭的小孩</li>
    <li>挂科的小孩</li>
	</ol>
8）创建一个输入框
<input type="text">

注意：input输入框是没有结束标记的。

9）input输入框中输入任何东西前的预定义文本
<input type="text" placeholder="this is placeholder text">即在输入框内显示出预计输入的内容字条

10）创建一个表单
<form action="/submit-makabaka-photo">
  <input type="text" placeholder="玛卡巴卡图片地址">
  </form>
11）创建一组单选按钮
<label>
  <input type="radio" name="indoor-outdoor">Indoor
</label>

12）创建一组复选框
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>

成品展示

创建一个登录页面
源码如下：

<h1>PDSU</h1>
<main>
  
  <a href="#"><img src="file:///C:/Users/82551/Desktop/QQ%E5%9B%BE%E7%89%8720210123045351.jpg" alt="一只仰卧着的软小萌"></a>
  
  <p>杨哥最喜欢的三个小可爱：</p>
  <ol>
    <li>玛卡巴卡</li>
    <li>小点点</li>
    <li>软小萌</li>
  </ol>
  <p>杨哥最讨厌的三个不可爱：</p>
  <ol>
    <li>不听话的小孩</li>
    <li>老是蹭杨哥饭的小孩</li>
    <li>挂科的小孩</li>
  </ol>
  <form action="/submit-cat-photo">
    <input type="text" required  placeholder="21加油">
    <button type="submit">点击这里前往极乐世界呦</button>
  </form>
</main>
复选框 （希望拥有更多什么样的杨崽儿）<label><input type="checkbox" name="personality">听话</label>
    <label><input type="checkbox" name="personality">请客</label>
    <label><input type="checkbox" name="personality">不挂科</label>

生成的页面（这里使用最简单的编译器文本文档）
在这里插入图片描述
能在周末早上06:07：36醒来的辅导员都是无良…不是，emm…都是优秀的导员.

Ki10Moc

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SLsecWeb学习（html表单提交）

学习目标：学会使用HTML表单提交（页面登录）1、基本结构```php<!DOCTYPE html><html>该页面的开头 <head> <title>这里是标题哈</title> </head> <body> 这里是页面的body（主题内容） </body></html>页面结束标语```2.b
复制链接

扫一扫