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.rhkb.cn/news/227780.html

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

相关文章

win11出现安全中心空白和IT管理员已限制对某些区域的访问(不一样的解决方式),真实的个人经历,并且解决经过

1、个人的产生问题的经历 2023年12月22日&#xff0c;由于我买了一块电脑的固态硬盘1T&#xff0c;想要扩容&#xff0c;原来电脑自带512G(由于个人是一个程序员&#xff0c;导致512G实在太古鸡肋)装好以后&#xff0c;想要重装一下系统&#xff0c;来个大清理。结果不出意料&…

【ARMv8M Cortex-M33 系列 2.1 -- Cortex-M33 使用 .hex /.srec 文件介绍】

请阅读【嵌入式开发学习必备专栏 之Cortex-M33 专栏】 文章目录 HEX 文件介绍英特尔十六进制文件格式记录类型hex 示例Cortex-M 系列hex 文件的使用 hex 文件和srec 文件生成Motorola S-Record (srec) 格式 HEX 文件介绍 .hex 文件通常用于微控制器编程&#xff0c;包括 ARM C…

3DV 2024 Oral | SlimmeRF:可动态压缩辐射场,实现模型大小和建模精度的灵活权衡

目前大多数NeRF模型要么通过使用大型模型来实现高精度&#xff0c;要么通过牺牲精度来节省内存资源。这使得任何单一模型的适用范围受到局限&#xff0c;因为高精度模型可能无法适应低内存设备&#xff0c;而内存高效模型可能无法满足高质量要求。为此&#xff0c;本文研究者提…

SpringBoot发布项目到docker

Dockerfile FROM openjdk:11 # 作者 MAINTAINER chenxiaodong<2774398338qq.com># 安装 vim # RUN yum -y install vim# 环境变量 # 进入容器后的默认工作目录 ENV WORKPATH /usr/local/webapp ENV EXECFILE Docker2Application-0.0.1-SNAPSHOT.jarRUN mkdir -p $WORKPA…

【Java开发岗面试】八股文—数据库MySQLRedis

声明&#xff1a; 背景&#xff1a;本人为24届双非硕校招生&#xff0c;已经完整经历了一次秋招&#xff0c;拿到了三个offer。本专题旨在分享自己的一些Java开发岗面试经验&#xff08;主要是校招&#xff09;&#xff0c;包括我自己总结的八股文、算法、项目介绍、HR面和面试…

sklearn 中matplotlib编制图表

代码 # 导入pandas库&#xff0c;并为其设置别名pd import pandas as pd import matplotlib.pyplot as plt# 使用pandas的read_csv函数读取名为iris.csv的文件&#xff0c;将数据存储在iris_data变量中 iris_data pd.read_csv(data/iris.txt,sep\t)# 使用groupby方法按照&quo…

ES6语法(五)封装模块化公共工具函数、引入npm包 ,并上传到npm中进行下载

1. 模块化 模块化是指将一个大的程序文件&#xff0c;拆分为许多小的文件&#xff08;模块&#xff09;&#xff0c;然后将小的文件组合起来。 1.1. 优点 &#xff08;1&#xff09;防止命名冲突 &#xff08;2&#xff09;代码复用 &#xff08;3&#xff09;高维护性 &…

【Java】一文讲解Java类加载机制

Java 类加载机制是 Java 运行时的核心组成部分&#xff0c;负责在程序运行过程中动态加载和连接类文件&#xff0c;并将其转换为可执行代码。理解类加载机制&#xff0c;能更容易理解你一行行敲下的Java代码是如何在JVM虚拟机上运行起来。并且理解类加载机制之后&#xff0c;我…

vscode软件安装步骤

目录 一、下载软件安装包 二、运行安装包后 一、下载软件安装包 打开vscode官方网址&#xff0c;找到下载界面 链接如下&#xff1a;Download Visual Studio Code - Mac, Linux, Windows 我是windows电脑&#xff0c;各位小伙伴自己选择合适的版本&#xff0c;点击下载按钮…

