HTML快速入门

news2024/10/7 14:27:09

目录

  • HTML概念
  • HTML基本格式
  • 基本语法
  • 常用标签
    • 1.文件标签：构成html最基本的标签
    • 2.文本标签：和文本有关的标签
    • 3.列表标签
    • 4.图片标签
    • 5.超链接标签
    • 6.表格标签
    • 7.表单标签

HTML概念

HTML是最基础的网页开发语言，Hyper Text Markup Language，超文本标记语言.

  1. 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.

  2. 标记语言：

  • 由标签构成的语言。<标签名称> 如 html，xml
  • 标记语言不是编程语言

HTML基本格式

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

（1）<!DOCTYPE>声明必须是HTML 文档的第一行，位于 标签之前。<!DOCTYPE>声明不是 HTML 标签，是一条指令，它用于向浏览器说明当前文档使用哪种HTML标准规范。定义文档类型。
（2）标签位于<!DOCTYPE>声明之后，被称为根标签。根标签主要用于告知浏览器该文档是一个HTML文档。其中，标签标志着HTML文档的开始，标签则标志着HTML文档的结束，它们之间是文档的头部和主体内容。
（3）标签用于定义HTML文档的头部信息，也被称为头部标签。标签紧跟在之后，主要用于封装其他位于文档头部的标签，如、、及</link></meta>

基本语法

（1） html文档后缀名 .html 或者 .htm 。
（2）标签分为
①双标签：有开始标签和结束标签。如 <html> </html>
②单标签：开始标签和结束标签在一起。如 <br/>
③注释标签：注释内容不会显示在浏览器窗口中。如<!--注释语句-->
（3）标签可以嵌套：
需要正确嵌套，不能你中有我，我中有你.
错误：<a><b></a></b>
正确：<a><b></b></a>
（4）在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来。
（5） html的标签不区分大小写，但是建议使用小写。

常用标签

1.文件标签：构成html最基本的标签

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
   你好！
</body>
</html>
  • <!DOCTYPE html>：定义文档类型为html文档
  • html：根标签
  • head：头标签。用于指定html文档的一些属性，引入外部的资源
  • title：标题标签
  • body：主体标签，用于定义html文档的内容

2.文本标签：和文本有关的标签

以下所写全部代码均在<body> </body>内。

  • 注释标签：<!-- 注释内容 -->
<!--你好-->
  • 标题标签：<h1> to <h6>
    h1~h6：字体大小逐渐递减
<h1>你好</h1>
<h2>你好</h2>
<h3>你好</h3>
<h4>你好</h4>
<h5>你好</h5>
<h6>你好</h6>

在这里插入图片描述

  • 段落标签：<p>
<p>
只有正确认识历史，才能更好地规划未来，开创未来。
</p>
<p>
中华民族有着五千多年的文明史，中华传统文化源远流长，博大精深。
</p>

在这里插入图片描述

  • 换行标签：<br>
<p>只有正确认识历史，才能更好地规划未来，开创未来。<br></br>中华民族有着五千多年的文明史，中华传统文化源远流长，博大精深。<br></br>她作为一种积淀型文化，长期以来，形成了一种具有相对稳定性的民族精神。</p>

在这里插入图片描述

  • 块级标签：
    div：每一个div占满一整行。
<div>1</div>
<div>2</div>

在这里插入图片描述

  • 行内标签：<span>
    文本信息在一行内展示，对文本没有影响
<p>
    使用HTML时，
    <span>通过br标签</span>可以实现<br>换行效果
</p>

在这里插入图片描述

  • 展示一条水平线：<hr>

    • 属性：
      color：颜色
      width：宽度
      size：高度
      align：对齐方式
      center：居中
      left：左对齐
      right：右对齐

    在这里插入图片描述

<hr color="red" width="500px" size="10px" align="center">
<hr color="black" width="500px" size="10px" align="left">
<hr color="blue" width="500px" size="10px" align="right">

在这里插入图片描述

  • 字体标签：<font>
    • 属性：
      color：颜色
      size：大小
      face：字体
默认样式<br>
<font face="微软雅黑" size="7" color="green">我是7号绿色文本，字体是微软雅黑</font>

在这里插入图片描述

  • 字体加粗：<b>
  • 字体斜体：<i>
<b>超文本</b>是用超链接的方法，将<i>各种不同空间的文字信息组织在一起的</i>网状文本

