html5基础语法

最新推荐文章于 2024-06-20 15:06:48 发布

脚底儿

最新推荐文章于 2024-06-20 15:06:48 发布

阅读量732

点赞数 17

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/weixin_46729014/article/details/137141463

版权

一、基本标签

<!DOCTYPE html>
<!-- 以上代码是 HTML5 的文档类型声明，它告诉浏览器当前页面是使用 HTML5 规范编写的 -->
<html lang="en">
<head>
    <title>这里是标题</title>
    <!--这里是标题，最终显示再浏览器上面标签页上-->
</head>
<body>
    <!--这个地方用来写用户看到的界面写在body标签内部-->
</body>
</html>

1.基础标签

<body>
    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
    <h4>这是四级标题</h4>
    <h5>这是五级标题</h5>
    <h6>这是六级标题</h6>
    <p>这是正文标签</p>
    <hr>        <!-- 这是分割线标签 -->
    <br>        <!-- 这是换行标签，用于文字换行 -->
    <strong>这是加粗标签</strong>
    <em>这是斜体标签</em>
</body>

运行结果如下
在这里插入图片描述

2.特殊符号

符号	对应代码
空格	&nbsp
大于号	&gt
小于号	&lt
引号	&quot
版权符号	&copy

注：符号后面应加分号

3.插入图片

<img src="这里添加图片路径" alt="当图片出错时这里显示错误信息" title='当鼠标悬停时，这里提示图片信息'>

4.超链接

<a href="跳转的链接" target="选择在那个窗口打开，常用_self（在当前页面打开），_blank（在新窗口打开）">两个a标签中间放置超链接文字</a>
被超链接的文字会变成蓝色并带有下划线

5.元素

元素分为行内元素和块元素
块元素：无论内容犹多少，该元素独占一行（常见块元素p，h1-h6）
行内元素：内容撑开宽度，行内元素可以排在同一行（常见犹strong，em）

6.列表

6.1无序列表

<ul> 此处声明无序列表，无需列表前默认有·
    <li>1</li>此处为内容写在li标签内
    <li>2</li>
    <li>3</li>
</ul>

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

6.2有序列表

<ol>此处声明有序列表
    <li>第一条</li>
    <li>第二条</li>
    <li>第三条</li>
</ol>

运行结果如下，每一条前面自动标序号（常用来做热搜榜）
在这里插入图片描述

7.表单

7.1form标签

action标签是向action所标注的链接发送请求，#表示无操作
method标签指用那种方法发送请求，get请求为明文发送（不安全），post请求则使用密文发送，常用作密码等私密书籍的发送，post请求没有字数限制。
所有的表单都要在form标签内部，否则无效

<form action="#" method="get">

</form>

7.2按钮

<form action="#" method="get">
        <!-- 此处为输入框type内部为text为明文 -->
        请输入账号：<input type="text"><br>
        <!-- type为psaaword为密文 -->
        请输入密码：<input type="password" name="pwd" id="pwd">
        <!-- 按钮标签 此处button为无操作其他常用按钮：submit（提交），reset（重置表单）-->
        <input type="button" value="这是个按钮">
    </form>

在这里插入图片描述

7.3单选按钮

<form action="#" method="get">
        <!-- 此处name标签必须相同否则每个选项都为一个独立的单选 -->
        <input type="radio" name="sex">男
        <input type="radio" name="sex">女
    </form>

在这里插入图片描述

7.4多选按钮

<form action="#" method="get">
        <!-- 此处name标签必须相同否则每个选项都相互独立 -->
        <input type="checkbox" name="hobbby">看书
        <input type="checkbox" name="hobbby">玩游戏
        <input type="checkbox" name="hobbby">敲代码
        <input type="checkbox" name="hobbby">对着屏幕发呆
    </form>

在这里插入图片描述

7.5文件上传

<form action="#" method="post" enctype="multipart/form-data">
        <!-- 上传文件form标签内必、必须要enctype="multipart/form-data" -->
        <input type="file" name="file">
    </form>

在这里插入图片描述

7.6常用标签

属性	效果
readonly	只读
disabled	禁用
palceholder	提示符
required	不能为空
pattern	输入内容必须符合正则表达式
autofocus	自动获取焦点
autocomplete	保存用户填写过的数据

脚底儿

关注

17
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
html5基础语法

method标签指用那种方法发送请求，get请求为明文发送（不安全），post请求则使用密文发送，常用作密码等私密书籍的发送，post请求没有字数限制。行内元素：内容撑开宽度，行内元素可以排在同一行（常见犹strong，em）块元素：无论内容犹多少，该元素独占一行（常见块元素p，h1-h6）action标签是向action所标注的链接发送请求，#表示无操作。运行结果如下，每一条前面自动标序号（常用来做热搜榜）所有的表单都要在form标签内部，否则无效。元素分为行内元素和块元素。注：符号后面应加分号。
复制链接

扫一扫