html网页编写语言

  html是一门语言,所有的网页都是用html这门语言编写出来的。

 HTML(HyperText Markup Language):超文本标记语言。

         超文本:超越了文本的限制,比普通文本更强大。除了文字信息,还可以定义图片,音频,视频等内容。

         标记语言:由标签构成的语言。html都是运行在浏览器上,html标签由浏览器来解析。html标签都是预定义好的。

 W3C标准:网页主要由3部分组成:1、结构html;2、表现CSS;3、行为JavaScript。

html编写:

     1、新建文本文件,后缀名改为.html;

     2、编写html结构标签:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

  3、在<body>中定义文字

    解释:html标签,html的根标签     head标签,展示资源信息和title标题    body标签,浏览器网页要显示的内容。      html标签中不区分大小写,语法松散(就比如标签中少写个>或<,是可以正常运行的)。

html文件中的换行和空格不被浏览器识别,想要换行就要添加<br>标签。

基础标签:

  <h1-h6>:定义标题,h1最大,h6最小。   <font>:定义文本的字体face,字体尺寸size,字体颜色color。      <b>:定义粗体文本。   <i>:定义斜体文本。      <u>:定义文本下划线。                  <center>:定义文本居中。     <p>:定义段落。    <br>:定义折行。     <hr>:定义水平线。

<img>定义图片。src属性:规定显示图像的URL(统一资源定位符)。 height属性:定义图像的高度。  width属性:定义图像的宽度。

<audio>定义音频。支持的音频格式有MP3、WAV、OGG。 src属性:规定音频的URl。 controls属性:显示播放的控件。

<video>定义视频。支持的视频格式有MP4、WebM、OGG。 src属性:规定视频的URl。 controls属性:显示播放控件。

<a>:定义超链接。用于链接到另一个资源。 href属性:指定访问资源的URl。 target:指定打开资源的方式,为_self时,是默认值,在当前页面打开。为 _blank时,新打开一个空白页,在空白页打开。

html表示字体颜色:

    1、英语单词:red,blue,pink等,因为颜色很多很多,所以不推荐使用这种方式。

    2、三原色:rgb(值1,值2,值3),让三原色按一定比例混合。值取值范围是0到255。

    3、#值1值2值3,值是16进制的,范围是00到ff。

列表标签

    有序列表:

<oi>
    <li></li>
    <li></li>
</oi>

  每一列的内容分别写入对应的li标签中。在浏览器打开后,每一列前有对应的数字。 

   无序列表:

<ul>
    <li></li>
    <li></li>
</ul>

    每一列的内容分别写入对应的li标签中。在浏览器打开后,每一列前都有小黑点。

    oi和ul标签都有type属性用于修改标识符。一般不会修改。

表格标签

   table标签:定义表格。boeder属性:规定表格边框的宽度。 width属性:规定表格的宽度。 cellspacing属性:规定单元格之间的空白。

   tr标签:定义行。align属性:定义表格行的内容对齐方式。

  td标签:定义单元格:rowspan属性:规定单元格可横跨的行数。colspan属性:规定单元格可横跨的列数。

  th标签:定义表头单元格。

<table border="1" cellspacing="0" width="500">
  <tr align="center">
    <th>序号</th>
    <th>品牌loyal</th>
    <th>品牌名称</th>
    <th>企业名称</th>
  </tr>
  <tr align="center">
    <td>1.1</td>
    <td>1.2</td>
    <td>1.3</td>
    <td>1.4</td>
  </tr>
  <tr align="center">
    <td>1.1</td>
    <td>1.2</td>
    <td>1.3</td>
    <td>1.4</td>
  </tr>
</table>

td标签的俩个属性是用于合并单元格的:

<table border="1" cellspacing="0" width="500">
  <tr align="center">
    <th colspan="2"></th>
    <th>星期一</th>
    <th>二</th>
  </tr>
  <tr align="center">
    <td rowspan="2">上午</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr align="center">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr align="center">
    <td colspan="4">中午</td>
  </tr>
  <tr align="center">
    <td rowspan="2">下午</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr align="center">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

 注意该表格中,第2,5行有4个单元格,第3,6行有3个单元格。

布局标签:

   <div>:定义html文档中的一个区域部分,经常与CSS一起使用,用来布局网页。div会占满这一整行。

   <span>:用于组合行内元素。不会占满一整行。

表单标签

  表单:在网页中主要负责数据采集功能,使用<form>标签定义表单。

  表单项(元素):不同类型的input元素、下拉列表、文本域。

     form标签:

                     action属性:规定当提交表单时向何处发送表单数据,URL。表单项数据要想被提交,则必须指定其name属性。

                    method属性:规定用于发送表单数据的方式。1、get:浏览会将数据直接附在表单的actionURL之后,大小有限为4KB。2、post:浏览器会将数据放在http请求消息体中,大小无限制。

  input标签:定义表单项,通过type属性控制输入形式。

                 type属性: text,默认值,定义单行的输入字段。

                                    password:定义密码字段,不显示真实内容。

                                    radio:定义单选按钮

                                    checkbox:定义复选框

                                    file:定义文件上传的按钮

                                   hidden:定义隐藏的输入字段。该字段根据表单一起上传,但不在浏览器中显示。

                                   submit:定义提交按钮,提交按钮会把表单数据发送到服务器。

                                   reset:定义充值按钮,重置按钮会清除表单中的所有数据。

                                   button:定义可点击按钮。

   label标签:为表单项定义标注。for属性的内容应与input标签中的id属性内容一致。

   select标签:定义下拉列表。

   option标签:定义下拉列表的列表项。

   textarea标签:定义文本域。

