【前端三件套-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 端,不建议修改图片的大小,需要多大的图片就裁多大


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

目录
相关文章
|
7天前
|
前端开发 安全 数据安全/隐私保护
杨校老师课堂之WEB前端HTML2
杨校老师课堂之WEB前端HTML
18 0
|
7天前
|
XML 移动开发 前端开发
杨校老师课堂之WEB前端HTML1
杨校老师课堂之WEB前端HTML
22 0
|
7天前
杨老师课堂之网页制作HTML的学习入门-含有案例1
杨老师课堂之网页制作HTML的学习入门-含有案例
14 3
|
10天前
|
XML 存储 前端开发
【前端】XML和HTML的区别详解
【前端】XML和HTML的区别详解
16 5
|
10天前
|
监控 前端开发 应用服务中间件
前端开发者必备:Nginx入门实战宝典,从部署到优化一网打尽(2)
前端开发者必备:Nginx入门实战宝典,从部署到优化一网打尽
29 1
|
10天前
|
负载均衡 前端开发 应用服务中间件
前端开发者必备:Nginx入门实战宝典,从部署到优化一网打尽(1)
前端开发者必备:Nginx入门实战宝典,从部署到优化一网打尽
33 1
|
10天前
|
存储 移动开发 API
HTML5本地存储:从入门到精通
HTML5本地存储:从入门到精通
14 1
|
13天前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
23 2
|
13天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
14小时前
|
前端开发 网络协议 JavaScript
程序员必知:前端之HTML
程序员必知:前端之HTML