HTML简单介绍

且视他人之疑目如盏盏鬼火,大胆地去你的夜路。

目录

1.网页

2.Web标准

3.HTML

3.1HTML结构

3.2HTML标签​编辑

4.标签介绍

4.1排版标签

4.2文本格式化标签

4.3媒体标签

4.3.1图片标签

4.3.2 音频标签

4.3.3视频标签

5.相对路径

6.链接标签

6.1target属性

7.列表标签

7.1无序列表

7.2有序列表

7.3自定义列表

8.表格标签

8.1表格相关属性

8.2表格标题和表头单元格标签

8.3表格头部,主体,底部

8.4合并单元格

9.input系列标签

9.1type属性值

9.2radio:单选框

9.3multiple多选文件

9.4表单域

10.button按钮标签

11.select下拉菜单标签

12.textarea文本域标签

13.label标签

14.布局标签div和span

14.1没有语义的

14.2有语义的布局标签

15.常见字符实体


1.网页

组成:文字,图片,音频,视频,超链接

2.Web标准

3.HTML

超文本标记语言

3.1HTML结构

网页可以看成是一篇文章

如:整体,头部,标题,主体

3.2HTML标签

分类:标签名,开始标签,结束标签,单标签

标签和标签的关系:嵌套和并列

网页中的固定结构是通过特点的HTML标签进行描述的

4.标签介绍

4.1排版标签

标题标签(<hn(1~6)></hn>标签)

段落标签(<p></p>)特点:段落之间有间隙,独占一行

换行标签(<br>)

水平线标(<hr>)

4.2文本格式化标签

加粗:<b></b><strong></strong>

下划线:<u></u><ins></ins>

倾斜:<i></i> <em></em>

删除线:<s></s> <del></del>

4.3媒体标签

4.3.1图片标签

<img src="" alt="当图片不可以正常加载时,显示给用户的" title=" " width=" " height="">

4.3.2 音频标签

<audio src=" " controls autoplay loop>

4.3.3视频标签

<video src=" " controls autoplay loop>

5.相对路径

(上级目录,下级目录,当前目录)

比如在src当中,需要给出路径,找到对应的资源名称

./是当前目录

../是上级目录

下级目录直接输入要进入目录名字即可

6.链接标签

<a href=" "></a>

6.1target属性




7.列表标签

使用场景:1.规整2.一行3.一列

7.1无序列表

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

7.2有序列表

<ol><li><li><ol>

7.3自定义列表

<dl><dt></dt><dd></dd></dl>

需要注意的是,这种形式的需要css来进行美化

8.表格标签

此时进行观察,发现还没有表格的形式

但是给表格进行相关属性的添加之后,就会有表格的形式了

8.1表格相关属性

8.2表格标题和表头单元格标签

8.3表格头部,主体,底部

8.4合并单元格

1.在代码中删除李四的成绩,然后在张三对应的成绩列中添加属性。rowspan="合并的单元格个数"

注意点:




9.input系列标签

9.1type属性值

9.2radio:单选框

9.3multiple多选文件

9.4表单域

form表单,用来建立input标签之间的关系

当type属性值为submit,reset和button时,需要form表单用来建立input标签之间的关系

10.button按钮标签

和input标签类似,但是button可以和css进行按钮美化,功能更强

11.select下拉菜单标签

select标签,下拉菜单的整体

option标签,下拉菜单的每一项

selected:下拉菜单默认选中

12.textarea文本域标签

最后是正方形,且可以进行拖拽,在css当中会禁用掉拖拽功能

在页面当中,如何做到单选框和选择项的内容都可以被选择,就要谈到我们的label标签了

13.label标签

方式2:

14.布局标签div和span

14.1没有语义的

14.2有语义的布局标签

15.常见字符实体

结构&nbsp;空格

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

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

相关文章

【赠书第5期】AI时代项目经理成长之道:ChatGPT让项目经理插上翅膀

文章目录 前言 1 ChatGPT为项目经理带来便利 2 提供自动化的通知和提醒 3 提供数据分析和可视化 4 结论 5 推荐图书 6 粉丝福利 前言 在现代商业环境中&#xff0c;项目经理需要具备高度的灵活性和响应能力。而现在&#xff0c;随着技术的不断提升和新工具的涌现&#…

