HTML 初

news2024/10/5 20:25:29

前言

30 HTML5 Tutorials & Resources for Web Developers 2018 - Colorlib


HTML的基本骨架

HTML基本骨架是构建网页的最基本的结果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
  • <!DOCTYPE html>:指定文档类型为HTML5。
  • <html>:表示整个HTML文档的根元素。
  • <head>:包含了与文档相关的设置和定义,如字符编码、标题等。
  • <title>:定义网页的标题,将显示在浏览器的标题栏或标签页上。
  • <body>:包含了网页的主要内容。

VSCode中可以输入!再按Tab/Enter 自动生成此代码。


注释

在HTML中,注释是一种用于添加说明、解释或临时禁用代码的工具。注释不会在浏览器中显示,它们只对代码进行注解的文本。

可以使用 <!-- --> 来添加注释

例如:

<!-- 这是一个注释 -->

VSCode中快捷键为Ctrl+/ 


标签关系

在HTML中,标签之间存在不同的关系,用于组织和描述文档结构。

以下是一些常见的标签关系:

1.父子关系:一个标签可以包含另一个标签。被包含的标签称为子标签,而包含其他标记的标签称为父标签。

例如:

<div>
    <p>这是一个段落。</p>
</div>

其中,<div>为父标签,<p>为子标签。


2.兄弟关系:具有相同的父级标签的标签称为兄弟标签。它们在文档中相邻出现,并具有相同的层级关系。

例如:

<ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
</ul>

其中,<li>标签是兄弟标签,它们都是<ul>的子标签。


3.嵌套关系:标签可以嵌套在其他标签内部,形成多层次的嵌套结构。

例如:

<article>
    <h1>文章标题</h1>
    <p>第一段内容</p>
    <section>
        <h2>子标题</h2>
        <p>子标题下的内容</p>
    </section>
</article>

其中,<h1>、<p>、<section>标签都是<article>标签的子标签,<h2>和<p>则是<section>标签的子标签。

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

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

相关文章

Chisel-Strike:一款功能强大的.NET异或XOR加密CobaltStrike Aggressor实现

## 关于Chisel-Strike Chisel-Strike是一款功能强大的.NET异或XOR加密CobaltStrike Aggressor实现&#xff0c;该工具主要针对的是 Chisel&#xff08;一个通过HTTP实现的快速TCP/UDP信道&#xff09;&#xff0c;旨在实现运行速度更快的代理以及更加高级的Socks5功能。 根据…

新能源汽车下半场,“哪吒”们还有机会吗?

【潮汐商业评论/原创】 “现在油价太贵了&#xff0c;上班都快开不起车了。同事Andy买了辆新能源&#xff0c;在家充满电也就40多块钱&#xff0c;可以跑500多公里&#xff0c;我加200的油&#xff0c;还没人家跑得多。已经在考虑要不要换辆新能源汽车了。”Allen无奈道。 在…

运营商的风控难题该如何破解?

一、运营商难题 01 黑产养卡 这个产业是运营商独有的难题&#xff1a;部分虚拟运营商走线上渠道吸引用户效果不理想&#xff0c;为盲目追求用户数字&#xff0c;便利用线下渠道养卡&#xff0c;即兜售给卡贩子&#xff0c;由此滋生了非实名卡、黑卡等乱象。 “养卡”又称“假…

接口自动化测试-Postman+Newman+Git+Jenkins实战集成(详细)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、Postman 创建…

100个精选Python实战项目案例,在线无偿分享

前言 嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! 随着 Python 语言的流行&#xff0c;越来越多的人加入到了 Python 的大家庭中。 为什么这么多人学 Python &#xff1f; 我要喊出那句话了&#xff1a;“人生苦短&#xff0c;我用 Python&#xff01;”&#xff0c; 正是…

PyTorch(安装及卸载)

目录 1. 安装 2. 卸载 参考文献 为什么用PyTorch&#xff1a;简单来说&#xff0c;19年之前tensorflow是大哥&#xff0c;19年tensorflow和PyTorch双龙并行&#xff0c;20年之后PyTorch一往无前。宗旨&#xff0c;哪个用的人多用哪个。 1. 安装 1. 先打开Anaconda Prompt&…

专为工业环境设计的高性能网络设备(4G工业路由器)

4G工业路由器顾名思义它是一种专为工业环境设计的高性能网络设备。它采用了4G通信技术&#xff0c;可以实现高速稳定灵活拓展的无线网络连接&#xff0c;满足工业领域对数据传输的需求。这种路由器具有坚固耐用的外壳&#xff0c;能够抵抗恶劣的工作环境&#xff0c;如高低温、…

谨防数据泄露!“即刻PDF阅读器”内置后门收集用户隐私

近期&#xff0c;火绒安全团队发现 “即刻PDF阅读器” 内置后门程序&#xff0c;该后门程序会在用户不知情的情况下&#xff0c;从C&C服务器上下载恶意配置文件&#xff0c;再根据配置文件下载恶意模块到用户电脑中。目前发现该病毒会肆意收集用户个人隐私信息&#xff0c;…

