HTML的学习记录

<br /> 标签在 HTML 页面中创换行符。

<hr /> 标签在 HTML 页面中创建水平线。

段落是通过 <p> 标签定义的。

 浏览器会自动地在段落的前后添加空行。(<p> 是块级元素)

文本格式


<b>This text is bold</b>字体加粗
<strong>This text is strong</strong>强调文本
<big>This text is big</big>字体加大
<em>This text is emphasized</em>定义文字斜体
<i>This text is italic</i>定义文字斜体
<small>This text is small</small>缩小文本
<sub>subscript</sub>下标
<sup>superscript</sup>上标

<pre>    </pre>预格式文本。

 <del>二十</del> <ins>十二</ins>    删除文本和下划线文本

 <abbr title="xxx">xxx</abbr> 定义缩写

 <address>  </address>定义地址

<bdo dir="rtl">  Here is some Hebrew text  </bdo>定义文字方向

<blockquote>定义从其他来源引用的节。
<dfn>定义项目或缩略词的定义。
<q>定义短的行内引用。
<cite>定义著作的标题。

css的引用:

h1{ }   直接修改h1部分

.head{ }  用class=“head” 来引用

#head{ } 用id=“head” 来引用

 去掉超链接的下划线

<h3><a href="#">这是一个超链接,未去掉下划线</a></h3> <h3><a href="#" style="text-decoration: none">这是一个超链接,去掉下划线</a></h3>

使用 name 属性创建 HTML 页面中的书签。

<a name="label">锚(显示在页面上的文本)</a>

在新的浏览窗口打开超链接

<a href="#" target="_blank">该链接会在新窗口中打开</a>

连接到同一个页面的不同位置

<a href="#c3">会跳转到name值为c3的位置</a>
<p name="c3">会跳转这个位置</p>

跳出框架

<a href="#" target="_top">会跳出框架</a>

超链接发送邮件

<a href="mailto:xxx@xxx?subject=内容">发送邮件</a>

 图像的插入:

<img src="url" alt="替换文本书属性,图片显示失败,则显示该文字">

图片位置的排列

<h2>未设置对齐方式的图像:</h2>
<p>图像 <img src ="#"> 在文本中</p>
<h2>已设置对齐方式的图像:</h2>
<p>图像 <img src="#" align="bottom"> 在文本中</p>
<p>图像 <img src ="#" align="middle"> 在文本中</p>
<p>图像 <img src ="#" align="top"> 在文本中</p>
<p>请注意,bottom 对齐方式是默认的对齐方式。</p>

<p><img src ="#" align ="left">带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
</p>
<p><img src ="#" align ="right">带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
</p>

改变 img 标签的 "height" 和 "width" 属性的值

<img src="#.jpg" width="50" height="50">

创建图像映像

<img src="images/02.jpg" border="0" usemap="#map" alt="map" />
//usemap的值必须与name相同,
<map name="map" id="map"><areashape="rect"//矩形区域coords="3689,261,3973,489"//像素区域href ="/images/01.jpg"target ="_blank"alt="Sun">
</map>

表格:

每个表格由 table 标签开始。
每个表格行由 tr 标签开始。
每个表格数据由 td 标签开始。

表格的表头使用 <th> 标签进行定义

border定义边框

 <caption>定义表格的标题</caption>

合并单元格

<td>的属性

<th rowspan="2">姓名</th>  姓名占两行
<th colspan="2">电话</th>  电话占两列
<h4>横跨两列的单元格:</h4>
<table border="1"><tr><th>姓名</th><th colspan="2">电话</th></tr><tr><td>Bill Gates</td><td>555 77 854</td><td>555 77 855</td></tr>
</table><h4>横跨两行的单元格:</h4>
<table border="1"><tr><th rowspan="2">姓名</th><td>Bill Gates</td></tr><tr><td>tong</td></tr><tr><th>电话</th><td>555 77 854</td></tr>
</table>

 使用 Cell padding 来创建单元格内容与其边框之间的空白

