web前端攻城狮 学习笔记——HTML基础
开始学习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语言的基本组成部分
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> </audio>
4 组织页面内容
header：标题
main：主题内容
aside：侧边栏（附加信息）
footer：区块底部（参考链接）
4.1 h1-h6：一级标题到六级标题
4.2 article和section也可以作为页面的内容
article是独立存在的，比如一篇新闻、一篇帖子。
section是在文章中的章节，只有内容上是独立的才可以作为一个section
4.3 列表：ol标签（有序列表），ul标签（无序列表），dl标签（定义列表）
可以自动标号type可以设置是123或者abc
<ol start="l" type=""><li>1</li><li>2</li><li>3</li>
</ol>
<ul>
<li>
web前端攻城狮 学习笔记——HTML基础相关推荐
- 前端攻城狮学习笔记七：常见前端面试题之HTML/CSS部分（二）
前端页面有哪三层构成,分别是什么?作用是什么? 1.结构层:由 HTML 或 XHTML 之类的标记语言负责创建,仅负责语义的表达.解决了页面"内容是什么"的问题. 2.表示层:由 ...
- java web前端攻城狮 学习路线图
- web前端攻城狮整理的收藏夹
作为一名web前端开发工程师你的收藏夹存对了吗?下面是一份互联网上流传甚广的web前端开发收藏夹资源,包含学习网站.JS库.常用工具.常用插件.资讯书籍等资源.速速转存吧~ 一.学习网站 W3Csch ...
- animejs走马灯_web前端攻城狮超爱的JS动画库插件—anime.js
作为一名web前端攻城狮,除了完成日常业务逻辑处理之外,也会去注重一些用户体验交互的问题.特别是如今web前端的发展很快,很多优秀js插件层出不穷.对于web前端开发者,也要会利用这些现有的js插件, ...
- 15个前端攻城狮必备的学习网站 | 你知道几个？（附视频介绍）
前端开发所需掌握知识点概要 HTML&CSS: 对Web标准的理解(结构.表现.行为).浏览器内核.渲染原理.依赖管理.兼容性.CSS语法.层次关系,常用属性.布局.选择器.权重.盒模型.Ha ...
- WEB前端攻城小师傅修炼之道
原文链接: WEB前端攻城小师傅修炼之道 做前端这一个多年头来,零零碎碎的学了一些个知识概念,但是有时候思索一下啊,觉得这个前端知识链还是不很明确,不知道去学习那些知识应对互联网的发展,怎么循环渐进的 ...
- 活动报名 | 前端攻城狮该怎样跳脱“围城”的焦虑
活动报名 | 前端攻城狮该怎样跳脱"围城"的焦虑 原创: 京小云 京东云开发者社区 4天前 作为WEB2.0的产物,前端工程师这一相对较新的职业俨然变成了一颗?一样的存在--丰富 ...
- 正则至少一个数字_好程序员web前端培训分享JavaScript学习笔记之正则
好程序员web前端培训分享JavaScript学习笔记之正则,正则表达式,又名 "规则表达式" 由我们自己来书写 "规则",专门用来检测 字符串 是否符合 &q ...
- react组件卸载调用的方法_好程序员web前端培训分享React学习笔记（三）
好程序员web前端培训分享React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处 ...
最新文章
- 使用Python和OpenCV进行拍摄截图
- ISLR线性回归笔记
- SpringCloud Gateway 测试问题解决
- 编写高质量代码：改善Java的151个建议五（类、对象、方法）31-51
- 【小白学习keras教程】五、基于reuters数据集训练不同RNN循环神经网络模型
- Javascript:原型模式类继承
- hill密码源代码c语言,古典密码（Hill加密算法）(示例代码)
- pem格式证书编码 x509_证书编码格式
- Python——eventlet.wsgi
- hnu 暑期实训之Maya历法
- 2017年浙江中医药大学大学生程序设计竞赛（重现赛）D - CC的神奇背包
- CCNP 640-892知识点中文精简解释
- Airbnb 面试题汇总
- 静态、动态函数库的设计
- Thinkpad蓝牙键盘驱动安装和常见问题
- 关于热敏电阻温度校准问题的测试和解决
- 深度内幕丨揭秘积分墙最新反作弊
- python语句分号_Python中的分号
- Endnote 基本使用教程
- C++进阶——STL源码之红黑树（_Rb_tree）
热门文章