【前端三件套-HTML】基础入门必备

简介: 【前端三件套-HTML】基础入门必备

HTML的英文全称是 Hyper Text Markup Language,即超文本标记语言HTML是由 Web 的发明者 Tim Berners-Lee 和同事 Daniel W. Connolly于1990年创立的一种 标记语言 ,它是标准通用化标记语言SGML的应用。


1.实体


HTML提供了5种空格实体(space entity),它们拥有不同的宽度,非断行空格( )是常规空格的宽度,可运行于所有主流浏览器。其他几种空格(       ‌‍)在不同浏览器中宽度各异。


2.meta标签


<meta name = "keywords" charset="UTF-8" content="标准网页设计专业">

name = 指定的数据的名称

charset  : 指定网页的字符集

countent = 指定数据的内容,会作为搜索结果的超链接上的文字显示

description  表示网站的描述信息

标签

作用

描述

header

页眉

介绍性的内容

footer

页脚

通常包含有关作者的信息、版权或文件链接

nav

导航链接

可以是当前文档内的,也可以是到其他文档的。常见例子是菜单、目录和索引

main

文档主内容

中心主题直接相关或扩展的内容

article

文章

自成一体,独立分发,可重复使用

section

文档中的节

没有一个更具体的语义元素来代表

aside

页面内容以外的内容

其内容与文档的主要内容只有间接的关系。经常以边栏或呼出框的形式出现

mark

重要或强调的文本

为参考或记事目的而被标记或突出的文本,表明其相关性和重要性

summary

<details> 标题

<details>指定一个摘要、标题或图例。点击<summary>可以切换<details>打开和关闭

detils

用户能够查看或隐藏的额外细节

其中的信息只有被切换到 "打开 "状态时才可见。必须使用<summary>提供一个摘要或标签

figuer

自包含内容

独立的内容,用<figcaption>元素指定一个可选的标题。比如图示、图表、照片、代码清单等

figcaption

<figure> 的标题

描述其父元素

其余内容的标题或图例time

定义日期/时间

可能包括datetime属性,将日期翻译成机器可读的格式,以便获得更好的搜索引擎结果或自定义功能。如提醒



3.布局标签


header表示网页的头部(页眉)


main表示网页的主体部分(一个页面中只会有一个 main)


footer表示网页的底部(页脚)


nav表示网页中的导航


aside和主体相关的其他内容(侧边栏)


article表示一个独立的文章


section表示一个独立的区块,上边的标签都不能表示时使用 section



div 块元素,没有任何的语义,就用来表示一个区块。目前来讲,div 还是主要的布局元素


span 行内元素,没有任何的语义,一般用于在网页中选中文字


定义列表,使用dl标签来创建定义列表,使用dt表示定义的内容,使用dd来对内容进行解释说明


<dl>
  <dt>Beast of Bodmin</dt>
  <dd>A large feline inhabiting Bodmin Moor.</dd>
  <dt>Morgawr</dt>
  <dd>A sea serpent.</dd>
  <dt>Owlman</dt>
  <dd>A giant owl-like creature.</dd>
</dl>


4.外部地址


Linking to an absolute URL:链接一个绝对路径


Linking to an email address:链接一个 email 地址


Linking to telephone numbers:链接电话号码


Using the download attribute to save a <canvas> as a PNG:下载图片

<ul>
  <li><a href="https://www.baidu.com">Website</a></li>
  <li><a href="mailto:example@outlook.com">Email</a></li>
  <li><a href="tel:+123456789">Phone</a></li>
</ul>


5.新建页面


target属性,用来指定超链接打开的位置可选值:


_self在当前页面中打开超链接,默认值


_blank在新建页面中打开超链接


<a href="./test1.html">超链接1——默认</a><br />
<a href="./test1.html" target="_self">超链接1——当前页面</a><br />
<a href="./test1.html" target="_blank">超链接1——新建页面</a><br />


6.锚点跳转


可以使用javascript:void(0);来作为href的属性,此时点击这个超链接什么也不会发生


可以将#作为超链接的路径的占位符使用。


可以直接将超链接的href属性设置为#,这样点击超链接以后页面不会发生跳转,而是转到当前页面的顶部的位置


可以跳转到页面的指定位置(锚点),只需将href属性设置#目标元素的id属性值(唯一不重复)


7.图片


src:属性指定的是外部图片的路径(路径规则和超链接是一样的)


alt:图片的描述,这个描述默认情况下不会显示,有些浏览器会在图片无法加载时显示,搜索引擎会根据 alt 中的内容来识别图片


width:图片的宽度(单位是像素)


height :图片的高度(单位是像素)


宽度和高度中如果只修改了一个,则另一个会等比例缩放


注意


一般情况在 pc 端,不建议修改图片的大小,需要多大的图片就裁多大


但是在移动端,经常需要对图片进行缩放(大图缩小)

目录
相关文章
|
18天前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
130 2
|
2月前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
18天前
|
自然语言处理 资源调度 前端开发
前端大模型入门(四):不同文本分割器对比和效果展示-教你如何根据场景选择合适的长文本分割方式
本文详细介绍了五种Langchain文本分割器:`CharacterTextSplitter`、`RecursiveCharacterTextSplitter`、`TokenTextSplitter`、`MarkdownTextSplitter` 和 `LatexTextSplitter`,从原理、优缺点及适用场景等方面进行了对比分析,旨在帮助开发者选择最适合当前需求的文本分割工具,提高大模型应用的处理效率和效果。
|
18天前
|
机器学习/深度学习 人工智能 自然语言处理
前端大模型入门(三):编码(Tokenizer)和嵌入(Embedding)解析 - llm的输入
本文介绍了大规模语言模型(LLM)中的两个核心概念:Tokenizer和Embedding。Tokenizer将文本转换为模型可处理的数字ID,而Embedding则将这些ID转化为能捕捉语义关系的稠密向量。文章通过具体示例和代码展示了两者的实现方法,帮助读者理解其基本原理和应用场景。
|
18天前
|
人工智能 前端开发 JavaScript
前端大模型入门(二):掌握langchain的核心Runnable接口
Langchain.js 是 Langchain 框架的 JavaScript 版本,专为前端和后端 JavaScript 环境设计。最新 v0.3 版本引入了强大的 Runnable 接口,支持灵活的执行方式和异步操作,方便与不同模型和逻辑集成。本文将详细介绍 Runnable 接口,并通过实现自定义 Runnable 来帮助前端人员快速上手。
|
21天前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
21天前
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战
|
21天前
|
前端开发 JavaScript 开发者
探索现代Web前端技术:React框架入门
【10月更文挑战第9天】 探索现代Web前端技术:React框架入门
|
2月前
|
Web App开发 存储 移动开发
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
36 1
前端基础(十七)_HTML5新特性
|
29天前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
301 1