HTML简介

news2024/11/24 17:02:30

目录

一、HTML基础知识

二、HTML常见标签 

注释标签

标题标签 

段落标签

常用的转义字符 

换行标签 

格式化标签 

图片标签 

超链接标签 

表格标签 

列表标签 

input标签 

文本框

密码框

单选框 

复选框

普通按钮

选择文件 

下拉标签 

多行文本输入 

无语义标签

div

span 

三、综合案例 

1、简单的相亲页面注册

2、相亲的简历信息 


一、HTML基础知识

HTML代码由大量的标签组成。

HTML文件的基本结构:

<html> 

        <head>

                <title>页面标题</title>

        </head>

        <body>

                页面内容

        </body>

</html>

在这个基本结构中也会体现出标签的层次关系:

  • 父子关系:html是head和body的父标签,head是title的父标签。
  • 兄弟关系:head和body是兄弟关系。

对于HTML代码文件可以在记事本进行编写,只要确保后缀名是.html,然后双击就会文件就会在浏览器中进行页面展示,HTML也可以在IDEA等开发工具中编写,输入!+tab就会自动生成HTML文件的基本框架。

二、HTML常见标签 

注释标签

注释标签:

<!-- 注释 -->

可以选中注释内容,使用快捷点crtl+/来进行注释或者取消注释。

标题标签 

标题标签:

<h1>一级标签</h1>

<h2>二级标签</h2>

<h3>三级标签</h3>

<h4>四级标签</h4>

<h5>五级标签</h5>

<h6>六级标签</h6>

注意:

  • HTML拥有六级标签,标签字体逐渐变小。
  • 标题标签会自动换行,不需要在其后加上换行符。

段落标签

段落标签:<p> 段落内容 </p>

注意:

在段落中手动不管输入多少个空格,在运行显示的时候只有一个空格。

在段落中手动输入一个换行,只是相当于空格,并不会真的换行。

HTML的段落中无法设置首行缩进,需要用CSS来完善。

输入lorem之后再加tab键会随机生成一个段落。

常用的转义字符 

在段落中如果用到多个空格和一些特殊符号就需要用到转义字符,下表是一些常见的转义字符:

原始字符转义字符
"&quot
&&amp
<&lt
>&gt
连续空格&nbsp

换行标签 

换行标签:<br/>

换行标签是一个单标签,不存在结束标签。

格式化标签 

格式化标签:

  • 加粗:<strong> 加粗 <strong> 或 <b> 加粗 </b>
  • 倾斜:<em> 倾斜 </em> 或 <i> 倾斜</i>
  • 删除线:<del> 删除线 </del> 或 <s> 删除线 </s>
  • 下划线:<ins> 下划线 </ins> 或 <b> 下划线 </b>

图片标签 

图片标签:

<img src="图片地址" alt="替换文本" title="提示文本" width= " px" height=" px" border=" px">

注意:

  • 图片标签中必须带有src属性,其他可以省略,并且各属性的顺序随意。
  • src中可以是绝对地址或相对地址。
  • 替换文本指的是图片加载失败了就会显示出来,如果图片加载成功就不会显示。
  • title提示文本是当你把鼠标放到图片上时就会出现。
  • width、height、border是用于设置图片宽度、高度和边框,单位是px(像素)。

超链接标签 

超链接标签:

<a href="网站地址" target="打开方式"> 超链接 </a>

注意:

  • href是超链接文件中必须具备的,指定要跳转到那个页面。href可以直接输入网址,也可以另一个HTML文件,还可以是一个文件名表示下载链接。
  • target指的是打开的方式,有_self表示在原标签页打开,还有_blank会用新的标签页打开。
  • href等于"#",表示是一个空链接。
  • 超链接不一定只是文字,也可以是图片等,例如双击图片就会跳转页面。

表格标签 

表格标签有:

  • table:表示整个表格。
  • tr:表示表格的一行。
  • td:表示一个单元格。
  • th:表示表头单元格,默认会居中加粗。

table包含tr,tr中包含td或th。

table标签中也有多个属性:

  • align:表格相对于周围元素的对齐方式。
  • border:表示边框宽度。
  • cellpadding:内容距离边框的距离,默认是1px。
  • cellspacing:单元格之间的距离,默认是2px。
  • width:设置表格宽度。
  • height:设置表格的宽度。

列表标签 

列表标签可以使页面布局更加美观。

列表标签有:
无序列表

<ul>

        <li>列表1</li>

        <li>列表2</li>

        ……

