html网页编写语言

news2025/1/20 10:44:17

  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.coloradmin.cn/o/1330842.html

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

相关文章

产品原型设计软件 Axure RP 9 mac支持多人写作设计

axure rp 9 mac是一款产品原型设计软件&#xff0c;它可以让你在上面任意构建草图、框线图、流程图以及产品模型&#xff0c;还能够注释一些重要地方&#xff0c;axure rp汉化版可支持同时多人写作设计和版本管理控制&#xff0c;这款交互式原型设计工具可以帮助设计者制作出高…

【YOLOV8预测篇】使用Ultralytics YOLO进行检测、分割、姿态估计和分类实践

目录 一 安装Ultralytics 二 使用预训练的YOLOv8n检测模型 三 使用预训练的YOLOv8n-seg分割模型 四 使用预训练的YOLOv8n-pose姿态模型 五 使用预训练的YOLOv8n-cls分类模型 <

linux运维的面试题一

1.linux启动过程 1加电 2加载主板bios设置 3加载多重操作系统启动管理器grub 4加载内核系统到内存当中 5加载配置文件 6加载内核模块 7完成相应的初始化工作和启动相应的服务 8启动系统进程 9出现登录界面 10开机启动完成 2.安装过操作系统吗&#xff1f;怎么安装? 1.小批量设…

波奇学Linux:进程替换

