首页 > 其他分享 >HTML

HTML

时间：2023-06-17 10:44:40浏览次数：37  
标签：标签 元素 表单 HTML 修辞手法 注册 页面

HTML

初识HTML

  • HTML（Hyper Text Markup Language 超文本标记语言）

HTML5优势

  • 世界知名历览器厂商对HTML5的支持

  • 市场需求

  • 跨平台

W3C标准

  • World Wide Web Consortium(万维网联盟)
  • W3C标准包括
    • 结构化标准语言（HTML,XML）
    • 表现标准语言（CSS）
    • 行为标准（DOM,ECMAScript0）

网页基本信息

<!--DOCTYPE :告诉浏览器，我们要做什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!--head代表网页头部-->
<head>
<!--meta描述标签，它用来告诉我们网站的一些信息-->
<!--meta一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="狂神说Java">
    <meta name="description" content=来这个地方可以学习Java">
<!--title网页标题 -->
    <title>我的第一个网页</title>
</head>
<!--body代表网页主体-->
<body>
HelloWord
</body>
</html>

网页基本标签

  • 标题标签
  • 段落标签
  • 换行标签
  • 水平线标签
  • 字体样式标签
  • 注释和特殊符号
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--段落标签-->
<p>此注释可以用于修辞手法，属性，类，表示不鼓励程序员使用这样的元素，通常是因为它很危险或者存在更好的选择。</p>
<p>此注释可以用于修辞手法，属性，类，表示不鼓励程序员使用这样的元素，通常是因为它很危险或者存在更好的选择。</p>
<p>此注释可以用于修辞手法，属性，类，表示不鼓励程序员使用这样的元素，通常是因为它很危险或者存在更好的选择。</p>
<!--换行标签-->
此注释可以用于修辞手法，属性，类，表示不鼓励程序员使用这样的元素，通常是因为它很危险或者存在更好的选择。<br/>此注释可以用于修辞手法，属性，类，表示不鼓励程序员使用这样的元素，通常是因为它很危险或者存在更好的选择。
<!--水平线标签-->
<hr>此注释可以用于修辞手法，属性，类，表示不鼓励程序员使用这样的元素，通常是因为它很危险或者存在更好的选择。
<!--粗体，斜体-->
<h1>字体样式标签</h1>
粗体：<strong>I love you.</strong>
斜体：<em>I love you.<em/>
    <br/>
<!-- 特殊符号-->
    空格：空&nbsp&nbsp&nbsp&nbsp&nbsp格<br/>
    大于号：&gt;<br/>
    小于号：&lt;<br/>
    版权符号：&copy;<br/>
<!--    
特殊符号记忆方式
查百度
&+随意字母
-->
</body>
</html>

图像标签

  • 常见的图像格式：JPG,GIF,PNG,BMP

  • text

    图像地址 图像的替代文字 鼠标悬停提示文字 图像的宽度 图像的高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--img学习
 src：图片地址（必填）
 相对地址(推荐使用)，绝对地址
../   上一级目录
alt:图片名字（必填）
-->
<img src="../resources/image/32.png "alt="头像" title="悬停文字" width="300" height="400">
</body>
</html>

超链接标签

  • 文本超链接

  • 图像超链接

  • < a href="path" target="目标窗口位置">链接文本或图像

    ​ 链接路径 链接在哪个窗口打开 常用值：_self,_blank

  • 页面间链接（从一个页面链接到另一个页面）

  • 锚链接

  • 功能性链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<p id="top">顶部</p>
<!--a标签
href:表示跳转到哪个页面（必填）
target:表示窗口在哪里打开
_blank：在新标签打开
_sel:在自己网页打开
-->
<a href="1.我的第一个网页.html" target="_blank">点击调转到我的第一个页面</a>
<a href="1.我的第一个网页.html" target="_self">点击调转到我的第一个页面</a>
<a href="https://www.baidu.com">点击调转到百度</a>
<br>
<a href="1.我的第一个网页.html">
    <img src="../resources/image/32.png" alt="头像" title="悬停文字" width="115.7" height="421">