</ul>

有序列表

<ol>

        <li>列表1</li>

        <li>列表2</li>

        ……

</ol>

自定义列表

<dl>

        <dt>小标题</dt>

        <dd>列表1</dd>

        <dd>列表2</dd>

        ……

</dl>

input标签 

input标签包含各种输入控件,有单行文本框、按钮、单选框和复选框。

input标签的属性有:

type(类型标签,必须包含):可以是text、button、checkbox等。

name:给input起名字,例如对于单选按钮,具有相同的name才能进行单选。

value:input的默认值。

checked:默认选中项,主要用于单选按钮和多选按钮。

maxlength:input标签的最大长度。

文本框

姓名<input type="text">

效果:

密码框

密码<input type="password">

效果:

 

单选框 

简易版本:点击按钮才能选中,单击文字无效。

​​​​​​​性别<input type="radio" name="gender"> 男 <input type="radio" name="gender"> 女

升级版本:单击文字也代表选中,需要搭配label标签来进行使用,默认性别选择男。

性别<input type="radio" name="gender" id="male" checked="checked">
    <label for="male">男</label>
    <input type="radio" name="gender" id="female">
    <label for="female">女</label>

效果:

注意

  • 单选框中每个选项的name必须相同。
  • label标签的作用是点击文字也能选中,但是label标签的for属性内容要与单选框中的id进行对应。 

复选框

兴趣爱好<input type="checkbox"> 打篮球 <input type="checkbox"> 羽毛球
      <input type="checkbox"> 刷抖音 <input type="checkbox"> 躺平

复选框也可以搭配label标签和指定默认选项搭配使用。

效果:

普通按钮

普通按钮<input type="button" value="普通按钮">

效果:

这里点击之后是不会出现任何相应的,后续需要搭配Js来使用。 

选择文件 

选择文件<input type="file" value="上传文件">

效果:

 

下拉标签 

出生地<select>
    <option>西安</option>
    <option>上海</option>
    <option>北京</option>
</select>

效果:

 

多行文本输入 

备注<textarea rows="5" cols="30"></textarea>

效果:

​​​​​​​

无语义标签

div

div标签独占一行,是一个大盒子。

span 

span标签不独占一行,是一个小盒子。

三、综合案例 

1、简单的相亲页面注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dating</title>
</head>
<body>
    <h1>千里姻缘一线牵</h1>
    <img src="dating.jpg" width="500px" height="300px">
    <table cellspacing="0" width="300px">
        <tr> 
            <td>姓名 <input type="text"></td>
        </tr>
        <tr>
            <td>性别 <input type="radio" name="sex" id="male">
                <label for="male"><img src="male.png" width="10px" height="10px">男</label>
                <input type="radio" name="sex" id="female">
                <label for="female"><img src="female.png" width="15px" height="15px">女</label>
            </td>
        </tr>
        <tr>
            <td>
                出生年份 <select>
                <option>--请选择年份--</option>
                <option>1996</option>
                <option>1997</option>
                <option>1998</option>
                <option>1999</option>
                <option>2000</option>
                <option>2001</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                出生地 <select>
                <option>--请选择--</option>
                <option>上海</option>
                <option>西安</option>
                <option>北京</option>
                <option>兰州</option>
                <option>新疆</option>
                <option>杭州</option>
            </select>
            </td>
        </tr>
        <tr>
            <td>
                兴趣爱好 <input type="checkbox"> 打篮球 <input type="checkbox"> 羽毛球
                <input type="checkbox"> 刷抖音
            </td>

        </tr>
        <tr>
            <td>备注 <textarea cols="20px" rows="3px"></textarea></td>
        </tr>
        <tr>
            <td> <input type="button" value="注册"> </td>
        </tr>
    </table>
</body>
</html>

效果展示:dating 

2、相亲的简历信息 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Resume</title>
</head>
<body>
    <h1>个人基本信息</h1>
    <h2>姓名:张子晨</h2>
    <img src="hansome.png">
    <h3>个人基本信息</h3>
    <ul>
        <li>身高:185cm</li>
        <li>体重:75kg</li>
        <li>户籍:陕西省西安市</li>
    </ul>
    <p>微信:23901311k</p>
    <p>抖音主页:<a href="https://www.douyin.com/user/MS4wLjABAAAAQq5YKdWvTtJRyC9l7pelfwrbFpPos_-SzwMZ_Z5BRTD_IVTrv0APr-41xxV4AB5Z">美少年</a> </p>
    <h3>个人优势</h3>
    <ol>
        <li>脾气好</li>
        <li>家庭条件优越</li>
        <li>阳光幽默</li>
        <li>钟情</li>
    </ol>
    <p><strong>心动不如行动,希望早日找到心仪的另一半</strong></p>