决策树的划分依据之:信息增益率

在上面的介绍中&#xff0c;我们有意忽略了"编号"这一列.若把"编号"也作为一个候选划分属性&#xff0c;则根据信息增益公式可计算出它的信息增益为 0.9182&#xff0c;远大于其他候选划分属性。 计算每个属性的信息熵过程中,我们发现,该属性的值为0, 也就…

学习记录——CFNet

CFNet: Cascade Fusion Network for Dense Prediction 一种新颖的多尺度融合方法 CVPR 2023   现有的SOTA方法通常先通过主干网络提取多尺度特征&#xff0c;然后通过轻量级模块&#xff08;如 FPN&#xff09;融合这些特征。然而&#xff0c;我们认为通过这样的范例来融合多…

常见的用户行为路径分析方法

用户行为路径分析&#xff0c;一方面可视化用户流向&#xff0c;对海量用户的行为习惯形成宏观了解&#xff1b;另一方面是定位影响转化的主要因素&#xff0c;使产品的优化与改进有的放矢。如果没有用户行为路径分析&#xff0c;会让我们不能获得用户的及时反馈信息&#xff0…

使用HBuilder-X创建uniapp项目并启动演示

前言 课前准备&#xff1a;需要安装有HBuilder-X软件以及谷歌、火狐等浏览器。 官方网址&#xff1a;https://www.dcloud.io/ 一、创建项目 依次点击文件->新建->项目&#xff1a; 接着&#xff1a; 点击uni-app填写项目名称选择项目路径选择项目模版&#xff0c;我…

Java里的static import使用小结

Java里的static import使用小结 换了工作要把Java重新捡起来了&#xff0c;这个在大学里用过的语言&#xff0c;虽然不复杂&#xff0c;还是有一些奇怪的地方的。比如static Slgluimport。 Static import是JDK 1.5中引进的特性&#xff0c;不过读大学那会还真没注意到。它的作…

记一次使用gophish开展的钓鱼演练

这周接到客户要求&#xff0c;组织一次钓鱼演练&#xff0c;要求是发送钓鱼邮件钓取用户账号及个人信息。用户提交后&#xff0c;跳转至警告界面&#xff0c;以此来提高客户单位针对钓鱼邮件的防范意识。 与客户沟通后得知他们企业内部是由邮箱网关的&#xff0c;那么就意味着…

类的实例化

类的实例化 class Date { public:void Init(int year, int month, int day){_year year;_month month;_day day;}private:int _year;int _month;int _day; //这只是函数的一个声明并没有定义 };上面是一个类&#xff0c;我们可以把有花括号括起来的叫做一个域&#xff…

python scrapy框架实现某品牌数据采集

某品牌数据采集 采集需求 地址&#xff1a;http://www.winshangdata.com/brandList 需求&#xff1a;用scrapy框架采集本站数据&#xff0c;至少抓取5个分类&#xff0c;数据量要求5000以上 采集字段&#xff1a;标题、创建时间、开店方式、合作期限、面积要求 网页分析 …

HawkEye设备智能维保平台:助力制药行业设备管理实现数字化转型

随着科技的不断进步和市场竞争的日益激烈&#xff0c;制药行业的设备管理的数字化转型已经成为一个不可逆转的趋势。尤其是在疫情时代&#xff0c;制药企业肩负着重大的社会责任&#xff0c;致使其设备管理的数字化转型之路迫在眉睫。 设备管理的数字化不仅可以提高企业的生产效…

Java实战之网上书店管理系统的实现

目录 1.效果展示2.需求功能3.系统总体设计及部分代码 3.1登录模块设计3.2新用户的注册3.3图书添加模块3.4图书添加事件3.5买家信息维护3.6订单管理模块4.数据库设计 4.1系统数据库设计4.2系统E-R图设计5.JDBC连接数据库 1.效果展示 2.需求功能 用户可以进行注册登陆系统&…

文心大模型企业应用私享会·上海站:共话大模型前沿技术与产业应用创新

当前&#xff0c;人工智能已经成为新一轮科技革命和产业变革的重要驱动力量&#xff0c;基于强算法、大算力和大数据的大模型成为人工智能发展的主流方向。 7月28日下午&#xff0c;“文心大模型企业应用私享会-上海站”于百度飞桨&#xff08;张江&#xff09;人工智能产业赋能…

如何压缩图片大小?最新图片压缩技巧分享

现在很多平台对于上传的图片大小都有限制&#xff0c;比如不能超过20k&#xff0c;当图片大小超出该值时就需要进行压缩&#xff0c;下面就针对这个问题给大家分享几个简单实用的图片压缩方法&#xff0c;需要的朋友一起来Get吧~ 一、画图工具 画图是Windows系统自带的工具&am…