《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 10
     print 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.mfbz.cn/a/578139.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

惊！文件夹突变文件，揭秘背后原因及数据恢复秘籍

惊！文件夹突变文件，揭秘背后原因及数据恢复秘籍

在使用电脑时&#xff0c;我们有时会遇到一些意想不到的问题。比如&#xff0c;你可能会突然发现&#xff0c;原本存储着大量重要资料的文件夹&#xff0c;竟然变成了一个无法打开的文件。这种情况听起来可能有些匪夷所思&#xff0c;但它确实存在&#xff0c;且给用户带来了巨…
阅读更多...
微信收款码0.2费率开通

微信收款码0.2费率开通

很多人想申请低手续费率的收款码不知从何下手&#xff0c;在参考了大量博客教学之后&#xff0c;终于搞懂了详细流程以及注意事项。在此记录一下。我申请的是一个只需要0.2%费率的微信收款码&#xff0c;申请时间是2022年2月12日。申请之前只需要准备营业执照和法人身份z&#…
阅读更多...
用不了ChatGPT？快试试免费又强大的Anthropic Claude

用不了ChatGPT？快试试免费又强大的Anthropic Claude

一、Claude 简介 Anthropic 官方&#xff1a; https://www.anthropic.com/product Claude 是最近新开放的一款 AI 聊天机器人&#xff0c;是世界上最大的语言模型之一&#xff0c;比之前的一些模型如 GPT-3 要强大得多&#xff0c;因此 Claude 被认为是 ChatGPT 最有力的竞争…
阅读更多...
25计算机考研院校数据分析 | 南京大学

25计算机考研院校数据分析 | 南京大学

南京大学&#xff08;Nanjing University&#xff09;&#xff0c;简称“南大”&#xff0c;是中华人民共和国教育部直属、中央直管副部级建制的全国重点大学&#xff0c;国家首批“双一流”、“211工程”、“985工程”重点建设高校&#xff0c;入选首批“珠峰计划”、“111计划…
阅读更多...
Perfectly Clear Workbench for mac/win：让图像清晰不再是难题

Perfectly Clear Workbench for mac/win：让图像清晰不再是难题

在数字时代&#xff0c;图像处理已经成为我们日常生活和工作中的必备技能。无论是专业摄影师&#xff0c;还是业余爱好者&#xff0c;都渴望拥有一款能够轻松提升图像质量的软件。今天&#xff0c;我要向大家推荐一款卓越的图像清晰处理软件——Perfectly Clear Workbench&…
阅读更多...
NAT网络地址转换实验（华为）

NAT网络地址转换实验（华为）

思科设备参考&#xff1a;NAT网络地址转换实验&#xff08;思科&#xff09; 一&#xff0c;技术简介 NAT&#xff08;Network Address Translation&#xff09;&#xff0c;即网络地址转换技术&#xff0c;是一种在现代计算机网络中广泛应用的技术&#xff0c;主要用于有效管…
阅读更多...
将游戏界面与注册/登录界面连接到一起

将游戏界面与注册/登录界面连接到一起

一、 导包 在注册页面中导入一个import subprocess包 二、 使用代码将其连接到一起 在循环中加入下面这一行代码&#xff0c;用来实现效果 subprocess.run(["python", "game代码.py"]
阅读更多...
容器安全-镜像扫描

容器安全-镜像扫描

前言 容器镜像安全是云原生应用交付安全的重要一环&#xff0c;对上传的容器镜像进行及时安全扫描&#xff0c;并基于扫描结果选择阻断应用部署&#xff0c;可有效降低生产环境漏洞风险。容器安全面临的风险有&#xff1a;镜像风险、镜像仓库风险、编排工具风险&#xff0c;小…
阅读更多...
【图解计算机网络】TCP协议三次握手与四次挥手

【图解计算机网络】TCP协议三次握手与四次挥手

TCP协议三次握手与四次挥手 三次握手流程为什么是三次握手&#xff0c;而不是两次或四次四次挥手流程TIME_WAIT 为什么要等待 2MSL为什么握手是三次&#xff0c;挥手是四次&#xff1f; 三次握手流程 首先是客户端&#xff08;也就是我们的浏览器&#xff09;发送一个SYN标志位…
阅读更多...
在Jupyter notebook中添加虚拟环境

在Jupyter notebook中添加虚拟环境

通常我们打开Jupyter notebook&#xff0c;创建一个新文件&#xff0c;只有一个Python3&#xff0c;但是我们也会想使用自己创建的虚拟环境&#xff0c;很简单仅需几部即可将自己的conda环境添加到jupyter notebook中。 1. 创建并激活conda环境&#xff08;已有可跳过&#xf…
阅读更多...
Datasophon1.2.1集成Dinky1.0.1

Datasophon1.2.1集成Dinky1.0.1