快速找回误删的文件:2024 年顶级数据恢复软件大盘点

你曾经遇到过数据丢失的问题吗&#xff1f;别担心&#xff0c;12个最佳数据恢复软件帮你恢复。 计算机中的数据恢复是从辅助存储、丢失的文件或介质中恢复已删除、不可恢复、损坏、损坏和格式化的数据的过程。存储的数据可以通过正常方式带回到同一个地方&#xff0c;甚至&…

数模学习day05-插值算法

插值算法有什么作用呢&#xff1f; 答&#xff1a;数模比赛中&#xff0c;常常需要根据已知的函数点进行数据、模型的处理和分析&#xff0c;而有时候现有的数据是极少的&#xff0c;不足以支撑分析的进行&#xff0c;这时就需要使用一些数学的方法&#xff0c;“模拟产生”一些…

Resolume Arena(VJ音视频软件):创意无限,视听艺术的新境界

Resolume Arena是一款领先的VJ音视频软件&#xff0c;为创意人士提供了丰富的视觉效果和音频处理功能。无论是在舞台演出、音乐会还是派对活动中&#xff0c;Resolume Arena能够将音乐、视频和图像无缝地结合&#xff0c;创造出引人入胜的视听体验。 Resolume Arena具备强大的…

【开源】基于Vue+SpringBoot的二手车交易系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 二手车档案管理模块2.3 车辆预约管理模块2.4 车辆预定管理模块2.5 车辆留言板管理模块2.6 车辆资讯管理模块 三、系统设计3.1 E-R图设计3.2 可行性分析3.2.1 技术可行性分析3.2.2 操作可行性3.2.3 经济…

Oraclelinux部署Oracle服务

采用图形化界面 user用户 oracle用户 #清屏 clear #设置主机名 hostnamectl set-hostname ceshidb sed -i 1,2 s/^/#/ /etc/hosts echo "127.0.0.1 ceshidb" >> /etc/hosts echo "::1 ceshidb" >> /etc/hosts ping -c 5…

前言-ERP管理平台各个模块角色登录账号及各模块逻辑说明

全国职业院校技能大赛-高职组”软件测试"赛项竞赛训练ERP管理平台角色登录账号如下: “ERP 管理平台”内置一定数量 Bug,该系统可支持基于 Web 端 的功能测试、自动化测试、性能测试、接口测试、白盒测试、单元测 试等。系统主要模块包括:采购入库、采购退货、库存分…

通信原理课设(gec6818) 007:语音识别

目录 1、去科大讯飞官网下载对应的sdk 2、科大讯飞文件夹的意思 3、配置ARM的录音环境 4、编程实现语音识别 我们的需求是将一个语音文件从客户端传到服务器&#xff0c;因此我们最好是选用tcp 现在市面上面常用的语音识别解决方案为&#xff1a;科大讯飞c和百度c 离…

gitLab页面打tag操作步骤

作者&#xff1a;moical 链接&#xff1a;gitLab页面打tag简单使用 - 掘金 (juejin.cn) 来源&#xff1a;稀土掘金 著作权归作者所有。商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处。 ---------------------------------------------------------------------…

华为无线AC内三层漫游配置详解

重要说明 1、在一台ac中实现三层漫游 2、ac和核心的互联vlan和ap的管理vlan是同一个广播域&#xff0c;可以不用配option 43 3、直接转发模式&#xff0c;ac上可以不起业务vlan&#xff0c;ac和核心交换机上可以只放行一个互联vlan 10 4、ac上要启两个vap魔板&#xff0c;两个…

Python:正则表达式速通,码上上手!

1前言 正则表达式&#xff08;Regular Expression&#xff09;是一种用来描述字符串模式的表达式。它是一种强大的文本匹配工具&#xff0c;可以用来搜索、替换和提取符合特定模式的文本。 正则表达式由普通字符&#xff08;例如字母、数字、符号等&#xff09;和元字符&#…