web前端攻城狮学习笔记——HTML基础

最新推荐文章于 2024-05-28 17:33:16 发布

VIP文章 Rebecca♂

最新推荐文章于 2024-05-28 17:33:16 发布

阅读量400

点赞数

分类专栏：前端开发文章标签： html web

本文链接：https://blog.csdn.net/weixin_43899481/article/details/109457942

版权

开始学习web前端开发基础了，我是跟着清华大学在学堂在线的《Web前端攻城狮》学习的，把一些笔记记在这里，方便后期查阅。

1 HTML基础
HTML是超文本语言。
一段HTML代码：

<!doctype html>
<html>
    <head>
        <meta charset= "UTF-8">//页面编码
        <title>⻚⾯标题 </title>
     </head>
    <body>
        <h1>⼀级标题 </h1>
        <p>段落内容 </p>
    </body>
</html>

DOM树中包含了HTML语言的基本组成部分
DOM树
2 文本类标签
2.1 链接
最基本的链接语句

<a href="http: //www.w3.org">W3C</a>

链接包括绝对路径和相对路径。
绝对路径

<a href="/product/b">产品 B </a>

会被解析为 /product/b

<a href="b">产品 B </a>

在一个页面中前面有个href，后面进行一个id设置，就可以在前面对后面进行链接，如下：

<a href="product">我们的产品</a>
<h2 id="product">我们的产品</a>

设置target链接目标，可以设置出当前或新窗口打开

<a href="http://www.w3.org" target="_self">当前窗口打开</a>
<a href="http://www.w3.org" target="_blank">新窗口打开</a>

2.2 引用
下面的blockquote、q和cite分别表示长引用、短引用和引用来源（书、影视、页面）

<blockquote cite="http://t.cn/RfKO0F">
<p>天才并不是⾃⽣⾃⻓在深林荒野⾥的怪物， 是由可以使天才⽣⻓的⺠众产⽣、⻓育出来的，所以没有 这种⺠众，就没有天才。 </p>
<blockquote>
<cite>鲁迅 《未有天才之前》 </cite>
<p><cite>维基百科 </cite>上说 JavaScript <q>最初命名为 Mocha </q> </p>

2.3 强调
em强调重读
strong强调重要性

<p>猫是可爱的动物 </p>
<p>猫<em>是 </em>可爱的动物 </p>
<p>猫是<em>可爱 </em>的动物 </p>
<p>
⽤法和⽤量：每⽇三次，每次1⽚，饭后服⽤。
<strong>警告：孕妇和⼉童请遵医嘱。 </strong>
</p>

2.4 代码
code 代码段
var 变量名
samp 输出⽰例
kbd 键盘操作

补充内容：
空白符：

<p>Hello         World</p>
<p>你好，

世界
</p>

最终得不到空白和空格，可以将p替换成 pre就可以达到效果

实体字符
空格
< <
> >
& &

共29个
a em strong small s cite q dfn abbr ruby rt rp data time code var samp kbd sub sup i b u mark bdi bdo span br wbr

3 多媒体类标签
3.1 图片

<img src="/path/to/img.jpg" alt="可爱的⼩猫" width="360" height="480" />

alt是一个可选项，可以设置高度和宽度。
图片格式：jpg、png、webp、gif

3.2 视频

<video src="/url.mp4" controls autoplay muted loop type="video/mp4" poster="./photo.jpg" width height preload/></video>

controls表示是不是浏览器默认的播放空间
autoplay表示是否自动播放（视频静音和用户之前主动点击过的两种情况可以自动播放）
muted静音
loop是否循环播放
type可以选择格式
poster视频没有播放的时候可以通过这个指定一个图片
高度宽度
preload预加载

给视频加字幕，字幕格式为vtt后缀

<video src= "/url.mp4" controls>
    <track kind= "subtitles" srclang= "zh" src= "/subtitle.vtt">
</video>

字幕格式
3.3 音频
音频和视频的一些代码是相同的。

<audio src= "/sound.mp3" controls<

最低0.47元/天解锁文章

Rebecca♂

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
web前端攻城狮学习笔记——HTML基础

HTML是超文本语言。最简单的HTML语句：<h1>Hello World</h1><img src="photo.jpg" />
复制链接

扫一扫

专栏目录

web前端攻城狮 学习笔记——HTML基础

“相关推荐”对你有帮助么？

web前端攻城狮学习笔记——HTML基础