《html自用使用指南》--基于w3School实践

1.基础标签

  1. 文本输入时，在编辑器中的换行，多个空格，都被编辑器看作一个空格

    <p>
这个段落
在源代码       中
包含   许多行
但是      浏览器
忽略了  它们。
</p>

结果：这个段落 在源代码 中 包含 许多行 但是 浏览器 忽略了 它们。

  1. 换行符：<br/>

    <br> 用于换行，<br/> 标签是 XHTML 规范中的自闭合标签形式，在HTML中同样有效。

  2. align:属性值

    值描述
    left左对齐内容。
    right右对齐内容。
    center居中对齐内容。
    justify对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）。

  3. bgcolor:属性值

    <body>、 <table>、<tr>、<td> 等

  4. 水平线：<hr>

  5. 注释：<!--这是一段注释。注释不会在浏览器中显示。-->

  6. HTML 链接

    • HTML 链接是通过 标签进行定义的。
    <a href="http://www.w3school.com.cn">This is a link</a>

    • 新页中打开链接，添加属性target="_blank"即可，指定某个页面打开链接tarfet="页面名"

    • 链接跳转至本页面另一个位置：

      https://www.w3school.com.cn/example/html/link.html#C4此链接和下面的代码是一样的作用，网页会去寻找name属性为C4的行

      <a href="#C4">查看 Chapter 4。</a>
<-->跳转到名为C4的位置处</--><h2><a name="C4">Chapter 4</a></h2>

    • base：位于head中

      实现默认链接和默认打开方式(新标签页打开)

      <base href="https://www.w3school.com.cn/" target="_blank">

  7. HTML 图像

    • HTML 图像是通过 标签进行定义的。
    <img src="w3school.jpg" width="104" height="142" />

    • 将<img>标签塞进<a>标签中间就是图片链接

    • 可从网络或本地导入图片

    • 如果图像小于页面，图像会进行重复

    • 具有align属性，相对于它的上一层（它的箱子），同时默认情况下是bottom:

      image-20240423161713851

    • 放大或缩小图片，使用：

      <img src="/i/eg_mouse.jpg" width="50" height="50">

    • alt(img属性)：当图片显示不出时显示文本

      <img src="/i/eg_goleft123.gif" alt="向左转" />

image-20240423162550397

  • image也具有border属性

  1. 文本格式化（正常文本的各种亲兄弟,可在p中使用）

    <b></b> 加粗blod
<strong></strong> 加粗
<big></big> 加大
<em></em> 强调，类似于斜体
<small></small>变小

  2. 预格式文本（保留空格和换行）：

    可用于展示代码

    <pre>
for i = 1 to 10print i
next i
</pre>

  3. 地址标签（貌似没什么用）：

    <address></address>

  4. 缩略词语（鼠标移位显示完整信息）：abbr/acronym

    <abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>

    image-20240422163553023

  5. 反向文本（有毛用）：

    <bdo dir="rtl"> bi-directional override (bdo)</bdo>

  6. 引用

    <blockquote>
用 blockquote 元素，浏览器会插入换行和外边距，而 q (短引用)元素不会有任何特殊的呈现
</blockquote>

  7. 删除字效果和下划线：

    <del>二十</del> <ins>十二</ins>

2.HTML框架

  1. 垂直框架（竖着分）：把多个html塞一块(不需要body)

    <frameset cols="50%,50%"><frame src="/example/html/frame_a.html"><frame src="/example/html/frame_b.html"><noframes><body>您的浏览器无法处理框架！</body></noframes></frameset>

  2. 水平框架（横着分）：把多个html塞一块

    在上面的两个方向的基础上可以套娃重复塞框架就可以实现如下效果：

image-20240422165955551

  1. 框架的一些用法：

    • noresize属性：noresize="noresize"可以实现这个框架被锁死，不能拉动它的边框

    • 实现导航效果：

      左边的列实现导航，其内部实现是多个链接，右边

      <html><frameset cols="30%,*"><frame src="/demo/html/content.html"><frame src="/example/html/frame_a.html" name="showframe"></frameset></html>

  2. 内联框架：框架塞到网页里。

    <iframe src="/example/html/frame_a.html" name="showframe">

3.HTML表格

  1. border（table属性）：设置边界粗细

  2. th默认加粗居中

  3. rowspan（行重合），colspan（列重合）（table属性）：定义跨行或跨列的表格单元格

    <tr><th>姓名</th><th colspan="2">电话</th>
</tr>
<tr><td>Bill Gates</td><td>555 77 854</td><td>555 77 855</td>
</tr>

    image-20240423142433480

  4. 表格内还可以套表格，列表

  5. cellpadding（table属性）:单元格内容与其边框之间的空白

    image-20240423143100948

  6. cellspacing(table属性):单元格之间的距离(border决定的是外边界的粗细)

