笔记04 前端基础 HTML标签及使用 |青训营

142 阅读2分钟

二.HTML

  • 标题h1-h6

分为h1-h6六个级别的标题,其中h1为一级标题,h2为二级标题,浏览器表现出来由大至小的默认样式

1.jpg

  • 列表ol/ul/dl

有序类比ol:每一个列表用li表示,其格式是一个有序列表

无序列表ul:每一列表同样用li表示

定义列表dl:存在属性名,描述列表的标题dt,描述内容dd,其中dt和dd是一个多个对应多个的关系

2.jpg

  • 链接a

由于非常常用所以只保存了a这样一个简写的结果。

href:超链接引用地址

<a href="https://www.bytedance.com/">

是一个跳转到字节跳动官网的链接

<a href="www.bytendance.com/" target=""_blank>

</aa同样是一个跳转到字节跳动官网的链接,但是可以打开一个新的页面,第一种是直接在当前页面打开,而不是替换原有的页面。

  • 插入多媒体(图片/音频/视频)

3.jpg

src:表示图片/音频的地址

alt:是可替代性文本,当这个图片加载不出来或者不被加载时会显示该代码。

controls:默认实现浏览器默认的控件

  • 输入/选择(表单类控件)

placeholder:占位符,后方接没有输入时显示的文字

type:选择键位,typy="range"是在一个范围内进行选择;type="number"让用户输入数字,并且可以规定范围;type="date"可以实现日期选择

4.jpg

多行文字用textarea的标签表现对行的输入

JS相关课程将会学习当用户提交信息以后后续对信息的处理

——

当用户进行选择时,可以选择进行单选/多选

5.jpg

其中,checkbox是多选,radio是单选

select:用于多个选项的下拉选择

6.jpg

  • 文字文本表示

p:文本内容

blockquote:长引用,cite后方是文字的来源

cite:短引用,引用别人的书名或者简短的章节名/标题

q:是一种打双引号的引用

code:引用或长或短的一串代码

strong:强调,粗体,表示重要的要求/提醒的文本内容

em:强调,斜体,表示重读的词汇

7.jpg

  • 内容整体划分

页头header

导航nav

主要内容main

相关索引/广告aside

文章正文article

页面尾部,参考链接,版权footer

——

综述:以上是关于HTML一些标签的简介和运用,通过mdn文档可以去查询每一个标签的使用和含义,对于HTML的基本使用就到此结束了。