在这里插入图片描述

  • 文本居中：<center>
<center>hello JavaWeb</center>

在这里插入图片描述
用例：
文本是随便找的，没别的意思。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h4>公司简介</h4>
<hr color="red">
<p>
<font color="red">四川创途企业管理有限公司</font>成立于<b><i>2018年7月</i></b>，位于中国科技城绵阳西南科技大学国家大学科技园，是依托高校教师团队成立的专门从事高端会议服务、代理记账、审计、财税咨询、工商税务代理、知识产权代理等相关业务的专业服务机构。
</p>
<p>
    公司汇集了一批注册会计师、注册税务师、中级会计师、知识产权代理人在内的，精通财务、税务、审计咨询以及知识产权代理等业务，以及精于工商注册、税务流程和资质申办的专业代办人员，同时建立了严格的客户档案管理制度和保密制度。公司秉承“诚信经营，客户至上”的经营理念，致力于为中小微企业及高校科研团队提供精准、安全、规范、保密的专业化一条龙服务。
</p>
<hr color="red">
<font color="gray" size="1px" >
    <center>
        ©2018 All Right Reserved. 西南科技大学新能源与核环境材料研究中心
    </center>
</font>
</body>
</html>

3.列表标签

  1. 无序列表
    至少有一对<li></li>
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ul>

属性：

  • type
    • disc --> ●(默认值)
    • square --> ■
    • circle --> ○
<body>
<ul>
    <li>无序列表</li>
    <li type="disc">Java Web</li>
    <li type="square">数据库系统</li>
    <li type="circle">c程序语言</li>
</ul>
</body>

在这里插入图片描述

  1. 有序列表
<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ol>

<body>
<ol>
    <li>无序列表</li>
    <li>Java Web</li>
    <li>数据库系统</li>
    <li>c程序语言</li>
</ol>
</body>

在这里插入图片描述

  1. 定义列表
  • <dl>
  • <dt>
  • <dd>
<body>
<dl>
    <dt>第一点</dt>
    <dd>balabalabala</dd>
    <dd>阿巴阿巴阿巴</dd>
    <dt>第二点</dt>
    <dd>balabalabala</dd>
    <dd>阿巴阿巴阿巴</dd>
</dl>
</body>

在这里插入图片描述

4.图片标签

<img src= " ... ">
属性：

  • src：图片的路径
  • align：
    • left
    • right
    • center --> 居中
  • width
  • height
  • alt ——名称
  • border——设置边框

代码：

<img src="img/img/login_bg.png" align="right" alt="兵马俑" width="800" height="500"/>

在这里插入图片描述

相对路径

  • 以.开头的路径
  • ./：代表当前目录 ./image/1.jpg
  • ../:代表上一级目录
    <img src="./image/jiangwai_1.jpg">
    <img src="../image/jiangwai_1.jpg">

5.超链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

<body>

新窗口打开：<a href="http://www.baidu.com" target="_blank">百度</a></br>
父框架集中打开：<a href="http://www.baidu.com" target="_parent">百度</a></br>
默认原窗口打开：<a href="http://www.baidu.com" target="_self">百度</a></br>
整个窗口中打开：<a href="http://www.baidu.com" target="_top">百度</a></br>

</body>

在这里插入图片描述
新窗口打开：
在这里插入图片描述

其他打开方式：
在这里插入图片描述

6.表格标签

  • table：定义表格
    • width：宽度
    • border：边框
    • cellpadding：定义内容和单元格的距离
    • cellspacing：定义单元格之间的距离.如果指定为0,则单元格的线会合为1条
    • bgcolor：背景色
    • align：对齐方式
  • tr：定义行
    • bgcolor：背景色
    • align：对齐方式
  • td：定义单元格
    • colspan：合并列
    • rowspan：合并行

用例：跨行跨列表格
在这里插入图片描述

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

<table border="1px" cellspacing="0px" width="500px" height="300px">
  <tr>
    <td colspan="2">11</td>
    <!--<td>12</td>-->
    <td>13</td>
    <td>14</td>
  </tr>

  <tr>
    <td>21</td>
    <td rowspan="2" colspan="2">22</td>
    <!--<td>23</td>-->
    <td>24</td>
  </tr>

  <tr>
    <td>31</td>
    <!--<td>32</td>-->
    <!--<td>33</td>-->
    <td rowspan="2">34</td>
  </tr>

  <tr>
    <td>41</td>
    <!--<td>42</td>-->
    <td>42</td>
    <td>43</td>
  </tr>