<table border="1"cellpadding="10"><tr><td>First</td><td>Row</td></tr><tr><td>Second</td><td>Row</td></tr>
</table>

使用 Cell spacing 增加单元格之间的距离

<table border="1"cellspacing="10"><tr><td>First</td><td>Row</td></tr><tr><td>Second</td><td>Row</td></tr>
</table>

无序列表

<ul><li>咖啡</li><li>茶</li><li>牛奶</li>
</ul>

有序列表 (start 表示序号的起始)

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

边框标签

<fieldset><legend align="center">该文字能插入边框</legend>
</fieldset>

frame标签实现框架(主要用于表格的边框)

<p>Table with frame="box":</p>
<table frame="box"><tr><th>Month</th></tr>
</table><p>Table with frame="above":</p>
<table frame="above"><tr><th>Month</th></tr>
</table><p>Table with frame="below":</p>
<table frame="below"><tr><th>Month</th></tr>
</table><p>Table with frame="hsides":</p>
<table frame="hsides"><tr><th>Month</th></tr>
</table><p>Table with frame="vsides":</p>
<table frame="vsides"><tr><th>Month</th></tr>
</table>

内联框架iframe

<iframe src="lian2.html" width="200px" height="300px"></iframe>

作为跳转的内联

<iframe src="lian2.html" name="name"></iframe>
<p><a href="lian3.html" target="name">跳转第三个网页,并在内联网页中显示</a></p>

通过name进行跳转

表单的应用

<input> 元素是最重要的表单元素

<input> 元素有很多形态,根据不同的 type 属性

类型描述
text定义常规文本输入。
radio定义单选按钮输入(多选的话name名字可以不同)
submit

定义提交按钮(提交表单)

reset定义重置按钮
性别:<br><form><input type="radio" name="sex" value="male" checked>Male<br><input type="radio" name="sex" value="female">Female</form>爱好:<br><form><input type="radio" name="ai1" value="1" checked>1<br><input type="radio" name="ai2" value="2">2<br><input type="radio" name="ai3" value="3">3<br><input type="radio" name="ai4" value="4">4</form>

文本输入

<input type="text"> 定义用于文本输入的单行输入字段:

提交按钮

<input type="submit"> 定义用于向表单处理程序提交表单的按钮。

表单处理程序通常是包含用来处理输入数据的脚本的服务器页面(表单处理程序在表单的 action 属性中指定)

Action 属性

action 属性定义在提交表单时执行的动作。

向服务器提交表单的通常做法是使用提交按钮。

通常,表单会被提交到 web 服务器上的网页。

<form action="action_page.php">

Method 属性

method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST):

<form action="action_page.php" method="get\post">

使用 GET 时,表单数据在页面地址栏中是可见的(默认)

POST 的安全性更好,因为在页面地址栏中被提交的数据是不可见的、


Name 属性

如果要正确地被提交,每个输入字段必须设置一个 name 属性。


Target 属性

target 属性规定提交表单后在何处显示响应。

target 属性可设置以下值之一:

描述
_blank响应显示在新窗口或选项卡中。
_self(默认)响应显示在当前窗口中。
_parent响应显示在父框架中。
_top响应显示在窗口的整个 body 中。
framename响应显示在命名的 iframe 中。

 表单属性:

<input> 元素

<input type="text" name="firstname" value="name">//文本类型
<input type="submit" value="Submit">//提交按钮
<input type="reset" value="Reset">//重置类型
<input type="radio" value="单选">//单选


<input type="image">//图片作为提交按钮
<input type="file">


<input type="password"> 定义密码字段


<input type="checkbox"> 定义复选框。复选框允许用户在有限数量的选项中选择零个或多个选项。

 


<input type="number"> 用于应该包含数字值的输入字段。能够对数字做出限制。
<input name="num" type="number" max="100" min="90">
<input type="submit" value="提交">


<input type="date"> 用于应该包含日期的输入字段
<input type="range" max="100" min="50"> 显示为滑块控件。