</a>
<!--锚链接
1.需要一个锚标记
2.跳转到标记
#-->
<a href="#top">回到顶部</a>
<!--功能性链接
邮件链接：mailto:
QQ链接：QQ推广-->
<a href="mailto:[email protected]">点击联系我</a>
</body>
</html>

块元素和行内元素

  • 块元素
    • 无论内容多少，该元素独占一行
    • （p,h1-h6...）
  • 行内元素
    • 内容撑开宽度，左右都是行内元素的可以排在一行
    • （a,strong.em...）

列表标签

  • 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。
  • 列表的分类
    • 无序列表
    • 有序列表
    • 定义列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签学习</title>
</head>
<body>
<!--有序列表
应用范围：试卷，问答-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
</ol>
<hr>
<!--无序列表
应用范围：导航，侧边栏-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
</ul>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
应用范围：公司网站底部-->
<dl>
    <dt>学科</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>Linux</dd>
    <dd>C</dd>
    <dt>位置</dt>
    <dd>西安</dd>
    <dd>重庆</dd>
    <dd>新建</dd>
</dl>
</body>
</html>

表格标签

  • 为什么使用表格
    • 简单通用，结构稳定
  • 基本结构
    • 单元格、行、列、跨行、跨列
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--表格table
行 tr
列 td-->
<table>
    <tr>
<!--colspan:跨列-->
        <td colspan="4">1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
<!--rowspan:跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>
</body>
</html>

媒体元素

  • 视频元素 Video
  • 音频元素 audio
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>
<!--音频和视频
src:资源路径
controls：控制条
autoplay：自动播放-->
<video src="../resources/video" controls autoplay></video>
<audio src="../resources/audio" controls autoplay></audio>
</body>
</html>

页面结构分析

元素名 描述
header 标题头部区域的内容（用于页面或页面中的一块区域）
footer 标记脚部区域的内容（用于整个页面或页面的一块区域）
section Web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或应用（常用于侧边栏）
nav 导航类辅助内容 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>
<header>
    <h2>网页头部</h2>
</header>
<section>
    <h2>网页主体</h2>
</section>
<footer>
    <h2>网页脚部</h2>
</footer>
</body>
</html>

iframe内联框架

<iframe src="path" name="mainFrame"></iframe>

​ 引用页面地址 框架标识名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<!--iframe:内联框架
src:地址
w-h:宽，高-->
<iframe src="https://www.baidu.com" frameborder="0"></iframe>
<a href="1.我的第一个网页.html" target="hello">点击跳转</a>
</body>
</html>

表单语法

 <form method="post" action="result.html"></form>
  • method:规定如何发送表单数据常用值：get post
    action:表示向何处发送表单数据
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action:表单提交的位置，可以是网站也可以是一个请求处理地址
method:post,get提交方式
get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
post-方式提交：比较安全，传输大文件
-->
<form action="1.我的第一个网页.html" method="post">
    <p>名字：<input type="text" name="username"></p>
<!-密码框：input type="password"-->
    <p>密码：<input type="password" name="pwd"></p>
    <input type="submit">
    <input type="reset">
</form>
</body>
</html>
属性 说明
type 指定元素的类型。text,password,checkbox,radio,submit,reset,file,hidden,imagehe和button,默认为text.
name 指定表单元素的名称。
value 元素的初始值。type为radio时必须指定一个值。
size 指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位。
maxlength type为text或password时，输入的最大字符数。
checked type为radio或checkbox时，指定按钮是否被选中。

单选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action:表单提交的位置，可以是网站也可以是一个请求处理地址
method:post,get提交方式
get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
post-方式提交：比较安全，传输大文件
value:默认初始值
maxlength：最长能写几个字符
size：文本框的长度
-->
<form action="1.我的第一个网页.html" method="get">
    <p>名字：<input type="text" name="username" value="狂神好帅" maxlength="8" size="30"></p>
<!-密码框：input type="password"-->
    <p>密码：<input type="password" name="pwd"></p>
<!--单选框标签
input type="radio"
value:单选框的值
name:表示组-->
    <p>性别：
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="boy" name="sex"/>女
    </p>
    <input type="submit">
    <input type="reset">
</form>
</body>
</html>