大厂设计师必备的8款Sketch插件

每个设计师都渴望有一个高效的插件来提高他们的设计能力。设计插件有助于自动化工作流程&#xff0c;快速组织设计文件或简化内容创建。Sketch可以说是设计师知名的设计工具&#xff0c;特别是其资源社区拥有丰富的Sketch插件&#xff0c;大大提高了设计师的工作效率。本文让设…

打开word文档报错,提示HRESULT 0x80004005 位置: 部分: /word/comments.xml,行: 0,列: 0

某用户遇到这样一个奇怪的问题&#xff0c;就是回复完word的批注后&#xff0c;保存文档再打开就会报错&#xff0c;提示很抱歉&#xff0c;无法打开XXX&#xff0c;因为内容有问题。&#xff0c;详细信息提示HRESULT 0x80004005 位置: 部分: /word/comments.xml,行: 0,列: 0 c…

解释tqdm模块显示进度条:

1. 在Python中&#xff0c;当你使用tqdm模块&#xff08;一个快速、可扩展的Python进度条库&#xff09;时&#xff0c;你可能会看到类似的输出&#xff1a;[6:20:38<6:34:14, 31.25s/it]。 这个输出提供了关于循环进度的详细信息&#xff1a; 6:20:38: 这是已经过去的时…

上海市合成生物产业协会第一届第一次会员大会暨成立仪式今日召开

IFTNews科技讯&#xff1a;11月12日下午&#xff0c;上海市合成生物产业协会第一届第一次会员大会暨成立仪式在上海浦东成功举办。上海市经济和信息化委员会副主任刘平、上海市科学技术委员会一级巡视员兼副主任朱启高、上海市推进科技创新中心建设办公室专职副主任陈尧水出席大…

MySQL:语法速查手册【持续更新...】

一、定义基本表 1、常用的完整性约束 主码约束 primary key外键约束 foreign key唯一性约束 unique非空性约束 not null取值约束 check2、例题 【例1】建立一个“学生”表Student&#xff0c;由学号Sno、姓名Sname、性别Ssex、年龄Sage、所在系Sdept五个属性组成。其中…

面试 | 再也不怕被问 Binder 机制了

Binder 机制 Binder 机制是 Android 特有的一种进程间通信&#xff08;IPC&#xff09;方式 1.1 Binder 机制的作用和原理&#xff1f; Linux系统将一个进程分为用户空间和内核空间。对于进程之间来说&#xff0c;用户空间的数据不可共享&#xff0c;内核空间的数据可共享&a…

【iOS】JSONModel的基本使用

cocoapods的安装和第三方库的配置之前的文章已有涉及&#xff0c;请参考&#xff1a;【iOS】AFNetworking的基本使用和【iOS】Masonry库的基本使用 常规解析JSON数据最基础的方法是使用NSJSONSerialization&#xff0c;见这篇文章【iOS】JSON解析&#xff0c;这样处理数据的方…

文件上传 [SUCTF 2019]CheckIn1

打开题目 我们用cmd curl --head url 查看网站使用的是什么服务器 此题用的是openresty&#xff0c;OpenResty 是一个基于 Nginx 与 Lua 的高性能 Web 平台 我们上传php&#xff0c;phtml的一句话木马都显示不合法 那我们试试传a.jpg的一句话木马 显示我们一句话木马内容里面…

为什么打开idea时,没有启动页面,如何解决?

更新idea2021.2后&#xff0c;当双击idea打开时&#xff0c;发现没有启动界面&#xff0c;直接进入IDEA界面&#xff0c;中间等待时间&#xff0c;让人误以为没有打开idea成功&#xff0c;使得多次点击idea图标。 解决方案就是 在idea界面菜单栏中找到帮助&#xff08;Help)&a…

“新KG”视点 | 王文广——图模互补:知识图谱与大模型的共生新模式