image-20240423143331099image-20240423143408228

  1. bgcolor/background(table属性):table背景颜色和背景图片

    bgcolor直接贴颜色，

    而background:background="/i/eg_bg_07.gif">可以加载图片

  2. frame(table属性):

    默认是box

    <table frame="box">
<table frame="above">只有上线
<table frame="below">只有下线
<table frame="hsides">只有上下两线
<table frame="vsides">只有左右两线

    HTML 列表实例

    1. ul/li:无序列表
      在这里插入图片描述

    2. ol/li:有序列表

      • start属性：实现列表从指定数字开始

        <ol start="50"><li>咖啡</li><li>牛奶</li><li>茶</li>
</ol>

在这里插入图片描述

  1. type(ul属性)：

    无序

    • disc
    • circle
    • square
      在这里插入图片描述

    有序

    <ol type="A">
<ol type="a">
<ol type="I">
<ol type="i">

  2. 嵌套列表（没什么可说的，根据上面的套娃就可以了）

  3. 定义列表（貌似是给个标题，给个对其的解释）

    <h2>一个定义列表：</h2><dl><dt>计算机</dt><dd>用来计算的仪器 ... ...</dd><dt>显示器</dt><dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

在这里插入图片描述

4.HTML 表单与输入实例

  • form似乎只是一个范围框

  • <input></input>

  1. text文本域

    <form>
名：<input type="text" name="firstname">
</form>

在这里插入图片描述

  1. password密码域

    <input type="password" name="password">

  2. checkbox复选框

    <input type="checkbox" name="Bike">，name指的是该项的名字

  3. radio单选

    <input type="radio" name="组名" value="取值" />（其中name和value为必须值）

    • 正常情况下，所有单选框都无选中，若想在默认情况下，让第一个单选框选中

      checked属性：

      <input type="radio" checked="checked" name="Sex" value="male" />

  4. select下拉列表，表单元素

    格式：

    <form>
<select name="cars">
<option value="品牌1">1</option>
<option value="品牌2">2</option>
</select>
</form>

在这里插入图片描述

  • 在默认情况下，让第2个选项被选中
<option value="品牌2" selected="selected">2</option>

  1. textarea文本框：(rows和cols非必须)表单元素

    <textarea rows="10" cols="30">
我是一个文本框。
</textarea>

  2. button按钮：

    <input type="button" value="Hello world!">

    image-20240423154456506

  3. 表单边框设置

      <fieldset><legend>健康信息</legend>身高：<input type="text" />体重：<input type="text" /></fieldset>

    image-20240423155248598

  4. action(form属性)：传输数据,表单升级

    <form action="/demo/demo.asp">
First name:
<input type="text" name="firstname" value="示例:Mickey">
<br>
Last name:
<input type="text" name="lastname" value="示例:Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

在这里插入图片描述

  • 表单数据会被发送到名为 demo.asp 的页面

  • method（form属性） :指定提交form数据时使用的 HTTP 方法。

    表单数据可以作为 URL 变量（使用 method="get"）或作为HTTP post 事务（使用 method="post"）发送。

    提交表单数据时，默认的HTTP方法是 GET。

  1. 用表单发邮件（似乎没什么用）

    <form action="email.com" method="post" enctype="text/plain">
姓名：<br />
<input type="text" name="name" value="yourname" size="20">
<br />
电邮：<br />
<input type="text" name="mail" value="yourmail" size="20">
<br />
内容：<br />
<input type="text" name="comment" value="yourcomment" size="40">
<br /><br />
<input type="submit" value="发送">
<input type="reset" value="重置"></form>
    • enctype 属性规定在将表单数据发送到服务器之前如何对其进行编码。

  2. reset，重置

    <input type="reset" value="重置">

    image-20240423161031937以按钮的形式呈现

进阶小用法

  1. 图片地图

    <img
src="/i/eg_planets.jpg" usemap="#planetmap" 指向的是map的name属性而非id/><map name="planetmap" ><area
shape="circle"   圆形
coords="180,139,14"
href ="/跳转链接"
target ="_blank"/><area
shape="rect"      矩形
coords="0,0,110,260" 左上坐标和右下坐标
href ="/example/html/sun.html"
target ="_blank"/></map>
    • area包括在map中，是map中设立的跳转范围

  2. 插入脚本

    <body><script type="text/javascript">
document.write("<h1>Hello World!</h1>")
</script> </body>

  3. 告诉浏览器的一些基本信息（位于head）

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/2455.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

STM32H750时钟频率和功耗以及RTC功能测试

STM32H750时钟频率和功耗以及RTC功能测试