</body>
</html>

效果展示:resume

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

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

相关文章

【哈希表】leetcode454.四数相加II(C/C++/Java/Python/Js)

leetcode454.四数相加II1 题目2 思路3 代码3.1 C版本3.2 C版本3.3 Java版本3.4 Python版本3.5 JavaScript版本4 总结需要哈希的地方都能找到map的身影 1 题目 题源链接 给你四个整数数组 nums1、nums2、nums3 和 nums4 &#xff0c;数组长度都是 n &#xff0c;请你计算有多少…

C中线程信号控制

一、场景介绍存在三个线程&#xff0c;一个主线程和两个子线程&#xff08;子线程数量不固定&#xff09;。为了节省频繁创建销毁线程造成的资源浪费&#xff0c;将这些线程设置为常驻线程。但这样引入了一个新的问题&#xff0c;如何协调这些线程完成工作。主线程内是循环检测…

Webgl实现的天气效果(下雨、下雪)

一、下雨效果如图&#xff1a; 还有一种雨水效果也不错 114 Three.js实现深度遮挡的下雨特效 | 暮志未晚-中文案例网 二、下雪的效果 57 Three.js 使用粒子实现下雪特效 | 暮志未晚-中文案例网 还有一种是通过网页CSS的形式做的2D雪效果 集合在一起的源码&#xff1a; https…

编译原理学习笔记17——语义分析和中间代码生成2

编译原理学习笔记17——语义分析和中间代码生成217.1 赋值语句的翻译17.2数组元素引用的翻译17.3 类型转换17.1 赋值语句的翻译 简单算术表达式及赋值语句 赋值语句生成三地址代码的S-属性文法 赋值语句生成三地址代码的S-属性文法 产生赋值语句三地址代码的翻译模式 产…

你真的了解工厂设计模式吗?(简单工厂模式+工厂方法模式+抽象工厂模式)

工厂解决的问题 客户端在调用是不想判断实例化哪一个类或者实例化的过程过于复杂。在工厂模式中&#xff0c;具体的实现类创建过程对客户端是透明的&#xff0c;客户端不决定具体实例化哪一个类&#xff0c;而是交由“工厂”来实例化。 简单工厂模式 类图 简单工厂模式由三类…

Git GitHub纯新手入门教程

参考视频&#xff1a;Github 新手够用指南 | 全程演示&个人找项目技巧放送_哔哩哔哩_bilibili40 分钟学会 Git | 日常开发全程大放送&个搭配GitHub_哔哩哔哩_bilibiliGit和GitHub分别是什么Git是一个运行在电脑上的版本控制软件&#xff08;保存代码各个阶段历史记录的…

在使用定时器过程中存在的那些陷阱

在使用定时器的过程中&#xff0c;如果你不了解定时器的一些细节&#xff0c;那么很有可能掉进定时器的一些陷阱里&#xff0c;函数 setTimeout 在时效性上面有很多先天的不足&#xff0c;所以对于一些时间精度要求比较高的需求&#xff0c;应该有针对性地采取一些其他的方案 …

【回眸】牛客网刷刷刷(四)软件工程(续)ZooKeeper字符串链表(专题)

前言 本篇博客为笔者刷客观笔试题时做的一些记录以供以后复习时翻阅&#xff0c;如果能够帮到您是最大的荣幸&#xff01;如果能给笔者一个三连将感激不尽&#xff01; 知识点串烧 软件工程专题&#xff08;续上篇&#xff09; 有一些可维护特性是相互促进的&#xff0c;如…

【技术美术图形部分】PBR Disney原则的BRDF 次表面散射模型

写在前面 补充去年遗漏下的知识。很多叙述都是参考了众多大佬的文章&#xff01;因为是作为个人学习总结的博客&#xff0c;所以直接卑微的借鉴过来了&#xff0c;后面会给出所有参考的文章。 另外&#xff0c;放上一个忘了在哪一篇知乎评论里的截图&#xff1a; 说的蛮好。 …

MySQL基础篇笔记