</table>

</body>
</html>

7.表单标签

表单就是在网页上用于输入信息的区域，它的主要功能是收集数据信息，并将这些信息传递给后台信息处理模块。

①表单标签
表单标签：所有需要提交到服务器端的表单项必须使用<form></form>括起来！

form 标签属性：

  • action,整个表单提交的位置(可以是一个页面，也可以是一个后台 java 代码)
  • method,表单提交的方式(get/post/delete……等 7 种)

②文本输入项
<input type=”text” name=”” size=”” maxlenght=”” readonly=”” placehoder=””/>

  • name：提交到服务端必须指定的属性，其值可以任意，建议见文知意。
  • size：指定输入框的宽度
  • maxlenght：指定输入内容的长度
  • readonly：只读，内容不能别修改
  • placehoder：输入内容提示信息

③密码输入框
<input type=”password” name=”” />

④单选框
<input type=”radio” name=”” value=”” checked=””/>

  • name：用于分组
  • value：提交到服务端必须指定的属性，其值可以任意，建议见文知意。
  • checked：默认选中

⑤多选按钮
<input type=”checkbox” name=”” value=”” checked=”” />

⑥下拉列表

<select name=””>
   <option value=”” selected=””>选项1</option>
   <option>选项2</option>
</select>
  • name：分组
  • value：提交到服务端必须指定的属性，其值可以任意，建议见文知意
  • selected：默认选中

⑦文件上传项
<input type=”file” name=””/>

⑧文本输入域
<textarea name=””></textarea>

⑨提交按钮
<input type=”submit” value=””/>

  • value：提交到服务端必须指定的属性，其值可以任意，建议见文知意

⑩普通按钮
<input type=”button” value=””/>

⑪重置按钮
<input type=”reset” value=””/>

⑫隐藏项
<input type=”hidden” name=””/>
用于用户比较敏感的一些信息。

用例：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<body>
    <form action="#" method="post">
        <table border="0px" align="center" cellpadding="2">
            <tr>
                <td align="right">用户名：</td>
                <td>
                    <input type="text",name="username">
                </td>
            </tr>

            <tr>
                <td align="right">密码：</td>
                <td>
                    <input type="password",name="password">
                </td>
            </tr>

            <tr>
                <td align="right">性别：</td>
                <td>
                    <input type="radio" name="gender" value="male">男
                    <input type="radio" name="gender" value="female">女
                </td>
            </tr>

            <tr>
                <td align="right">兴趣：</td>
                <td>
                    <input type="checkbox" name="interest" value="film"/>看电影
                    <input type="checkbox" name="interest" value="code"/>敲代码
                    <input type="checkbox" name="interest" value="game"/>玩游戏
                </td>
            </tr>

            <tr>
                <td align="right">头像：</td>
                <td>
                    <input type="file" name="photo">
                </td>
            </tr>

            <tr>
                <td colspan="2" align="center">
                    <input type="submit" value="注册">
                    <input type="reset" value="重填">
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

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

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

相关文章

保姆级使用PyTorch训练与评估自己的Replknet网络教程

保姆级使用PyTorch训练与评估自己的Replknet网络教程

文章目录前言0. 环境搭建&快速开始1. 数据集制作1.1 标签文件制作1.2 数据集划分1.3 数据集信息文件制作2. 修改参数文件3. 训练4. 评估5. 其他教程前言 项目地址&#xff1a;https://github.com/Fafa-DL/Awesome-Backbones 操作教程&#xff1a;https://www.bilibili.co…
阅读更多...
cocoscreator打包android app bundle使用Play Asset Delivery分包

cocoscreator打包android app bundle使用Play Asset Delivery分包

1.cocoscreator构建完android项目 2.用androidstudio打开项目 3.点击androidstudio上项目目录左上角的Android改为Project 4. 在项目目录下新建Modul 5.选择Android Library 6.命名assetPack1或者自定义&#xff0c;点击Finish 7.在新建的assetPack1目录下找到build.gradle并…
阅读更多...
【408数据结构】一篇文章吃透算法时间复杂度

【408数据结构】一篇文章吃透算法时间复杂度

