首页 > 其他分享 >9.前端——HTML详细

9.前端——HTML详细

时间：2024-05-06 19:57:10浏览次数：26  
标签：网页 标签 前端 元素 表单 HTML nbsp 详细 input

HTML详解

Hyper Text Markup Language (超文本标记语言)

HTML5

W3C(万维网联盟World Wide Web Consortium)

国际中立性技术标准机构

W3C标准包括

  1. 结构化标准语言（HTML，XML）
  2. 表现标准语言（CSS）
  3. 行为标准（DOM，ECMAScript）

网页基本结构

<!--网页基本结构-->
<!--DOCTYPE：告诉浏览器，使用什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!-- head标签代表网页头部-->
<head>
<!--meta描述性标签，它用来描述我们网站的一部分信息-->
<!--    mate一般做SEO-->
    <meta charset="UTF-8">
    <meta name = "keywords" content="Bob">
    <meta name = "description" content="Bob学java">

<!--title网页标题-->
    <title>我的第一个网页</title>
</head>
<!--body标签代表网页主题-->
<body>
Hello,world!
</body>
</html>

网页基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--标题标签<h1></h1>-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!--段落标签 p+tab键自动补全-->
<p>两只老虎    两只老虎</p>
<p>跑得快       跑得快</p>
<p>一只没有耳朵     一只没有尾巴</p>
<p>真奇怪      真奇怪</p>
<!--水平线标签<hr/>-->
<hr/>
<!--换行标签 <br/>-->
两只老虎    两只老虎<br/>
跑得快       跑得快<br/>
一只没有耳朵     一只没有尾巴<br/>
真奇怪      真奇怪<br/>
<!--粗体，斜体-->
粗体：<strong> i love you </strong>
<br/>
斜体：<em> i love you </em>
<br/>
<!--特殊符号-->
空  格
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<br>
&gt;大于号
<br>
&lt;小于号
<br>
&copy;版权所属Bob

<!--
特殊符号记忆方式
&  ;
-->
</body>
</html>

图像标签

常见图像格式：JPG，GIF，PNG，BMP

< img src = "path" alt = "text" title="text" width = "x" height= "y">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--img学习
src:图片地址 相对地址，绝对地址（必填）
    ../  上一级目录
alt:图片名字（必填）
title:悬停文字
width：宽
height：高
-->
<img src="../resources/image/1.png" alt="Bob" title="悬停文字" width="300" height="300">
<!--链接跳转-->
<a href="4.链接标签.html#down "target="_blank">到另一个网页的底部</a>
</body>
</html>

链接标签

链接文本或图像

  1. 文本超链接
  2. 图像超链接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<!--使用id作为标记-->
<a id="top">顶部</a>
<!--a标签
herf:必填，表示要跳转到哪个页面
target:表示窗口在哪里打开
    _blank:在新的标签打开，不会覆盖该页面
    _self:在自己的网页打开，覆盖该页面（默认的）
-->
<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面一</a>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a>
<br>
<!--图像跳超链接-->
<a href="1.我的第一个网页.html\">
    <img src="../resources/image/1.png" alt="Bob" title="悬停文字" width="300" height="300">
</a>


<p><a href="1.我的第一个网页.html\">
    <img src="../resources/image/1.png" alt="Bob" title="悬停文字" width="300" height="300">
</a></p>
<!--锚链接
1.需要一个标记
2.跳转到标记
#
-->
<a href="#top">回到顶部</a>
<a id="down">底部</a>

<!--功能性链接
邮件链接：mailto:
-->
<br>
<a href="mailto:[email protected]">点击联系我</a>

</body>
</html>

行内元素和块元素

  1. 块元素：无论内容多少，该元素只占一行
  2. 行内元素：内容撑开宽度，左右都是行内元素的可以排在一行

列表

列表分类：

  • 有序列表
  • 无序列表
  • 自定义列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--有序列表(试卷，问答等)-->
<ol>
    <li>java</li>
    <li>python</li>
    <li>c/c++</li>
    <li>前端</li>
</ol>
<!--无序列表(导航，侧边栏)-->
<br>
<br>
<ul>
    <li>java</li>
    <li>python</li>
    <li>c/c++</li>
    <li>前端</li>
</ul>
<!--自定义列表
dl：标签
dt：列表名称
dd：列表内容

公司网站底部
-->

