HTML 核心技术点基础详细解析以及综合小案例(1)

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 核心技术点网页组成排版标签

核心技术点

  • 网页组成
  • 排版标签
  • 多媒体标签及属性
  • 综合案例一 - 个人简介

6503b48ea74f477a8a9108fa8965c322.png

  • 综合案例二 - Vue 简介

a6655fb9bbf24394a943cc7efb980ef4.png

02-标签语法

HTML 超文本标记语言——HyperText Markup Language。

  • 超文本:链接
  • 标记:标签,带尖括号的文本

470ff5ae03d14f139c7c992a8238bd73.png

标签结构

  • 标签要成对出现,中间包裹内容
  • <>里面放英文字母(标签名)
  • 结束标签比开始标签多 /
  • 标签分类:双标签和单标签
<strong>需要加粗的文字<strong>
<br>
<hr>


c2c1e4793c8d4b8fa97d6aa5c5d9df5b.png

03-HTML骨架

  • html:整个网页
  • head:网页头部,用来存放给浏览器看的信息,例如 CSS
  • title:网页标题
  • body:网页主体,用来存放给用户看的信息,例如图片、文字
<html>
  <head>
    <title>网页标题</title>
  </head>
  <body>
    网页主体
  </body>
</html>

提示

VS Code 可以快速生成骨架:在 HTML 文件(.html)中,!(英文)配合 Enter / Tab 键

04-标签的关系

作用:明确标签的书写位置,让代码格式更整齐

  • 父子关系(嵌套关系):子级标签换行且缩进(Tab键)

5c6a6f9346804be79655d3e30ed25919.png

  • 兄弟关系(并列关系):兄弟标签换行要对齐

5d2fe0c544af453da45658f0ce3b7af4.png

05-注释

概念:注释是对代码的解释和说明,能够提高程序的可读性,方便理解、查找代码。

注释不会再浏览器中显示。

在 VS Code 中,添加 / 删除注释的快捷键:Ctrl + /

<!-- 我是 HTML 注释 -->

06-标题标签

一般用在新闻标题、文章标题、网页区域名称、产品名称等等。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

显示特点:

  • 文字加粗
  • 字号逐渐减小
  • 独占一行(换行)

经验

  1. h1 标签在一个网页中只能用一次,用来放新闻标题或网页的 logo
  2. h2 ~ h6 没有使用次数的限制

07-段落标签

一般用在新闻段落、文章段落、产品描述信息等等。

<p>段落</p>

显示特点:

  • 独占一行
  • 段落之间存在间隙

08-换行和水平线

  • 换行:br
  • 水平线:hr
<br>
<hr>

HTML 核心技术点基础详细解析以及综合小案例(2):https://developer.aliyun.com/article/1393291?spm=a2c6h.13148508.setting.19.434b4f0eJFR9Df

相关文章
|
4天前
|
机器学习/深度学习 人工智能 自然语言处理
AI技术深度解析:从基础到应用的全面介绍
人工智能(AI)技术的迅猛发展,正在深刻改变着我们的生活和工作方式。从自然语言处理(NLP)到机器学习,从神经网络到大型语言模型(LLM),AI技术的每一次进步都带来了前所未有的机遇和挑战。本文将从背景、历史、业务场景、Python代码示例、流程图以及如何上手等多个方面,对AI技术中的关键组件进行深度解析,为读者呈现一个全面而深入的AI技术世界。
50 10
|
11天前
|
机器学习/深度学习 人工智能 自然语言处理
秒级响应 + 99.9%准确率:法律行业文本比对技术解析
本工具基于先进AI技术,采用自然语言处理和语义匹配算法,支持PDF、Word等格式,实现法律文本的智能化比对。具备高精度语义匹配、多格式兼容、高性能架构及智能化标注与可视化等特点,有效解决文本复杂性和法规更新难题,提升法律行业工作效率。
|
8天前
|
数据采集 存储 JavaScript
网页爬虫技术全解析:从基础到实战
在信息爆炸的时代,网页爬虫作为数据采集的重要工具,已成为数据科学家、研究人员和开发者不可或缺的技术。本文全面解析网页爬虫的基础概念、工作原理、技术栈与工具,以及实战案例,探讨其合法性与道德问题,分享爬虫设计与实现的详细步骤,介绍优化与维护的方法,应对反爬虫机制、动态内容加载等挑战,旨在帮助读者深入理解并合理运用网页爬虫技术。
|
14天前
|
机器学习/深度学习 自然语言处理 监控
智能客服系统集成技术解析和价值点梳理
在 2024 年的智能客服系统领域,合力亿捷等服务商凭借其卓越的技术实力引领潮流,它们均积极应用最新的大模型技术,推动智能客服的进步。
49 7
|
15天前
|
存储 监控 调度
云服务器成本优化深度解析与实战案例
本文深入探讨了云服务器成本优化的策略与实践,涵盖基本原则、具体策略及案例分析。基本原则包括以实际需求为导向、动态调整资源、成本控制为核心。具体策略涉及选择合适计费模式、优化资源配置、存储与网络配置、实施资源监控与审计、应用性能优化、利用优惠政策及考虑多云策略。文章还通过电商、制造企业和初创团队的实际案例,展示了云服务器成本优化的有效性,最后展望了未来的发展趋势,包括智能化优化、多云管理和绿色节能。
|
20天前
|
XML 数据采集 数据格式
Python 爬虫必备杀器,xpath 解析 HTML
【11月更文挑战第17天】XPath 是一种用于在 XML 和 HTML 文档中定位节点的语言,通过路径表达式选取节点或节点集。它不仅适用于 XML,也广泛应用于 HTML 解析。基本语法包括标签名、属性、层级关系等的选择,如 `//p` 选择所有段落标签,`//a[@href=&#39;example.com&#39;]` 选择特定链接。在 Python 中,常用 lxml 库结合 XPath 进行网页数据抓取,支持高效解析与复杂信息提取。高级技巧涵盖轴的使用和函数应用,如 `contains()` 用于模糊匹配。
|
19天前
|
负载均衡 网络协议 算法
Docker容器环境中服务发现与负载均衡的技术与方法,涵盖环境变量、DNS、集中式服务发现系统等方式
本文探讨了Docker容器环境中服务发现与负载均衡的技术与方法,涵盖环境变量、DNS、集中式服务发现系统等方式,以及软件负载均衡器、云服务负载均衡、容器编排工具等实现手段,强调两者结合的重要性及面临挑战的应对措施。
47 3
|
22天前
|
安全 持续交付 Docker
深入理解并实践容器化技术——Docker 深度解析
深入理解并实践容器化技术——Docker 深度解析
43 2
|
22天前
|
供应链 算法 安全
深度解析区块链技术的分布式共识机制
深度解析区块链技术的分布式共识机制
44 0
|
22天前
|
存储 供应链 算法
深入解析区块链技术的核心原理与应用前景
深入解析区块链技术的核心原理与应用前景
45 0

推荐镜像

更多
下一篇
DataWorks