文章目录前言1. 什么是好的算法2. 算法的效率度量3. 时间复杂度4. 大 O 时间复杂度表示法5. 算法时间复杂度计算规则&#x1f351; 规则 1&#xff1a;只关注循环中的代码段&#x1f351; 规则 2&#xff1a;加法规则&#x1f351; 规则 3&#xff1a;乘法规则6. 常见算法时间复…
阅读更多...
两道有关链表的练习

两道有关链表的练习

目录 一、分割链表 二、奇偶链表 一、分割链表 给你一个链表的头节点 head 和一个特定值 x &#xff0c;请你对链表进行分隔&#xff0c;使得所有 小于 x 的节点都出现在 大于或等于 x 的节点之前。 你不需要 保留 每个分区中各节点的初始相对位置。 示例 1&#xff1a; 输…
阅读更多...
国科大论文latex模板中可能的注意事项

国科大论文latex模板中可能的注意事项

背景 国科大2022年9月发布了毕业论文的LaTeX模板&#xff0c;它是在ucasthesis上修改而来的&#xff0c;但近日使用国科大发布版本时发现有几点不同以及需要注意的地方。本人只会简单使用latex&#xff0c;但并不熟悉latex样式编辑&#xff0c;因此以下介绍与方法仅供参考。仅…
阅读更多...
基于 Flink CDC 的实时同步系统

基于 Flink CDC 的实时同步系统

摘要&#xff1a;本文整理自科杰科技大数据架构师张军&#xff0c;在 FFA 2022 数据集成专场的分享。本篇内容主要分为四个部分&#xff1a;功能概述架构设计技术挑战生产实践Tips&#xff1a;点击「阅读原文」查看原文视频&演讲 ppt科杰科技是专门做大数据服务的供应商&am…
阅读更多...
Regmap API 实验

Regmap API 实验

目录 一、Regmap regmap 结构体 regmap_config 结构体 regmap_config 掩码设置 二、Regmap 操作函数 1、Regmap 申请与初始化 2、 regmap 设备访问 API 函数 3、regmap_update_bits 函数 4、regmap_bulk_read函数 5、regmap_bulk_write 三、修改SPI实验 1、添加regmap…
阅读更多...
Kubenates中的日志收集方案ELK(下)

Kubenates中的日志收集方案ELK(下)

1、rpm安装Logstash wget https://artifacts.elastic.co/downloads/logstash/logstash-6.8.7.rpm yum install -y logstash-6.8.7.rpm2、创建syslog配置 input {beats{port> 5044 } }output {elasticsearch {hosts > ["http://localhost:9200"]index …
阅读更多...
【博客632】k8s service ession affinity原理与iptables recent模块

【博客632】k8s service ession affinity原理与iptables recent模块

k8s service ession affinity原理与iptables recent模块 1、iptables recent模块 作用&#xff1a; iptables的recent模块用于限制一段时间内的连接数, 是谨防大量请求攻击的必杀绝技! 善加利用该模块可充分保证服务器安全。 recent常用参数&#xff1a; –name 设定列表名称…
阅读更多...
Git使用教程：最详细、最傻瓜、最浅显、真正手把手教

Git使用教程：最详细、最傻瓜、最浅显、真正手把手教

GITGIT版本控制版本控制的意义分布式图形化客户端环境搭建仓库的操作分支使用场景命令远程仓库操作生成公钥命令冲突忽略列表的配置时机配置方式版本回退练习&#xff1a;GIT 版本控制 把文件系统中的文件&#xff0c;按照修改的版本进行记录&#xff0c;进行管理的操作。 版…
阅读更多...
Spring Cloud （ Consul注册、发现 ）

Spring Cloud （ Consul注册、发现 ）

操作步骤&#xff1a; 安装Consul服务端在服务内添加客户端依赖修改配置类&#xff0c;添加注解编写yml文件一、安装Consul服务端 链接&#xff1a;https://www.consul.io/downloads.html&#xff0c;解压 开启cmd&#xff0c;进入你的Consul解压路径&#xff0c;我是在E盘 …
阅读更多...
扩展欧几里得算法及其应用

扩展欧几里得算法及其应用