<form action="#" method="post">
    <input type="hidden" name="id" value="123">

    <label for="username">用户名:</label>
    <input type="text" name="username" id="username"><br>
    <label for="password">密码:</label>
    <input type="password" name="password" id="password"><br>

    性别:
    <input type="radio" name="gender" value="1" id="male"> <label for="male">男</label>
    <input type="radio" name="gender" value="2" id="female"> <label for="female">女</label>
    <br>

    爱好:
    <input type="checkbox" name="hobby" value="1">旅游
    <input type="checkbox" name="hobby" value="2">电影
    <input type="checkbox" name="hobby" value="3">游戏
    <br>

    头像:
    <input type="file">
    <br>

    城市:
    <select name="city">
        <option>北京</option>
        <option value="shanghai">上海</option>
        <option>广州</option>
    </select>
    <br>

    个人描述:
    <textarea cols="20" rows="5" name="desc">
    </textarea>

    <br>
    <input type="submit" value="免费注册">
    <input type="reset" value="重置">
    <input type="button" value="一个按钮">
</form>

           

                 

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

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

相关文章

Netty-1-编写网络应用程序的基本步骤

编写网络应用程序的基本步骤如下: 完成代码编写。复查代码。“临门一脚"。上线及反馈。 完成代码编写 编写网络应用程序的第一步是完成代码编写。 选择传输协议 对于普通的应用程序而言&#xff0c;经过需求分析、定义业务数据结构和实现业务逻辑之后&#xff0c;我…

研究论文 20231123-Genome Biology:零样本学习预测细基因表达顺式调控模式

Li, Yongge, et al. "CREaTor: zero-shot cis-regulatory pattern modeling with attention mechanisms." Genome Biology 24.1 (2023): 266. 2023年11月23日见刊 微信分享&#xff1a;Genome Biology | CREaTor: 零样本学习预测细胞类型特异的基因表达顺式调控模式…

算法与数据结构--哈夫曼树与哈夫曼编码

演示视频&#xff1a; 【1】数据结构——五分钟搞定哈夫曼树&#xff0c;会求WPL值&#xff0c;不会你打我_哔哩哔哩_bilibili 【2】哈夫曼树和哈夫曼编码_哔哩哔哩_bilibili 【3】哈夫曼树的构造的做题三步骤_哔哩哔哩_bilibili 求哈夫曼编码的步骤&#xff1a; 1.根据字符及…

HTML标签(下)

一、表格标签 1.1表格的主要作用 主要用于显示、展示数据 1.2表格的基本语法 <td>单元格中的文字</td> 如果是表头单元格的话&#xff0c;eg:姓名&#xff0c;年龄<th> 姓名</th>&#xff08;th是table head&#xff09;; 作用&#xff1a;表头会…

用Python处理PDF:拆分与合并PDF文档

PDF文档在信息共享和数据保存方面被广泛使用&#xff0c;处理PDF文档也成为常见需求。其中&#xff0c;合并和拆分PDF文档能够帮助我们更有效地管理PDF文档&#xff0c;使文档内容分布更合理。通过合并&#xff0c;可以将相关文档整合成一个文件&#xff0c;以便更好地组织和提…

深入了解C编译管道

文章目录 引言1. 预处理阶段2. 编译阶段3. 汇编阶段4. 链接阶段5.流程图结论 引言 C编译管道是软件开发中至关重要的工具&#xff0c;它负责将C语言源代码转换为可执行的机器代码。理解C编译管道的工作原理有助于提高代码的可读性、可维护性&#xff0c;并有助于优化生成的可执…

20231222给NanoPC-T4(RK3399)开发板的适配原厂Android10的挖掘机方案并跑通AP6398SV

20231222给NanoPC-T4(RK3399)开发板的适配原厂Android10的挖掘机方案并跑通AP6398SV 1、简略步骤&#xff1a;rootrootrootroot-X99-Turbo:~/3TB/3399-android10$ cat Rockchip_Android10.0_SDK_Release.tar.gz0* > Rockchip_Android10.0_SDK_Release.tar.gz rootrootrootro…

SUSE Linux服务器使用zypper安装nginx

SUSE Linux 的云服务器用户&#xff0c;不能yum,安装软件&#xff0c;可通过 zypper 快速安装软件。 使用 root 账号登录 openSUSE 操作系统的云服务器。 执行 zypper service-list 或 zypper sl 命令 列出软件源 安装软件包 执行 zypper search 或 zypper se 命令&#…