<input type="week"> 允许用户选择周和年

<form>Enter a date before 1980-01-01:<input type="date" name="bday" max="1979-12-31"><br>Enter a date after 2000-01-01:<input type="date" name="bday" min="2000-01-02"><br>
</form>

<input type="color"> 用于应该包含颜色的输入字段。


<input type="range"> 输入字段能够显示为滑块控件。

 


 <input type="datetime-local"> 允许用户选择日期和时间(无时区)


<input type="email"> 用于应该包含电子邮件地址的输入字段

<input type="search"> 用于搜索字段(搜索字段的表现类似常规文本字段)

 <select> 元素(下拉列表)

<option> 元素定义待选择的选项。

<select name="aihao"><option value="ai1">ai1</option><option value="ai2">ai2</option><option value="ai3">ai3</option>
</select>

<textarea> 元素

<textarea> 元素定义多行输入字段(文本域

<button> 元素

<button> 元素定义可点击的按钮

<input type="submit" value="Submit" οnclick="alert('hello')"><br>
<button type="button" οnclick="alert('world')">按钮</button><br>

<datalist> 元素

为 <input> 元素规定预定义选项列表。

用户会在他们输入数据时看到预定义选项的下拉列表

<input type="text" name="aihao" list="aihao">
<datalist id="aihao">  //下拉列表的id必须与输入的list相等<option value="ai1">ai1</option><option value="ai2">ai2</option><option value="ai3">ai3</option>
</datalist>
<input type="submit" value="Submit"><br>

 input的属性值

value 属性规定输入字段的初始值

<input type="text" value="初始值">
<input type="text" value="">

 readonly 属性规定输入字段为只读(不能修改)

只读部分:<input type="text" value="初始值" readonly>
可以修改:<input type="text" value="">

disabled 属性规定输入字段是禁用的,被禁用的元素是不可用和不可点击的,被禁用的元素不会被提交。

<input type="text" value="初始值" disabled><br>
<input type="text" value="">

size 属性规定输入字段的尺寸(以字符计)

maxlength 属性规定输入字段允许的最大长度

<input type="text" value="" maxlength="50"><br>
<input type="text" value="" size="40">

novalidate 属性设置,则 novalidate 规定在提交表单时不对表单数据进行验证。

<form action="action_page.php" novalidate>E-mail: <input type="email" name="user_email"><input type="submit">
</form> 

autofocus 属性设置,则规定当页面加载时 <input> 元素应该自动获得焦点,无需点击文本框

First name:<input type="text" name="fname" autofocus>

multiple 属性设置,则规定允许用户在 <input> 元素中输入多个的值。

<input type="file" multiple>

placeholder 属性规定用以描述输入字段预期值的提示,该提示会在用户输入值之前显示在输入字段中

用户名:<input type="text" placeholder="此处输入用户名"><br>
密码:<input type="password"  placeholder="此处输入密码">

required 属性设置,则规定在提交表单之前必须填写输入字段,不能为空

用户名:<input type="text" placeholder="此处输入用户名" required><br>
密码:<input type="password"  placeholder="此处输入密码" required><br>
<input type="submit" value="提交">

画布元素

canvas 元素使用 JavaScript 在网页上绘制图像,规定元素的 id、宽度和高度

<canvas id="myCanvas" width="200" height="100"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");//使用id寻找canvas元素
var cxt=c.getContext("2d");//getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
cxt.fillStyle="#FF0000";//染色
cxt.fillRect(0,0,150,75);//规定形状
</script>

嵌入、插入对象 

<object> 元素定义 HTML 文档中的嵌入式对象

<embed> 元素也可定义了 HTML 文档中的嵌入式对象

均可插入音乐、网页、视频、图片均可

<audio src="url" controls="controls"></audio>

属性描述
autoplayautoplay如果出现该属性,则音频在就绪后马上播放。
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。
looploop如果出现该属性,则每当音频结束时重新开始播放。
mutedmuted规定视频输出应该被静音。
preloadpreload

如果出现该属性,则音频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

srcurl要播放的音频的 URL。

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

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

相关文章

2024年最新软件测试必问面试题,面试前一天刷效果更佳

1.你为什么选择软件测试行业 因为之前有了解软件测试这个行业&#xff0c;觉得他的发展前景很好。 2.根据你以前的工作经验描述一下软件开发、测试过程&#xff0c;由那些角色负责&#xff0c;你做什么 要有架构师、开发经理、测试经理、程序员、测试员。我在里面主要是负责所…

HOJ 项目部署-前端定制 默认勾选显示标签、 在线编辑器主题和字号大小修改、增加一言功能 题目AC后礼花绽放

# 项目拉取地址&#xff1a; https://gitee.com/himitzh0730/hoj.git # 切换到hoj-vue目录执行以下命令 #安装依赖 npm install #运行服务 npm run serve #修改代码后构建项目到dist文件夹&#xff0c;到服务器docker-compose.yml中修改hoj-frontend文件映射即可 npm run build…

dvwa问题篇 -- dvwa出现数据库无法访问的时候,Could not connect to the MySQL service. -- 小黑解决教程

各位小伙伴初次玩dvwa会出现各种问题&#xff0c;本来想把一些问题直接总结写一篇dvwa文章来着&#xff0c;但因为都是关键字搜索&#xff0c;所以将一些问题都拆分出来&#xff0c;以便大家方便查类似问题。&#xff08;大家有遇到不一样的问题欢迎投稿&#xff01;&#xff0…

ElasticSearch 搜索数据

精确查询 存在查询 Exists query 用于查询某个字段不为空的数据。如下所示&#xff0c;查询 age 不为空的 数据 POST user/_search {"query": {"exists": {"field": "age"}} }主键查询 通过 _id 字段查询数据 POST user/_search …

48道Linux面试题

本博客将汇总 Linux 面试中常见的题目&#xff0c;并提供详细的解答。 文章目录 1、绝对路径用什么[符号表](https://so.csdn.net/so/search?q符号表&spm1001.2101.3001.7020)示&#xff1f;当前目录、上层目录用什么表示&#xff1f;主目录用什么表示? 切换目录用什么命…

异步通知

文章目录 一、异步通知1、应用场景2、执行流程&#xff08;基于读取按键值的情景&#xff09;2.1、应用程序具体做什么&#xff1f;2.2、驱动程序具体做什么&#xff1f; 三、程序1、驱动程序2、测试应用程序 三、总结 一、异步通知 1、应用场景 当应用程序不想休眠时&#x…

【办公技巧】为什么有的pdf不能编辑

pdf文件大家应该都经常接触&#xff0c;但是不知道大家会遇到这种情况&#xff1a;有些PDF文件打开之后无法编辑&#xff1f;是什么原因呢&#xff1f;今天我们来分析一下都是那些原因导致的。 首先我们可以考虑一下&#xff0c;PDF文件中的内容是否是图片&#xff0c;如果确认…

「Verilog学习笔记」超前进位加法器

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 超前进位加法器的实质是&#xff1a;对于输出的每一位Si 其实都可以用Si Ai ^ Bi ^ Cin来表示 我们需要做的只是判断加法结果的最高位该取几 例如本题中 输入的两个数A和B…

windows无命令升级node版本

1. node最新版本下载链接 点击最新下载链接&#xff0c;找到对应版本下载并解压 2. 通过命令where node找到node.exe位置 3. 将该位置的node.exe替换为下载解压的最新node.exe 4. 重新执行node -v查看版本

docker应用部署

Docker 应用部署 一、部署MySQL 搜索mysql镜像 docker search mysql拉取mysql镜像 docker pull mysql:5.6创建容器&#xff0c;设置端口映射、目录映射 # 在/root目录下创建mysql目录用于存储mysql数据信息 mkdir ~/mysql cd ~/mysqldocker run -id \ -p 3307:3306 \ --na…

Secondo数据库下载安装

SECONDO - An Extensible Database System (secondo-database.github.io) 官网地址 1配置环境 ubuntu20.04.2&#xff08;这个版本不能错&#xff0c;我试了20.04.3就安装不超过&#xff09;&#xff0c;镜像下载地址如下&#xff1a;Index of /releases/20.04.2 2安装步骤 安…

MR实战:分科汇总求月考平均分

文章目录 一、实战概述二、提出任务三、完成任务&#xff08;一&#xff09;准备数据1、在虚拟机上创建文本文件2、上传文件到HDFS指定目录 &#xff08;二&#xff09;实现步骤1、创建Maven项目2、添加相关依赖3、创建日志属性文件4、创建学生实体类5、创建科目平均分映射器类…

jQuery-1.7.2存在任意文件读取漏洞

jQuery是一个快速、简洁的JavaScript框架,是一个丰富的JavaScript代码库&#xff0c;其1.7.2版本的sys_dia_data_down模块存在任意文件读取漏洞&#xff0c;攻击者可通过前台读取任意文件。 1.漏洞级别 高危 2.漏洞搜索 fofa body"webui/js/jquerylib/jquery-1.7.2.m…

git的常用命令以及在可视化工具中的使用方法

一.引言 想当初在刚进公司的时候&#xff0c;对于git的使用非常不熟悉&#xff0c;特别是分支的概念&#xff0c;导致开发效率变低&#xff0c;故通过此文章&#xff0c;总结git的使用经验 二.Git 常用命令详解 2.1 git clone [url]: 克隆远程仓库到本地 刚开始时&#xff0c…

MySQL按月分片

一、按照月分片 使用场景为按照自然月来分片,每个自然月为一个分片,但是一年有12个月,是不是要有12个数据节点才行呢?并不是。例如我现在只有三个分片数据库,这样就可以1月在第一个数据分片中,2月在第二个数据分片中,3月在第三个数据分片中,当来到4月的时候,就会重新开…

redis的搭建及应用(二)-redis的持久化策略

Redis的持久化策略 RDB RDB持久化是指在指定的时间间隔内将redis内存中的数据集快照写入磁盘&#xff0c;实现原理是redis服务在指定的时间间隔内先fork一个子进程&#xff0c;由子进程将数据集写入临时文件&#xff0c;写入成功后&#xff0c;再替换之前的文件&#xff0c;用二…

istio 示例程序 bookinfo 快速部署

官网 文档位置 相关 yaml 资源下载 Bookinfo 应用分为四个单独的微服务&#xff1a; productpage&#xff1a;这个微服务会调用 details 和 reviews 两个微服务&#xff0c;用来生成页面details&#xff1a;这个微服务中包含了书籍的信息reviews&#xff1a;这个微服务中包含了…

开源元数据治理平台Datahub部署指南(小白版)

1.引言 datahub是做什么的&#xff0c;这里就不展开描述了&#xff0c; 如果想了解更多请自行阅读DataHub官网文档&#xff0c; 这里主要教大家如何一步一步安装然后100%部署完成。一般开源产品的文档都是被大家吐槽的最多的&#xff0c;部署步骤写的非常简单&#xff0c;重要…

oracle与mysql的分析函数(窗口函数)

分析函数定义 在SQL语句中&#xff0c;很多查询语句需要进行GROUP BY分组汇总&#xff0c;但是一旦经过分组&#xff0c;SELECT返回的记录数就会减少。为了保留所有原始行记录&#xff0c;并且仍可以进行分组数据分析&#xff0c;分析函数应运而生。 Oracle 8i 版本开始支持窗…

代码随想录-刷题第三十九天

动态规划理论基础 动态规划的题目由重叠子问题构成&#xff0c;每一个状态一定是由上一个状态推导出来的。这一点就区分于贪心&#xff0c;贪心没有状态推导&#xff0c;而是从局部直接选最优的。 动态规划五步曲 确定dp数组&#xff08;dp table&#xff09;以及下标的含义…