单进程替换 excel使得能够在文件中运行系统指令 int excel (系统文件地址&#xff0c;系统指令&#xff0c;指令参数&#xff0c;NULL)&#xff1b; 成功时无返回值&#xff0c;失败时返回-1 如图进程成功运行第一个printf后再运行指令&#xff0c;但没有输出第二个printf的内容…

Jenkins 插件管理指南

目录 常用插件 插件安装 已安装插件 installed plugins 常用插件 Docker Plugin&#xff1a; 这个插件让Jenkins能够与Docker容器平台进行集成。它允许在Jenkins构建过程中创建、管理和销毁Docker容器&#xff0c;为需要Docker化的项目提供了极大的便利性。对于需要在容器中…

Leetcode—1491.去掉最低工资和最高工资后的工资平均值【简单】

2023每日刷题&#xff08;六十八&#xff09; Leetcode—1491.去掉最低工资和最高工资后的工资平均值 实现代码 class Solution { public:double average(vector<int>& salary) {double sum 0;int n salary.size();sort(salary.begin(), salary.end());for(int i…

全部没有问题(三)

C语言 吞空格 一共三种办法&#xff1a; fflush(stdin), while(getchar()!\n), scanf("%*c") p.s visual studio已经移除gets函数了&#xff0c;要换编译器/函数&#xff0c;visual C可以的 #include <stdio.h>int main() {char x[100], y[100], z[100];i…

贪吃蛇(十)贪吃蛇吃食物

上节讲到限制蛇身回头&#xff0c;本节要实现吃食物功能 实现思路 在存储上食物方面可以复用蛇的结构体。初始化食物的时候&#xff0c;我们设置食物的坐标&#xff0c;每次调用这个函数的时候&#xff0c;坐标发生一些规律的变化。另外我们需要扫描食物的函数&#xff0c;这…

数据大模型与低代码开发:赋能技术创新的黄金组合

在当今技术领域&#xff0c;数据大模型和低代码开发已经成为两个重要的趋势。数据大模型借助庞大的数据集和强大的计算能力&#xff0c;助力我们从海量数据中挖掘出有价值的洞见和预测能力。与此同时&#xff0c;低代码开发通过简化开发流程和降低编码需求&#xff0c;使得更多…

淘宝商品评论API:电商行业的战略资源与制胜之道

在电商行业&#xff0c;数据是金。而其中&#xff0c;用户评论数据更是无价之宝。它不仅仅反映了商品的质量和卖家的服务态度&#xff0c;更是消费者在决策时的关键参考。正因如此&#xff0c;获得淘宝商品评论API的重要性不言而喻。 一、数据背后的无尽宝藏 淘宝&#xff0c;…

java的XWPFDocument3.17版本学习

maven依赖 <dependency><groupId>org.apache.poi</groupId><artifactId>poi-ooxml</artifactId><version>3.17</version> </dependency> 测试类&#xff1a; import org.apache.poi.openxml4j.exceptions.InvalidFormatExcep…

人工智能_机器学习072_SVM支持向量机_人脸识别模型训练_训练时间过长解决办法_数据降维_LFW人脸数据建模与C参数选择---人工智能工作笔记0112

我们先来看一下之前的代码: import numpy as np 导入数学计算库 from sklearn. svm import SVC 导入支持向量机 线性分类器 import matplotlib.pyplot as plt 加载人脸图片以后,我们用pyplot把人脸图片数据展示一下 from sklearn.model_selection import train_test_split 人脸…

3. 结构型模式 - 组合模式

亦称&#xff1a; 对象树、Object Tree、Composite 意图 组合模式是一种结构型设计模式&#xff0c; 你可以使用它将对象组合成树状结构&#xff0c; 并且能像使用独立对象一样使用它们 问题 如果应用的核心模型能用树状结构表示&#xff0c; 在应用中使用组合模式才有价值。 …

优化模型:MATLAB整数规划

一、整数规划介绍 1.1 整数规划的定义 若规划模型的所有决策变量只能取整数时&#xff0c;称为整数规划。若在线性规划模型中&#xff0c;变量限制为整数&#xff0c;则称为整数线性规划。 1.2 整数规划的分类 整数规划模型大致可分为两类&#xff1a; &#xff08;1&…

机场数据治理系列介绍(1):机场行业数据中台中的数据管理顶层设计方案

目录 1、战略目标与价值 2、组织架构与角色分配 3、数据流程管理 4、数据质量管理 5、数据安全与隐私保护 6、技术平台选择与部署 7、数据服务与API管理 8、数据培训与文化推广 9、持续改进与优化 民航机场行业的数据中台中&#xff0c;有关数据管理顶层设计方案需要结…

C# WPF上位机开发(文件对话框和目录对话框)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 一个上位机软件在处理数据的时候&#xff0c;除了配置文件、数据文件之外&#xff0c;一般还需要使用选择对话框进行文件和目录的选取。如果不这样…

Oracle的学习心得和知识总结(三十一)| ODBC开放式数据库连接概述及应用程序开发

目录结构 注&#xff1a;提前言明 本文借鉴了以下博主、书籍或网站的内容&#xff0c;其列表如下&#xff1a; 1、参考书籍&#xff1a;《Oracle Database SQL Language Reference》 2、参考书籍&#xff1a;《PostgreSQL中文手册》 3、EDB Postgres Advanced Server User Gui…

不忍学弟学妹受苦受难!!!逐一讲解发动机原理实验报告(1)

固体火箭发动机侵蚀燃烧测试实验 经过了愉快迷糊——哦不瑟瑟发抖——哦不痛不欲生的两天&#xff0c;终于和小伙伴们协力完成了西北工业大学航天学院发动机原理实验报告。具体的实验指导书均可在本人博客资源站下载。 固体火箭发动机侵蚀燃烧测试实验&#xff0c;嗯哼—— 实…

Python脚本打包成exe文件

我们很多时候写好一个python脚本之后&#xff0c;想要发给朋友&#xff0c;可是朋友没有安装python怎么办呢&#xff1f;别急&#xff0c;今天我就教你如何将python脚本打包成exe可执行文件&#xff0c;这样无论你的朋友有没有安装python&#xff0c;都可以运行你写好的程序&am…

ebay倒计时活动攻略,ebay倒计时活动怎么做的?——站斧浏览器

ebay倒计时活动攻略 在ebay上做倒计时活动时&#xff0c;可以参考以下攻略&#xff1a; 制定合理的ebay优惠方案。可以根据消费者的需求和购买习惯&#xff0c;制定不同的优惠方案&#xff0c;例如满减、折扣、赠品等。同时&#xff0c;要保证优惠方案的真实性和公平性&#…