扫码展示多视频怎么做?视频的活码制作技巧

现在扫码看视频的应用场景越来越多&#xff0c;用这种方式不仅能够简单有效的低成本完成视频传播&#xff0c;而且也符合用户的习惯。那么当需要将视频制作二维码来展示内容时&#xff0c;多个视频文件生成二维码的制作方法是怎么操作的呢&#xff1f;下面教大家使用视频二维码…

运用ETL快速拉取吉客云平台订单信息

吉客云介绍 吉客云是一家中国的云计算服务提供商。它提供了包括云服务器、云数据库、云存储、云网络等各种云计算产品和解决方案&#xff0c;帮助企业和个人搭建高效、可靠、安全的云计算环境。 吉客云特点和优势&#xff1a; 大规模分布式架构&#xff1a;吉客云基于自主研发…

安装nodejs,配置环境变量并将npm设置淘宝镜像源

安装nodejs并将npm设置淘宝镜像源 1. 下载nodejs 个人不喜欢安装包&#xff0c;所以是下载zip包的方式。这里我下载的node 14解压包版本 下载地址如下&#xff1a;https://nodejs.org/dist/v14.15.1/node-v14.15.1-win-x64.zip 想要其他版本的小伙伴去https://nodejs.org/di…

【【迭代16次的CORDIC算法-verilog实现】】

迭代16次的CORDIC算法-verilog实现 -32位迭代16次verilog代码实现 CORDIC.v module cordic32#(parameter DATA_WIDTH 8d32 , // we set data widthparameter PIPELINE 5d16 // Optimize waveform)(input …

opencv入门到精通——改变颜色空间

目录 目标 改变颜色空间 对象追踪 如何找到要追踪的HSV值&#xff1f; 目标 在本教程中&#xff0c;你将学习如何将图像从一个色彩空间转换到另一个&#xff0c;像BGR↔灰色&#xff0c;BGR↔HSV等 除此之外&#xff0c;我们还将创建一个应用程序&#xff0c;以提取视频中的…

Mapmost Alpha上新啦!新增移动端的丝滑且强大功能!

本文目录 一、Mapmost Alpha 介绍1.1 Maopmost 数字孪生平台1.2 Mapmost 产品能力1.3 Mapmost Alpha 产品优势 二、移动端功能介绍三、Mapmost Alpha 总结 一、Mapmost Alpha 介绍 Hello&#xff0c;各位铁铁&#xff0c;今天给大家推荐一款好用的三维城市场景创建工具。 这款…

k8s部署elastic+kibana

1.软件版本说明 1.1软件版本说明 软件版本kubernetes1.23.17elasticsearch7.17.3kibana7.17.3 1.2硬件环境说明 宿主机使用windows10安装vmware17.5.0&#xff0c;虚拟机安装linux系统&#xff08;centos7.9&#xff09; 说明&#xff1a; elasticserch和kibana的版本尽量…

NTFS权限与文件系统:深入解析与实践指南

在当今的信息时代&#xff0c;数据安全和管理成为了每个组织和个人的重要议题。NTFS权限作为Windows操作系统中的一个核心功能&#xff0c;为文件和文件夹的安全管理提供了强大的支持。本文将深入解析NTFS权限的基本概念&#xff0c;并通过实际操作指导如何有效地利用这些权限来…

MySQL的hash索引

MySQL有BTree 索引及Hash索引等索引类型&#xff0c;BTree索引类型是MySQL采用最多的索引类型。Hash索引使用场景比较有限&#xff0c;文章将从Hash索引的底层结构出发&#xff0c;来分析Hash索引的利与弊。 1 hash数据结构 hash数据结构由键、哈希函数及哈希表组成。 键&am…

【3D生成与重建】SSDNeRF:单阶段Diffusion NeRF的三维生成和重建

系列文章目录 题目&#xff1a;Single-Stage Diffusion NeRF: A Unified Approach to 3D Generation and Reconstruction 论文&#xff1a;https://arxiv.org/pdf/2304.06714.pdf 任务&#xff1a;无条件3D生成&#xff08;如从噪音中&#xff0c;生成不同的车等&#xff09;、…

提前预测刚体移动轨迹 预测运动轨迹

提前预测刚体移动轨迹 预测运动轨迹 一、效果二、介绍三、脚本RigidbodyExtension.cs 计算工具类DrawLine.cs 画线工具类 四、资源分享 一、效果 二、介绍 通过计算Unity物理系统的运动方位来判断下一步移动的位置&#xff0c;主要用于物体运动的提前预测&#xff0c;通常使用…

比 Eslint 快 100 倍!新一代 JS Linter 发布!

比 Eslint 快 100 倍&#xff01;新一代 JS Linter 发布&#xff01; Oxc 是用 Rust 编写的 JavaScript 语言的高性能工具集合。他们的目标是构建 JavaScript 的基本编译器工具&#xff1a;解析器、linter、格式化程序、转译器、压缩器和解析器等等&#xff0c;这次他们发布了一…
最新文章