多选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action:表单提交的位置，可以是网站也可以是一个请求处理地址
method:post,get提交方式
get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
post-方式提交：比较安全，传输大文件
value:默认初始值
maxlength：最长能写几个字符
size：文本框的长度
-->
<form action="1.我的第一个网页.html" method="get">
    <p>名字：<input type="text" name="username" value="狂神好帅" maxlength="8" size="30"></p>
<!-密码框：input type="password"-->
    <p>密码：<input type="password" name="pwd"></p>
<!--单选框标签
input type="radio"
value:单选框的值
name:表示组-->
    <p>性别：
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="boy" name="sex"/>女
    </p>
<!--多选框
input type="checkbox"-->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby">敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">打游戏
    </p>
    <input type="submit">
    <input type="reset">
</form>
</body>
</html>

按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action:表单提交的位置，可以是网站也可以是一个请求处理地址
method:post,get提交方式
get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
post-方式提交：比较安全，传输大文件
value:默认初始值
maxlength：最长能写几个字符
size：文本框的长度
-->
<form action="1.我的第一个网页.html" method="get">
    <p>名字：<input type="text" name="username" value="狂神好帅" maxlength="8" size="30"></p>
<!-密码框：input type="password"-->
    <p>密码：<input type="password" name="pwd"></p>
<!--单选框标签
input type="radio"
value:单选框的值
name:表示组-->
    <p>性别：
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="boy" name="sex"/>女
    </p>
<!--多选框
input type="checkbox"-->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby">敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">打游戏
    </p>
<!--按钮
input type="button":常规按钮
input type="image"：图片按钮
input type="submit"：提交按钮
input type="reset"：重置
-->
    <p>按钮：
        <input type="button" name="btn" value="点击变长">
        <input type="image" src="../resources/image/32.png">
    </p>
    <input type="submit">
    <input type="reset">
</form>
</body>
</html>

下拉框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action:表单提交的位置，可以是网站也可以是一个请求处理地址
method:post,get提交方式
get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
post-方式提交：比较安全，传输大文件
value:默认初始值
maxlength：最长能写几个字符
size：文本框的长度
-->
<form action="1.我的第一个网页.html" method="get">
    <p>名字：<input type="text" name="username" value="狂神好帅" maxlength="8" size="30"></p>
<!-密码框：input type="password"-->
    <p>密码：<input type="password" name="pwd"></p>
<!--单选框标签
input type="radio"
value:单选框的值
name:表示组-->
    <p>性别：
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="boy" name="sex"/>女
    </p>
<!--多选框
input type="checkbox"-->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby">敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">打游戏
    </p>
<!--按钮
input type="button":常规按钮
input type="image"：图片按钮
input type="submit"：提交按钮
input type="reset"：重置
-->
    <p>按钮：
        <input type="button" name="btn" value="点击变长">
        <input type="image" src="../resources/image/32.png">
    </p>
    <p>国家
        <select name="列表名称" id="">
        <option value="china">中国</option>
        <option value="us">美国</option>
        <option value="选项的值">瑞士</option>
        <option value="选项的值">印度</option>
        </select>
    </p>
    <input type="submit">
    <input type="reset">
</form>
</body>
</html>

文本域

<!--文本域
cols：行
rows：列
-->
    <p>反馈
    <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>

文件域

<!--文件域
input type="file" name="files"-->
    <p>
        <input type="file" name="files" >
        <input type="button" value="上传" name="upload">
    </p>

简单验证

<!--邮件验证-->
    <p>邮箱：
    <input type="email" name="email">
    </p>
    <!--URL-->
    <p>URL：
        <input type="url" name="url">
    </p>
    <!--数字验证-->
    <p>数字：
        <input type="number" name="num" max="100" min="0" step="1">
    </p>

搜索滑块

<!--滑块
input type="range"
-->
    <p>滑块：
    <input type="range" min="0" max="100" step="2">
    </p>
<!--搜索框-->
    <p>搜索：
        <input type="search" name="search">
    </p>

表单的应用

  • 隐藏域 hidden
  • 只读 readonly
  • 禁用 disabled