<dl>
    <dt>学科</dt>
    <dd>java</dd>
    <dd>python</dd>
    <dd>c/c++</dd>
    <dd>前端</dd>

    <dt>姓名</dt>
    <dd>Bob</dd>
    <dd>Mike</dd>
    <dd>ZS</dd>
    <dd>HABa</dd>
</dl>
</body>
</html>

image-20240506093912067

表格标签

表格：

  1. 简单通用
  2. 结构稳定

结构：

  • 单元格
  • 行
  • 列
  • 跨行
  • 跨列
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--表格table
行 tr
列 td
border:边框 宽度 1px

-->
<table border="1px">
    <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>

媒体元素

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

image-20240506095820948

页面结构分析

  • header：网页头部
  • footer：网页脚部
  • section：网页主体
  • 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>

image-20240506100414038

iframe内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<iframe src="//player.bilibili.com/player.html?aid=1703349942&bvid=BV1yT421272W&cid=1508892156&p=1"  scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>-->

    
<!--iframe 内联框架
src：引用页面地址
w-h：宽-高
name：框架标识名
-->

<iframe src="" name="hello" frameborder="0"width="500px"height="500px"></iframe>
<a href="https://www.cnblogs.com/zuojiawang" target="hello">点击跳转</a>
</body>
</html>

表单post和get提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!--表单from
action:表单提交的位置，可以是网站，也可以是一个请求处理的地址
method：post，get提交方式
get方式提交：可以在url中看到我们提交的内容，高效不安全
post:比较安全，传输大文件
-->
<form action="1.我的第一个网页.html" method="post">
<!--文本输入框：input type = "text"-->
    <p>名字：<input type="text" name="username"></p>
<!--密码框：input type="password"-->
    <p>密码：<input type="password" name="pwd"></p>
<!--submit:提交 reset:重置-->
<p>
    <input type="submit">
    <input type="reset">
</p>
</form>
</body>
</html>

image-20240506103037776

image-20240506103108133

表单

  1. 文本框 input/ text
  2. 单选框 多选框 input/ radio/checkbox
  3. 按钮 input/button/image/submit/reset
  4. 下拉框 select-option
  5. 文本域 input/textarea
  6. 文件域 input/file
  7. 邮箱验证 input/email
  8. url input/url
  9. 滑块 input/range
  10. 搜索框 input/search
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!--表单from
action:表单提交的位置，可以是网站，也可以是一个请求处理的地址
method：post，get提交方式
get方式提交：可以在url中看到我们提交的内容，高效不安全
post:比较安全，传输大文件
-->
<form action="1.我的第一个网页.html" method="get">
<!--文本输入框：input type = "text"
value:默认初始值
maxlength：最长可写字符
size=“30”：文本框的长度
-->
    <p>名字：<input type="text" name="username"value="Bob帅" size="30"></p>
<!--密码框：input type="password"-->
    <p>密码：<input type="password" name="pwd"></p>
<!--submit:提交 reset:重置-->

<!--单选框标签
input type = "radio"
value:单选框的值
name:表示组
checked:默认勾选
-->
    <p>性别
        <input type="radio" value="boy" name="sex"checked/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>
<!--多选框
input type="checkbox"
-->
    <p>爱好
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby"checked>敲代码
        <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>按钮1
        <input type="button" name="btn1" value="点击变长">
        <input type="image" src="../resources/image/1.png">
    </p>
<!--下拉框，列表框
-->
    <p>国家
        <select name="列表名称" >
            <option value="china" selected>中国</option>
            <option value="us">美国</option>
            <option value="ruishi">瑞士</option>
            <option value="faguo">法国</option>
        </select>
    </p>
<!--文本域
cols="50" rows="2" 行列
-->
    <p>反馈
        <br>
        <textarea name="textarea" cols="10" rows="2"></textarea>
    </p>
<!--文件域
input type="file" name="files"
-->
    <p>文件域
        <input type="file" name="files">
        <input type="button" name="upload" value="上传">
    </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>
<!--滑块-->
    <p>音量
        <input type="range" name="voice" min="0" max="100" step="2">
    </p>
<!--搜索框-->
    <p>搜索
        <input type="search" name="search">
    </p>


    <p>按钮2
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>
</form>
</body>
</html>

image-20240506192607162

表单的应用

readonly 只读

disabled 禁用

hidden 隐藏域

<!--增强鼠标可用性-->
    <p>
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>

表单初级验证

placeholder 提示信息

required 非空判断

pattern 正则表达式 正则表达式

    <p>名字：<input type="text" name="username" placeholder="请输入用户名" required value="Bob帅" size="30" ></p>