前言 由于数论的板子真的很抽象&#xff0c;也很难背&#xff0c;所以特此记录扩展欧几里得算法的板子和它的用途 本篇文章只涉及应用&#xff0c;不涉及证明&#xff0c;如需理解证明还请各位移步其他优秀的讲解&#xff01; 扩展欧几里得算法 先粘一下板子的代码 typedef lo…
阅读更多...
JAVA面向对象特征之——封装

JAVA面向对象特征之——封装

4.封装 private关键字 是一个权限修饰符 可以修饰成员(成员变量和成员方法) 作用是保护成员不被别的类使用&#xff0c;被private修饰的成员只在本类中才能访问 针对private修饰的成员变量&#xff0c;如果需要被其他类使用&#xff0c;提供相应的操作 提供 “get变量名()…
阅读更多...
面向数据安全共享的联邦学习研究综述

面向数据安全共享的联邦学习研究综述

开放隐私计算 摘　要&#xff1a;跨部门、跨地域、跨系统间的数据共享是充分发挥分布式数据价值的有效途径&#xff0c;但是现阶段日益严峻的数据安全威胁和严格的法律法规对数据共享造成了诸多挑战。联邦学习可以联合多个用户在不传输本地数据的情况下协同训练机器学习模型&am…
阅读更多...
【SpringCloud】SpringCloud详解之Feign远程调用

【SpringCloud】SpringCloud详解之Feign远程调用

目录前言SpringCloud Feign远程服务调用一.需求二.两个服务的yml配置和访问路径三.使用RestTemplate远程调用(order服务内编写)四.构建Feign(order服务内配置)五.自定义Feign配置(order服务内配置)六.Feign配置日志(oder服务内配置)七.Feign调优(order服务内配置)八.抽离Feign前…
阅读更多...
SNS (Simple Notification Service)简介

SNS (Simple Notification Service)简介

SNS (Simple Notification Service) 是一种完全托管的发布/订阅消息收发和移动通知服务&#xff0c;用于协调向订阅终端节点和客户端的消息分发。 和SQS (Simple Queue Service)一样&#xff0c;SNS也可以轻松分离和扩展微服务&#xff0c;分布式系统和无服务应用程序&#xf…
阅读更多...
九龙证券|直逼1.5万亿！A股融资余额创年内新高，青睐这些行业和个股

九龙证券|直逼1.5万亿！A股融资余额创年内新高，青睐这些行业和个股

2023年以来&#xff0c;A股商场震动重复&#xff0c;商场走势整体先扬后抑&#xff0c;各路资金看法纷歧&#xff0c;但数据显现&#xff0c;融资客在此期间整体持续净买入&#xff0c;未受到商场动摇的明显冲击&#xff0c;融资余额日前已迫临1.5万亿元&#xff0c;创出年内新…
阅读更多...
磨金石教育摄影技能干货分享｜烟花三月下扬州，是时候安排了！

磨金石教育摄影技能干货分享｜烟花三月下扬州，是时候安排了！

人间三月最柔情&#xff0c;杨柳依依水波横。三月的风将要吹来&#xff0c;春天的门正式打开。对中国人来说&#xff0c;古往今来&#xff0c;赏春最好的地方是江南。人人都说江南好&#xff0c;可是江南哪里好呢&#xff1f;古人在这方面早就给出了答案&#xff1a;故人西辞黄…
阅读更多...
使用高精度秒表StopWatch测试DateTime.Now的精度

使用高精度秒表StopWatch测试DateTime.Now的精度

StopWatch使用的命名空间&#xff1a;using System.Diagnostics;StopWatch的使用方法&#xff1a;创建Stopwatch对象&#xff1a;stopwatch&#xff1b;stopwatch计时表开启&#xff1a;stopwatch.Start();stopwatch计时表关闭&#xff1a;stopwatch.Stop();计算stopwatch.Stop…
阅读更多...
【剧前爆米花--爪哇岛寻宝】进程的调度以及并发和并行，以及PCB中属性的详解。

【剧前爆米花--爪哇岛寻宝】进程的调度以及并发和并行，以及PCB中属性的详解。

作者&#xff1a;困了电视剧 专栏&#xff1a;《JavaEE初阶》 文章分布&#xff1a;这是关于进程调度、并发并行以及相关属性详解的文章&#xff0c;我会在之后文章中更新有关线程的相关知识&#xff0c;并将其与进程进行对比&#xff0c;希望对你有所帮助。 目录 什么是进程/…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023