Dinky 下载地址: https://github.com/DataLinkDC/dinky/releases/tag/v1.0.1 Dinky 官网&#xff1a;https://www.dinky.org.cn/ 1.下载Dinky wget https://github.com/DataLinkDC/dinky/releases/download/v1.0.1/dinky-release-1.16-1.0.1.tar.gz mv dinky-release-1.16-1.…
阅读更多...
selenium入门篇（环境搭建、八大定位）

selenium入门篇（环境搭建、八大定位）

背景 Web自动化测现状 1. 属于 E2E 测试 2. 过去通过点点点 3. 好的测试&#xff0c;还需要记录、调试网页的细节 一、selenium环境搭建 一键搭建 pip3 install webdriver-helper 安装后自动的完成&#xff1a; 1. 查看浏览器的版本号 2. 查询操作系统的类型 …
阅读更多...
SOLIDWORKS Electrical 3D--精准的三维布线

SOLIDWORKS Electrical 3D--精准的三维布线

相信很多工程师在实际生产的时候都会遇到线材长度不准确的问题&#xff0c;从而导致线材浪费甚至整根线材报废的问题&#xff0c;这基本都是由于人工测量长度所导致的&#xff0c;因此本次和大家简单介绍一下SOLIDWORKS Electrical 3D布线的功能&#xff0c;Electrical 3D布线能…
阅读更多...
EasyV的可视化作品，没有对这行深入理解，搞不了如此漂亮。

EasyV的可视化作品，没有对这行深入理解，搞不了如此漂亮。

EasyV是我非常佩服的一家可视化服务商&#xff0c;作品涉猎广泛&#xff0c;经典而大气&#xff0c;贝格前端工场的可视化业务与之相比&#xff0c;还是有一定差距&#xff0c;向行业头部企业学习&#xff0c;分享出来一些给大家看下。
阅读更多...
海外http代理中的有效连通率是什么意思？

海外http代理中的有效连通率是什么意思？

随着互联网的发展&#xff0c;许多人需要使用代理服务器来访问海外网站或绕过地理限制&#xff0c;在选择一个可靠的海外HTTP代理时&#xff0c;了解其有效连通率是至关重要的。 本文将解释有效连通率的含义&#xff0c;并提供详细的测试步骤&#xff0c;帮助您评估一家IP代理…
阅读更多...
RabbitMQ工作模式(5) - 主题模式

RabbitMQ工作模式(5) - 主题模式

概念 主题模式&#xff08;Topic Exchange&#xff09;是 RabbitMQ 中一种灵活且强大的消息传递模式&#xff0c;它允许生产者根据消息的特定属性将消息发送到一个交换机&#xff0c;并且消费者可以根据自己的需求来接收感兴趣的消息。主题交换机根据消息的路由键和绑定队列的路…
阅读更多...
ARCGIS PRO3 三维模型OSGB转SLPK场景数据集

ARCGIS PRO3 三维模型OSGB转SLPK场景数据集

1.前言 因项目工作&#xff0c;需要将三维模型发布到arcgisserver上&#xff0c;但arcgisserver只支持slpk格式的模型&#xff0c;于是我开启了漫长的三维模型格式转换之旅&#xff0c;在这里记录下本人踩过的坑。 2.三维模型数据情况 2.1 模型大小&#xff1a;在20GB以上&a…
阅读更多...
高级IO｜从封装epoll服务器到实现reactor服务器｜Part2

高级IO｜从封装epoll服务器到实现reactor服务器｜Part2

项目复习&#xff1a;从封装epoll_server到实现reactor服务器(part2) 项目复习&#xff1a;从封装epoll_server到实现reactor服务器(part2) 基本结构搭建好为什么上面我们写的epoll的recv是不正确的&#xff1f;sock要封装了&#xff0c;要维护缓冲区封装epoll(1)继续先写tcp_…
阅读更多...
MATLAB 2024a软件下载安装教程

MATLAB 2024a软件下载安装教程

1-首先下载Matlab&#xff0c;以下迅雷云链接&#xff0c;里面有全版本的matlab&#xff0c;根据自己的需要下载即可&#xff0c;建议下载最新版的&#xff0c;功能会更多&#xff0c;当然内存也会更大。 迅雷云盘迅雷云盘https://pan.xunlei.com/s/VNgH_6VFav8Kas-tRfxAb3XOA…
阅读更多...
面试二十三、 strcpy 和memcpy 以及字符串和字符数组相互转换

面试二十三、 strcpy 和memcpy 以及字符串和字符数组相互转换

一、 strcpy 和memcpy 区别 strcpy 和 memcpy 都是浅拷贝操作&#xff0c;它们只是简单地将源数据复制到目标位置&#xff0c;而不会复制源数据所指向的内容。具体来说&#xff1a; strcpy 会复制源字符串的内容直到遇到null终止符&#xff0c;并将其复制到目标字符串中。但是…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站