OpenKG 大模型专辑 导读 知识图谱和大型语言模型都是用来表示和处理知识的手段。大模型补足了理解语言的能力&#xff0c;知识图谱则丰富了表示知识的方式&#xff0c;两者的深度结合必将为人工智能提供更为全面、可靠、可控的知识处理方法。在这一背景下&#xff0c;OpenKG组织…

总台农业农村节目中心“金穗行动17联县” 融合传播活动走进河北省高碑店市

强国必先强农&#xff0c;农强方能国强。今年是全面贯彻落实党的二十大精神的开局之年&#xff0c;是全面推进乡村振兴、加快建设农业强国的关键之年。 11月8日&#xff0c;总台农业农村节目中心“金穗行动17联县”融合传播活动走进河北省保定市高碑店市&#xff0c;举办了《CC…

Java-多线程基础篇

前言&#xff1a; 以下是看马老师的视频以及自己阅读《Java多线程编程实战指南》所总结的基础内容&#xff0c;只是个人理解&#xff0c;如有不对还请大家指正。 1.线程的概念&#xff1a; 来自于百度百科&#xff1a;线程是独立调度和分派的基本单位。在Unix System V及Sun…

软件测试之蚂蚁金服面试题,含答案

对于想要去面试的小伙伴们看过来&#xff0c;小编为大家总结了蚂蚁的面试题&#xff0c;其实很多面试题很多公司都差不多。主要看自己如何灵活回答&#xff0c;大家可以灵活回应。希望对大家有所帮助。 一&#xff1a;基础部分&#xff1a; Q1. 什么是软件测试&#xff1f; 答…

怎么在web显示模型的动态应力图?

要在网页上显示模型的动态应力图&#xff0c;需要执行几个步骤。动态应力图通常涉及有限元分析 (FEA) 模拟中的应力和应变数据的可视化&#xff0c;可以使用 Python、JavaScript 等工具以及 Three.js、Plotly 或 D3.js 等库来渲染图一个网页。以下是该过程的概述&#xff1a; …

实施MES管理系统项目的三个重要阶段

在现今这个高速发展的时代&#xff0c;每个企业都追求更高的生产效率和更精准的管理。MES管理系统作为助力企业实现这些目标的重要工具&#xff0c;其实施与运营显得尤为关键。以下是我们在实践中总结出的经验与建议&#xff0c;希望为准备引入MES管理系统的企业提供有价值的参…

代码随想录算法训练营第20天|654.最大二叉树 617.合并二叉树 700.二叉搜索树中的搜索 98.验证二叉搜索树

JAVA代码编写 654. 最大二叉树 给定一个不重复的整数数组 nums 。 最大二叉树 可以用下面的算法从 nums 递归地构建: 创建一个根节点&#xff0c;其值为 nums 中的最大值。递归地在最大值 左边 的 子数组前缀上 构建左子树。递归地在最大值 右边 的 子数组后缀上 构建右子树…

linux时间同步

搭建集群时&#xff0c;都会先设置时间同步&#xff0c;否则会出现多种问题。 方式一&#xff1a; 1.安装ntp软件 yum install -y ntp 2.更新时区 删除原有时区&#xff1a;sudo rm -f /etc/localtime 加载新时区&#xff1a;sudo ln -s /usr/share/zoneinfo/Asia/Shangh…

快来看呦!制作3D翻页产品宣传册原来这么受欢迎!

制作3D翻页产品宣传册不但使产品在表达效果上看上去更为绚丽多彩&#xff0c;并且具备比较强的立体视觉效果&#xff0c;增加大家浏览观看的吸引力&#xff0c;而且还便于传播&#xff0c;短时间里增加品牌的影响力。 那么&#xff0c;我们应该如何制作3D翻页产品宣传册&#x…

reticulate | R-python调用 | 安装及配置 | conda文件配置

reticulate | R-python安装及配置 | conda文件配置 1. 基础知识2. 安装reticulate from CRAN3. 包含了用于Python和R之间协同操作的全套工具&#xff0c;在R和Rstudio中均可使用4. 配置python环境4.1 4种环境配置方式4.2 miniconda 环境install_miniconda()报错一install_minic…