STM32H750时钟频率和功耗和RTC功能测试 &#x1f4cc;相关篇《STM32H750片外QSPI启动配置简要》 ✨在使用STM32CubeMX修改STM32H750时钟树参数时&#xff0c;如果使用软件自动求解&#xff0c;这是一个非常耗时的操作&#xff0c;有时候还不一定成功&#xff0c;还是推荐使用手…
阅读更多...
《ElementPlus 与 ElementUI 差异集合》el-select 差异点，如：高、宽、body插入等

《ElementPlus 与 ElementUI 差异集合》el-select 差异点，如：高、宽、body插入等

宽度 Element UI 父元素不限制宽度时&#xff0c;默认有个宽度 207px&#xff1b; 父元素有固定宽度时&#xff0c;以父元素宽度为准&#xff1b; Element Plus 父元素不限制宽度时&#xff0c;默认100%&#xff1b; 父元素有固定宽度时&#xff0c;以父元素宽度为准&#x…
阅读更多...
CDN、边缘计算与云计算：构建现代网络的核心技术

CDN、边缘计算与云计算：构建现代网络的核心技术

在数字化时代&#xff0c;数据的快速传输和处理是保持竞争力的关键。内容分发网络&#xff08;CDN&#xff09;、边缘计算和云计算共同构成了现代互联网基础架构的核心&#xff0c;使内容快速、安全地到达用户手中。本文将探讨这三种技术的功能、相互关系以及未来的发展趋势。 …
阅读更多...
使用表格法插入公式和编号

使用表格法插入公式和编号

如何将公式和编号优雅地插入到论文当中呢&#xff1f; 首先插入一个1行2列的表格 调整一下 输入公式方法一&#xff1a;感觉墨迹公式挺好用的&#xff0c;word自带的 输入公式方法二&#xff1a;图片转LATEX代码 这个方法更快 分享一个公式识别网站 图片识别得到LATEX代码&…
阅读更多...
atlas 500容器（ubuntu20.04）搭建

atlas 500容器（ubuntu20.04）搭建

1.docker 及环境搭建略 2.宿主机驱动安装略 3.宿主机中能正确使用npu-smi 4.docker 拉取略 5.docker 容器启动 docker run -itd --device/dev/davinci0 --device/dev/davinci_manager --device/dev/devmm_svm --device/dev/hisi_hdc -v /run/board_cfg.ini:/run/b…
阅读更多...
动态创建链表 之尾插法

动态创建链表 之尾插法

4.代码四 尾插法&#xff1a;其实与头插法相差不差&#xff0c;在尾插法函数中insertBehind&#xff08;&#xff09;&#xff0c;传过来的head尽量不变&#xff0c;struct Test *p;创建临时指针p head; 同样的&#xff0c;也是先判断 传过来的head 是否等于 0&#xff1b;等…
阅读更多...
Pycharm远程连接实验室服务器Conda环境配置

Pycharm远程连接实验室服务器Conda环境配置

如何配置Pycharm和远程服务器 这类博客较多&#xff0c;参考内容 https://blog.csdn.net/fengbao24/article/details/125515542 Python解释器选择&#xff08;conda3&#xff09; 1. Settings -> Add Interpreter -> On SSH 注意&#xff0c;这里的SSH需要在你把远程…
阅读更多...
OpenHarmony南向开发案例：【 智能家居中控】

OpenHarmony南向开发案例：【 智能家居中控】

应用场景简介 智能家居。 今天打造的这一款全新智能家庭控制系统&#xff0c;凸显应用在智能控制和用户体验的特点&#xff0c;开创国内智能家居系统体验新局面。新的系统主要应用在鸿蒙生态。 工程版本 系统版本/API版本&#xff1a;OpenHarmony SDK API 8IDE版本&#xf…
阅读更多...
c++的策略模式，就是多态

c++的策略模式，就是多态

一、定义&#xff1a; 策略模式定义了一系列的算法&#xff0c;并将每一个算法封装起来&#xff0c;而且使它们还可以相互替换。 策略模式让算法独立于使用它的客户而独立变化。 二&#xff0c;核心 抽象策略&#xff08;抽象基类&#xff09;&#xff08;Strategy&#xff09…
阅读更多...
酷开科技逐步为用户构建健全的智慧家庭生活场景

酷开科技逐步为用户构建健全的智慧家庭生活场景

大规模与精细化人群技术则是通过大量的计算能力和精细化的运营能力&#xff0c;建立用户专属数据储存区域&#xff0c;使得用户在使用不同电视的观影偏好和兴趣能够能够得以延续。 不拘泥于自有品牌终端数量&#xff0c;酷开系统除了集成在创维电视上&#xff0c;还服务于飞利…
阅读更多...
idea上传项目到gitee（码云）

idea上传项目到gitee（码云）