<!--密码框：input type="password"-->
    <p>密码：<input type="password" name="pwd" placeholder="请输入密码" value="123456" ></p>


<!--pattern
    https://www.jb51.net/article/96272.htm
-->
    <p>自定义邮箱
        <input type="text" name="diymail" pattern="">
    </p>

标签：网页,标签,前端,元素,表单,HTML,nbsp,详细,input
From： https://www.cnblogs.com/zuojiawang/p/18175734

相关文章

  • 前端埋点数据采集（二）mock应用系统10万条前端埋点数据
    前端埋点数据采集（二）mock应用系统10万条前端埋点数据上一期我们分享了前端埋点数据采集（一）采集系统架构设计我们说应用系统的数据，采集到大数据平台来，然后再到数仓。但是很多实际场景是应用系统、大数据平台、数仓平台各自并没有完成系统的搭建和开发。 假设现在一个场景是：应用......
  • vue怎么设置html不缓存 但是js、css等文件做缓存
    在 Vue.js 项目中，我们通常使用 webpack 打包工具进行编译构建，其中 HTML 文件通常不做缓存，而 JS、CSS 文件需要做缓存。这可以通过 webpack 的配置实现。下面是针对你的问题的步骤：1. 打开 webpack 的配置文件 webpack.config.js 或者 webpack.prod.config.js（如果你......
  • 前端埋点数据采集（一）采集系统架构设计
    前几次内容分享，我们逐步搭建了传统hadoop大数据平台、zookeeper、kafka集群等。 假设现在一个场景是：今天产品经理提了1个优先级极高的需求：应用系统前端埋点数据都需要被采集到大数据平台hadoop上。 “前端埋点数据的采集系列”，主要分为以下5个部分：一、采集系统架构设计二......
  • HTML & CSS – Styling Scrollbar
    前言Scrollbar能styling的东西不多，但有时候不得不styling。这里记入我自己在项目中修改过的scrollbar经历。 GmailScrollbar Gmail的scrollbar就改过style。   ......
  • 前端实现文件下载(a标签文件下载）
    一、链接地址下载constlink=document.createElement('a');consturl=`url下载链接地址`link.href=url;link.setAttribute('download','文件名');//window下载窗口名称自定义document.body.appendChild(link);link.click();document.body.removeChild(lin......
  • JS转义html编码
    两个方法：1、利用用浏览器内部转换器实现html转义；2、用正则表达式实现html转义； varHtmlUtil={/*1.用浏览器内部转换器实现html编码（转义）*/htmlEncode:function(html){//1.首先动态创建一个容器标签元素，如DIVvartemp=docum......
  • 【详细教程】手把手教你开通YouTube官方API接口(youtube data api v3)
    一、背景调查1.1youtube介绍众所周知，youtube是目前全球最大的视频社交平台，该平台每天产生大量的视频内容，涵盖各种主题和类型，从音乐视频到教育内容，再到娱乐节目和新闻报道等。YouTube的用户群体也非常广泛，包括了各个年龄段、地区和兴趣爱好的人群。由于其庞大的用户基数和丰富的......
  • 前端框架开发之Niu框架——从零学框架的小白
    起因：从2018年6月一直到我重新提笔，6年时间。这六年时间，我见证了IT的兴衰，见证了小众框架LayUI框架的重新更新，见证了vue、angular、react等框架的主流。----博客园老牛大讲堂 初衷：今年我突发灵感，想要设计一个网站，作为程序员却"提笔忘字"，就连最基本的css也变得陌生，我网上翻找大量......
  • 为什么我不选择React、Vue.js作为SAAS网站的前端框架
    引言“道”在中国哲学中，是一个重要的概念，表示“终极真理”。“道”这一概念，不单为哲学流派诸子百家所重视，也被宗教流派道教等所使用。大道至简的意思就是大道理是极其简单的，简单到一两句话就能说明白。所谓“真传一句话，假传万卷书”。正文在开启独立创作之路时，我也考虑过各种......
  • html中a标签的下划线怎么去掉
    如何在HTML中去除超链接的下划线在HTML中，超链接（<a></a>标签）通常带有一个默认的下划线。要去除下划线，可以使用以下方法：使用CSS最常用的方法是使用CSS样式表。在部分添加以下CSS规则：<codeclass="<astyle='color:#f60;text-decoration:underline;'href="https:......

赞助商

阅读排行

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

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

Copyright © 2020-2023 IPS99 版权所有 IPS99