<!-- 增强鼠标可用性-->
    <p>
        <label for="mark">你点我试试</label>
        <input type="reset" id="mark">
    </p>

表单初级验证

  • 思考？为什么要进行表单验证
  • 常用方式
    • placeholder:提示性消息
    • required：非空判断
    • pattern：正则表达式（百度搜索）

标签：标签,元素,表单,HTML,修辞手法,注册,页面
From： https://www.cnblogs.com/sx-xiaoL/p/17487136.html

相关文章

  • HTML & CSS 学习总结
    @目录HTMLHTML标签HTML属性HTML表单CSSCSS选择器CSS声明CSS盒模型HTMLHTML（超文本标记语言）是一种用于创建网页的标记语言。它允许我们使用标签来描述网页的结构和内容。简单示例（如何使用标签来创建一个简单的网页）：<!DOCTYPEhtml><html><head><title>我的......
  • .net core使用Html模板转PDF文件并下载的业务类封装
    前言：我这里文件下载的模板选型优先考虑html模板，上手容易，前后端通用，有了模板后就需要有转换了，html转PDF采用第三方包：SelectPdf，下面是代码核心类： 1-PDFService:usingMicrosoft.AspNetCore.Hosting;usingSelectPdf;namespaceMeShop.Domain.PDF{///<summary......
  • Html中空格的区别和使用
    1.半角不断行空格(&nbsp;)作用：用于在HTML中插入一个空格。相同点：与普通空格相比，该空格不会被浏览器忽略或合并。注意事项：这个空格占据的宽度受字体影响很明显。在中文布局中可能会出现上下两行对齐差生偏差的问题。2.半角空格(&ensp;)作用：用于在HTML中插入一个半角空格。相同点：与"......
  • 视频直播源码，html2canvas 前端保存页面为图片
    视频直播源码，html2canvas前端保存页面为图片转换方法如下： /***将页面指定节点内容转为图片*1.拿到想要转换为图片的内容节点DOM；*2.转换，拿到转换后的canvas*3.转换为图片*///生成局部图片GenerateImg(){ letelement=this.$refs.canvasImgObj; //console.warn(el......
  • html页面解析
    getElementsByTagName和getElementsByClassName这两个方法查找多个dom元素，返回的是htmlcollection类型，是伪数组而不是真数组，故不能使用数组的方法。我们可以使用数组原型配合slice方法，利用call，apply，bind方法将伪数组转为真数组。varx=document.getElementById("main......
  • vue+html2canvas生成寄几想要的海报
    需求：点击弹出一个弹窗，其中是某个作品内容的海报，需要呈现作品的内容+二维码 思路：获取作品内容渲染到弹窗中，生成包含分享链接的二维码，将整个界面转为图片，用户可以长按保存，并扫描识别。 方案及步骤：1.引入html2canvas实现生成图片的功能npminstall--savehtml2canvas 2......
  • Qt+QtWebApp开发笔记（六）：http服务器html实现静态相对路径调用第三方js文件
    前言  前面做了一些交互，网页是直接通过html对response进行返回的，这里QtWebApp与传统的web服务器不同，传统的web服务器可以调用同级目录相对路径或者绝对路径下的js，而QtWebApp的httpserver是response返回当前页面的问题，默认是无法调用的。  为了解决调用一些依赖的如echarts......
  • 基于HTML5的chrome,firefox预览本地图片(扩展IE兼容)
    http://www.zhangxinxu.com/wordpress/?p=1923第一篇<scripttype="text/javascript"language="JavaScript"src="http://qingfengxia2.blog.163.com/blog/jquery.js"></script><scripttype="text/javascript"......
  • url欺诈--HTML5无刷修改url
     window.history.pushState({},0,'http://'+window.location.host+'/'+url); url--要修改的网址a标签欺诈<script>window.onclick=function(){       //触发单击事件，修改链接  document.links[0].setAttribute('href','http://google.com');}&......
  • html canvas写字并右对齐
    functionPaintText(x,y,color,size,text,toLeft){if(toLeft==undefined){toLeft=true;}y+=size;ctx.font="normal"+size+"pxarial";ctx.fillStyle=color;if(toLeft){ctx.fillText(text,x,y);}......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99