1、打开码云&#xff0c;新建仓库 2、创建 3、这就是创建成功的页面 4、复制仓库地址&#xff0c;后面需要用到 2、打开我们的项目&#xff1a;例如我现在的项目 1、idea创建git仓库 2、选择我们项目文件夹的目录 3、查看文件是否变色&#xff0c;变色表示成功了 4、添加到缓…
阅读更多...
关于WSL2下安装的mysql sever服务，如何在host或外部连接使用的问题

关于WSL2下安装的mysql sever服务，如何在host或外部连接使用的问题

快速提示&#xff1a; 在wsl2下&#xff0c;不允许在外部使用root来登录mysql,所以必须使用非root的帐号来登录 所以&#xff0c;如果明白如何做了&#xff0c;下面的步骤就不必看了。 下面是&#xff0c;给小白用户的教程&#xff1a; 步骤 1: 首先&#xff0c;使用 WSL 命令…
阅读更多...
0元实现网站HTTP升级到HTTPS（免费https证书）

0元实现网站HTTP升级到HTTPS（免费https证书）

HTTPS就是在HTTP的基础上加入了SSL&#xff0c;将一个使用HTTP的网站免费升级到HTTPS主要包括以下几个步骤&#xff1a; 1 获取SSL证书 永久免费的https证书申请通道https://www.joyssl.com/certificate/select/free.html?nid16 免费的SSL证书同样能实现HTTPS&#xff0c;国…
阅读更多...
uniapp同步开发h5+小程序双平台踩坑记录

uniapp同步开发h5+小程序双平台踩坑记录

最近做项目的需求是先发布h5&#xff0c;后续再开发上线微信小程序版&#xff0c;自然我选择了uniapp多平台打包&#xff0c;过程中也踩了一些坑。本篇文章记录了使用uniapp开发h5的注意事项&#xff0c;及打包成小程序需要兼容改动的内容。 1.需要在pages.json注册页面路由 在…
阅读更多...
SpringBoot内容协商机制（就是接受数据的类型如json，xml）

SpringBoot内容协商机制（就是接受数据的类型如json，xml）

目录 一、基于请求头的内容协商机制 二、基于请求参数的内容协商机制 一、基于请求头的内容协商机制 如果我们的Java服务为浏览器和安卓手机同时提供服务&#xff0c;浏览器期望接受的请求是JSON格式&#xff0c;安卓客户端期望接收的请求是XML格式&#xff0c;这个时候是否需…
阅读更多...
C++中的智能指针

C++中的智能指针

C中的智能指针 文章目录 C中的智能指针1.为什么需要智能指针&#xff1f;2.智能指针的类型2.1 std::shared_ptr2.2 std::unique_ptr2.3 std::weak_ptr Reference 笔者在学习ROS2的过程中&#xff0c;遇到了std::make_shared这种用法&#xff0c;一眼看不懂&#xff0c;才发现笔…
阅读更多...
vue2使用过滤器实现菜单栏文字动态显示

vue2使用过滤器实现菜单栏文字动态显示

文章目录 前言一、过滤器filters1.data数据2.beforeCreate 二、菜单栏文字动态显示 前言 左侧菜单栏有缩进&#xff0c;所以不同级别的菜单名可显示的文字数不同。顶部菜单栏是下拉框&#xff0c;所以文字是固定的 一、过滤器filters 由于filters不能使用this为undefined&…
阅读更多...
Java 网络编程之TCP(三)：基于NIO实现服务端，BIO实现客户端

Java 网络编程之TCP(三)：基于NIO实现服务端，BIO实现客户端

前面的文章&#xff0c;我们讲述了BIO的概念&#xff0c;以及编程模型&#xff0c;由于BIO中服务器端的一些阻塞的点&#xff0c;导致服务端对于每一个客户端连接&#xff0c;都要开辟一个线程来处理&#xff0c;导致资源浪费&#xff0c;效率低。 为此&#xff0c;Linux 内核…
阅读更多...
【CV】opencv特征匹配算法

【CV】opencv特征匹配算法

特征匹配是计算机视觉领域中的一项关键任务&#xff0c;它用于在不同图像中寻找相似的特征点&#xff0c;并将它们进行匹配。这些特征点可以是图像中的角点、边缘、斑点等&#xff0c;在不同的图像中可能因为旋转、缩放、光照变化等因素发生变化。 在OpenCV中&#xff0c;提供…
阅读更多...
华为数通HCIA ——企业网络架构以及产品线

华为数通HCIA ——企业网络架构以及产品线

一.学习目标&#xff1a;精讲网络技术&#xff0c;可以独立搭建和维护中小企业网络&#xff01; 模拟器&#xff08;华为方向请安装ENSP&#xff0c;Ensp-Lite已有安装包&#xff0c;号称功能更加完善-这意味着要耗费更多的系统资源但是仅对华为内部伙伴申请后方可使用&#x…
阅读更多...
最新文章

Copyright @ 2022~2023