HTML扫盲

最新推荐文章于 2021-06-09 21:49:40 发布

即将翻身的咸鱼

最新推荐文章于 2021-06-09 21:49:40 发布

阅读量89

点赞数

本文链接：https://blog.csdn.net/liyuuhuvnjjv/article/details/109141358

版权

一、HTML常见的标签

1.段落标签

<p>段落标签使用p表示,是paragraph的缩写</p>
<p>我爱高圆圆,虽然她已经39岁了</p>

2.标题标签

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

<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
...
<h6>我是老六</h6>

3.表单标签

3.1文本框

单行的文本使用标签，input标签有很多属性，如下：

type ，表示文本的类型；
name，表示文本的名称,后端使用name来获取框中的属性值；
value，默认属性框的填充值，用户输入后显示输入的内容
placeholder，文本框内容为空显示的内容；
size，文本框的长度

<input type="text" name="name" value="高圆圆" placeholder="请输入姓名" size="10">
<input type="password" name="password" placeholder="请填写密码">

3.2密码框

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

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

3.3普通按钮

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

3.4提交按钮

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

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

3.5表单

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

<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>

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

二、第一个简单的HTML页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>liyuhuan</title>
</head>

<body>
<p>我爱高圆圆，虽然她已经39岁了</p>
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
...
<h6>我是老六</h6>
<!--发送http请求数据到服务器后台，URL = action，请求方法=method，请求类型=enctype
 请求数据是具体表单中的组件属性name作为key-->
<form action = "login" method = "post" enctype = "application/x-www-form-urlencoded">
    用户名：<input type = "text" name = "username" placeholder = "请输入用户名">
    密码：<input type = :password" name = "password" placeholder = "请输入密码">
    <input type = "submit" value = "提交">
</form>
</body>
</html>

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

三.HTMl中的CSS和JS

<!DOCTYPE html>
<!--注释的写法:HTML中只能写为尖括号+!--,js里边可以写// -->
<html lang="en">
<!--头标签:不作为网页展示的内容,设置网页配置内容-->
<head>
    <!--设置网页编码格式-->
    <meta charset="UTF-8">
    <!--设置网页标题-->
    <title>Title</title>
    <!--js的使用方式:1.引入一个js文件,在js中写代码-->
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        //2.这里写js代码:html中,直接写js
    </script>
    <!--css的使用方式:1.引入css文件-->
    <link rel="stylesheet" href="替换为css文件路径">
    <!--css的使用方式:2.直接在html里写css样式-->
    <style>

    </style>
</head>
<!--body标签:网页要展示的内容,一般叫做dom元素/dom标签-->
<body>

</body>
</html>

即将翻身的咸鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML扫盲

一、HTML常见的标签1.段落标签<p>段落标签使用p表示,是paragraph的缩写</p><p>我爱高圆圆,虽然她已经39岁了</p>2.标题标签标题标签h1 ~ h6 标题标签从名字就能看出,是用来定义文字标题的,包括h1-h6,数字越小对应的字体越大<h1>我是一级标题</h1><h2>我是二级标题</h2>...<h6>我是老六</h6>3.表单标签3.
复制链接

扫一扫