文章目录导入表的问题第3章_最基本的SELECT语句1. SQL语言的规则和规范1) 基本规则2) SQL大小写规范&#xff08;建议遵守&#xff09;3) 注释4) 命名规则2. 基本的SELECT语句1) SELECT ... FROM2) 列的别名3) 去除重复行4) 空值参与运算5) 着重号 6) 查询常数3. 显示表结构4. …

贪心算法(基础)

目录 一、什么是贪心&#xff1f; &#xff08;一&#xff09;以教室调度问题为例 1. 问题 2. 具体做法如下 3. 因此将在这间教室上如下三堂课 4. 结论 &#xff08;二&#xff09;贪心算法介绍 1. 贪心算法一般解题步骤 二、最优装载问题 &#xff08;一&#xf…

智能驾驶 车牌检测和识别(四)《Android实现车牌检测和识别(可实时车牌识别)》

智能驾驶 车牌检测和识别&#xff08;四&#xff09;《Android实现车牌检测和识别&#xff08;可实时车牌识别&#xff09;》 目录 智能驾驶 车牌检测和识别&#xff08;四&#xff09;《Android实现车牌检测和识别&#xff08;可实时车牌识别&#xff09;》 1. 前言 2. 车…

SLAM数学知识回顾

文章目录1、三角函数2、向量运算&#xff08;1&#xff09;负向量&#xff08;2&#xff09;向量的模&#xff08;3&#xff09;标量与向量的运算&#xff08;4&#xff09;标准化向量&#xff08;5&#xff09;向量的加法和减法&#xff08;6&#xff09;距离公式&#xff08;…

三十七、Kubernetes1.25中数据存储第三篇

1、概述在前面已经提到&#xff0c;容器的生命周期可能很短&#xff0c;会被频繁地创建和销毁。那么容器在销毁时&#xff0c;保存在容器中的数据也会被清除。这种结果对用户来说&#xff0c;在某些情况下是不乐意看到的。为了持久化保存容器的数据&#xff0c;kubernetes引入了…

计算机视觉OpenCv学习系列:第十部分、实时人脸检测

第十部分、实时人脸检测第一节、实时人脸检测1.OpenCV人脸检测支持演化2.OpenCV DNN检测函数3.代码练习与测试学习参考第一节、实时人脸检测 1.OpenCV人脸检测支持演化 OpenCV4 DNN模块 DNN- 深度神经网络 来自另外一个开源项目tiny dnnOpenCV3.3正式发布最新版本OpenCV4.5.…

网络编程 之 epoll

epoll 参数设置 events设置 ev.events EPOLLIN | EPOLLET;epoll实现TCP通讯时&#xff0c;events通用设置如上&#xff0c;EPOLLIN代表可socket套接字可接收数据&#xff0c;EPOLLET代表边沿触发。在服务器端, 接受客户端连接的socket不能设置为EPOLLOUT&#xff0c;只设置E…

【5】【TypeScript】(TypeScript=Type+JavaScript)

Typescript 相比js特有 类型系统&#xff1b;对象的接口DOM操作时候需要进行类型断言上面三个实际是类型系统的三处体现枚举js中&#xff0c;-号可以强制转换为数值&#xff0c;ts不行 所有合法的js都是ts 1、安装 安装进度卡住可以用淘宝镜像 &#xff08;在后面加 --registr…

Spring Cloud Hystrix有什么作用?

在微服务架构中&#xff0c;通常会存在多个服务层调用的情况&#xff0c;如果基础服务出现故障可能会发生级联传递&#xff0c;导致整个服务链上的服务不可用&#xff0c;如图1所示。图1 服务故障的级联传递在图1中&#xff0c;A为服务提供者&#xff0c;B为A的服务调用者&…

反欺诈(羊毛盾)API有什么作用?

肯定很多企业、商家都遭受过羊毛党的侵入&#xff0c;比如恶意注册、刷单、领用的行为。羊毛党具体有哪些危害呢&#xff1f; 羊毛党的危害 虚假用户裂变&#xff1a;识别在游戏解锁、红包裂变、助力砍价、电商拼团等用户拉新活动中作弊行为。虚假登录注册&#xff1a;防止机…

Java基于springboot大学生宿舍寝室考勤人脸识别管理系统

简介 Java基于springboot开发的大学生寝室管理系统宿舍管理系统。学生可以查找寝室和室友信息&#xff0c;可以申请换寝室&#xff0c;申请维修&#xff0c;寝室长提交考勤信息&#xff08;宿管确认学生考勤信息&#xff09;&#xff0c;补签&#xff0c;查看寝室通报&#xf…