简单的html

最新推荐文章于 2023-03-01 15:49:11 发布

原创最新推荐文章于 2023-03-01 15:49:11 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

JavaWeb 同时被 2 个专栏收录

27 篇文章

订阅专栏

HTML

1 篇文章

订阅专栏

这篇博客介绍了HTML的基本概念，HTML文档的结构以及常见的HTML标签，包括段落标签、标题标签、文本框、密码框、普通按钮和提交按钮等。还提到了表单的使用，特别是form标签的action和method属性。

html介绍

HTML是用于创建网页的语言. 我们通过使用HTML标记标签创建HTML文档来创建网页. HTML代表超文本标记语言. HTML是一种标记语言,它是标记标签的集合

HTML标签是由尖括号括起来的词,如 <html>， <body> 。标签通常成对出现，例如 <html>和</html> 。
一对中的第一个标签是开始标签;第二个标签是结束标签. 我们还可以将开始标签称为起始标签,结束标签称为闭合标签

HTML文档结构至少要包括head,body两部分,如

<html>
    <head>
        <meta charset="UTF-8">
        <title>html基础</title>
    </head>
    <body>
        <h3>我们要开始学习之旅啦</h3>
    </body>
</html>

效果如下
在这里插入图片描述

HTML常见标签

HTML是由一套标记标签组成的,通常叫做标签.标签一般由开始标签和结束标签组成. 部分标签为单标签或者空标签

文本标签

1,段落标签
段落标签使用p标签,是paragraph的缩写,自带换行效果

		<p>段落标签使用p表示</p>
        <p>我爱柯佳嬿,虽然她35岁了</p>

2.标题标签h1~h6标题标签从名字中就能看出,是用来定义文字标题的,包括h1 ~ h6,数字越小对应的字体越大

<html>
    <head>
        <meta charset="UTF-8">
        <title>html基础</title>
    </head>
    <body>
        <h1>我是一级标题</h1>
        <h2>我是二级标题</h2>
        <h3>我是三级标题</h3>
        <h4>我是四级标题</h4>
        <h5>我是老五</h5>
        <h6>我是老六</h6>
        <p>段落标签使用p表示</p>
        <p>我爱柯佳嬿,虽然她35岁了</p>
    </body>
</html>

在这里插入图片描述

表单标签

1.文本框单行的文本使用,input标签有很多属性,如下
type 表示文本的类型
name : 表示文本的名称,后端使用name来获取框中的属性值
value:默认属性框的填充值,用户输入后显示输入的内容
placeholder，文本框内容为空显示的内容；
size，文本框的长度

<input type="text" name="name" value="柯佳嬿" placeholder="请输入姓名" size="10">

密码框密码框与文本框类似 , 区别在于type取值不同, 取值为password, 输入时候自动显示为星号

<input type="password" name="password" placeholder="请填写密码">

普通按钮表示一般按钮，如下

普通按钮<input type="button" value="登录">

提交按钮当需要提交表单的时候，需要使用提交按钮。提交按钮需要配合form表单才能向服务器提交数
据。如下：

提交按钮<input type="submit" value="提交">

表单表单使用form来表示,表示提交到的服务器的信息,一般在注册或者登陆两个应用场景中使用,如下

<html>
    <head>
        <meta charset="UTF-8">
        <title>html基础</title>
    </head>
    <body>
      <form method="POST" action="http://how2j.cn/study/login.jsp">
        账号:<input type="text" name="name"><br/>
        密码<input type="password" name="password"><br/>
        <input type="submit" value="登陆">
      </form>
    </body>
</html>

action表示将表单提交的后台地址,method = "post"表示提交的方式,提交方式有get方式和post方式两种
get方式将信息提交到url的后面,提交大小有限制,不适合私有数据
post方式是提交实体内容,提交大小无限制,适合私有数据

<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>一级标题</h1>
        <h2>二级标题</h2>
        <h3>三级标题</h3>
        <!--paragraph段落的意思-->
        <p>第一段</p>
        <p>第二段</p>
        <div>
            <span><a href="https://www.baidu.com">翻译</span>
            <span><a href="https://www.youdao.com">词典</span>
            <img src="🐕.jpg">
        </div>
        <div>
            <form method="get" action="text.html">
            <!--type等是标签的属性 attribute表示-->
            <input type="text" name="pxc" />
            <input type="button" value="搜索其实没提交" />
            <input type="submit" value="搜索并提交表单" /> 
            <form>
        </div>
    </body>
</html>