第12周前端学习周报
书：
HTML:
1.超文本标记语言，并非编程语言。
2.通过标记符来标识网页中内容的显示方式，如图片的显 示尺寸，大小，文字的大小、颜色、字体。
3.浏览器负责解释标记符，依次显示内容。
第一个HTML：
<!DOCTYPE html> //声明为 HTML5 文档<html><head> //包含了文档的元（meta）数据<meta charset="UTF-8"> //中文声明<title>大傻子</title> //网页标题,有且仅有一个title</head><body><h>傻子的第一个标题</h> //定义一个大标题<p>傻子的第一个段落。</p> //定义一个段落</body></html>标记符：<标记符> 内容 </标记符>
<标记符 属性1=属性值1 属性2=属性值2...>内容</标记符>
标记符可以嵌套，但不可交叉.
<p><font color="red" face="楷体">我是个大傻子</font></p>文字与段落标记
1. 标题字标记：定义文章内章节标题的显示格式
<hn align="对齐方式">标题文字</hn> //n表示标题的级数<body><h1 align="right">一级标题</h1><h2 align="center">二级标题</h2><h3 align="left">三级标题</h3></body>2. 文字格式标记：网页中普通文字的显示效果
<font face="字体" size="字号" color="颜色">文字</font>3. 字型标记：设置文字风格
<b>粗体 <i>斜体 <u>下划线
<strike>删除线效果 <big>使字体相对于前面的文字增大一倍 <small>...减小一倍
<sup>下标 <sub>上标 <blink>闪烁效果 <cite>斜体（表示引用） <strong>斜体加黑体
4. 段落标记和强制换行标记：
<p>段落标记 <br>换行
1. 水平线标记：显示一条水平线，将不同内容分隔开
<hr align="对齐方式" size="横线粗细" width="横线长度" color="横线颜色"noshade> noshade表示没有三维效果。
2. 其他标记：
(1).分区显示标记：使一段文字统一对齐方式
<div align="对齐方式">文本或图像</div>(2).特殊符号标记： &xx;内容&xx;
xx:lt=< gt=> quot=" nbsp=空格
列表标记
1. 无序列表标记
<ul type="符号类型"> //<ul>中的type表示统一类型<li type="符号类型">列表项目一<li type="符号类型">列表项目二<li type="符号类型">列表项目三</ul>type: disc实心圆 circle空心圆 square实心方块
2. 有序列表标记
<ol type="序号类型" start="起始号码"> type=1,A,a,大小写罗马字母<li type="序号类型">列表项目一<li type="序号类型">列表项目二<li type="序号类型">列表项目三</ol>3. 自定义列表标记:
<dl><dt>列表条目一<dd>条目一的说明<dt>...<dd></dl>网课：
快速输入批量元素
h[属性]>{内容}*6 可添加$自增符
常见文本元素
<h>
<p>
<span>无语义
<pre>无空白折叠，常用于在网页中显示一些代码
a元素
href属性:
1. 普通链接
<a href="https:/www.luogu.com.cn">洛谷<a>2. 锚链接
<a href="#chapter1">章节一</a><h1 id="chapter1">章节一</h1>二者并无本质区别
3. 功能链接：点击后，触发某个功能
- - 执行JS代码,javascript:
<a href="javascript:alert('你好')">弹出：你好！<a>- - 发送邮件,mailto:（要求用户安装邮件发送软件）
<a href="mailto:676467947@qq.com">点击给我发送邮件<a>- 拨打电话，tel:(手机端，电脑则需拨号软件)
<a href="tel:10086">点击给我拨打电话<a>target属性:
- _self:在当前页面窗口打开，默认值
- _blank:在新窗口中打开
开始胡编：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>马哥</title>
</head>
<body><h><font face="楷体" color="red">马学长推荐的学习网站:<br></font></h><a href="https://developer.mozilla.org/zh-CN/" target="_blank">MDN</a><a href="https://www.runoob.com/" target="_blank">菜鸟教程</a><a href="https://juejin.cn/" target="_blank">掘金</a><a href=" https://www.cnblogs.com/" target="_blank">博客园</a><a href="https://www.csdn.net/" target="_blank" title="程序员的万能网站">CSDN <br></a><h><font face="楷体" color="blue">刷题网站:<br></font></h><a href="https://www.luogu.com.cn/" target="_blank">洛谷</a><a href="https://pintia.cn/problem-sets/dashboard" target="_blank">PTA</a><a href="https://leetcode.cn/" target="_blank">力扣 </a>
</body>
</html>
路径的写法
站内资源和站外资源
站内资源：当前网站的资源 相对路径
站外资源：非当前网站的资源 绝对路径
1. 绝对路径
绝对路径的书写格式：
协议名://主机名:端口号/路径
https://www.luogu.com.cn/
2. 相对路径
必须以./开头（可以省略），./表示当前资源所在的目录
可以书写../表示返回上一级目录
图片元素
img元素 （空元素，无需</img>)
- src属性(source):<img src="地址">
- alt属性(alternative):当图片资源失效时，将使用该属性的文字替代图片
<img src="地址" alt="内容">和a元素联用
<a href="网页地址"><img src="图片地址"></a> //点击图片即可跳转到相应网页和map元素(在图片中“指哪打哪”)
map的子元素area：
<a href="网页地址"><img usemap ="#xxx"src="图片地址"></a><map name="xxx"><area shape="" coords="" href="" alt=""></map>- - shape=circle,rect(矩形),poly(多边形)
- - coords=坐标（以图片左上角为原点）
circle(x,y,r) rect(左上角，右上角) poly(各端点坐标)
- - 衡量坐标时，为了减小误差，可以用专业的图片工具：ps pxcook
和figure元素
指代、定义，通常用于把图片、图片标题、描述包裹起来。
子元素figcaption，表示标题。
<figure><figcaption><h1>标题</h1></figcaption><img src="" alt=""><p>内容</p></figure>开始胡编：
最后一次握手
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>最后一次握手</title>
</head><body><figure><figcaption><h1 align="center">最后一次握手</h1></figcaption><a><div align="center"><img usemap="#合影"src="https://ts1.cn.mm.bing.net/th/id/R-C.10c8a4e44a8cfe10813a7d7d6dcbf623?rik=nn44mBMau4BUvw&riu=http%3a%2f%2fimg1.voc.com.cn%2fUpLoadFile%2f2013%2f12%2f25%2f201312251727502773.jpg&ehk=D%2fc1zyu%2f2lLTz64NGFkDnlfg41C2%2bucq7PWUEShjqss%3d&risl=&pid=ImgRaw&r=0"></div></a><p>1974年5月的一个夜晚，在马来西亚的总理走出毛泽东的书房时，随着随行记者注意到了一直在门口的周恩来，两人都没有说话，但是却紧紧地握住了彼此的双手，时间定格的同时，却是一个时代的结束和另一个时代的开始。</p></figure><map name="合影"><area target="_blank" title="毛泽东" shape="circle" coords="643,151,111"href="https://www.baidu.com/link?url=9Hm6FQ15aYlPaWsQW6Rygq6QbNOpuYqWgSjGG5aWXJL-z0L-XYVp1tbBBg_gXPTb8lLF8wWvEv2wrazKl3pNIyilpMQdTRkQyY1OXPwVPLSezFM5qQU1WxnAny1tMKBH&wd=&eqid=ab70dcf1001ad4ca000000026378dabf"alt="毛泽东"><area target="_blank" title="周恩来" shape="circle" coords="248,128,114"href="https://www.baidu.com/link?url=I3CFfYCSRHCM0uJKXPfhfQzRRgqViZ0At8VbyzW06LQM9mfIUVxwRdJugXzvJZj-lYgRvAFTHIOe-pwH1--sOkvvuWrBfJVkk7FGF4RdVaiD6TMFcCAqQeOZ9-0r-Ilh&wd=&eqid=fd5341e0001bcda0000000026378dad4"alt="周恩来"></map>
</body></html>多媒体元素
video audio
布尔属性
只有两种状态：1.不写 2.取值只能为属性名
在HTML5中，可以不用书写属性值
controls 显示控制栏 autoplay 自动播放 muted 静音播放 loop 循环播放
<video controls autoplay muted loop src="./video/桂其鑫打呼噜.mp4"></video>第12周前端学习周报相关推荐
- 第12周Python学习周记
&关于计划: 一.Numpy库的学习(学习完毕): 二.Matplotlib的学习(进行中,预计13周之内完成): 三.Markdown的学习(进行中): (本文内容参考于简书教程) & ...
- 前端学习周报（第一周）
- 前端学习周报（第三周）
- 2020/4/26 第一周java学习周报
第一周 一. Java的优势 1. 开源. 2. 面向对象的编程语言.方便扩充 (关于对象:link ) 3. 方便的内存回收机制.自动优化? 4. 用引用代替了指针. 5. 多线编程,单位时间内性能 ...
- 2016/12/10前端学习笔记CSS结束+JS开始。
18 浏览器兼容问题:IE6不支持小于12px的盒子,兼容方式: height:4px; _font-size:1px; IE6不支持overflow:hidden的方法清除浮动,所以,需要 用 : ...
- 前端开发周报：20190817
给 「前端开发博客」 加星标,每天打卡学习 长按二维码即可识别"进入网页"查看哟~ 1.vue中created与mounted区别 关于vue.js中的生命周期,如果不是有特别的需 ...
- （前端学习）寒假第一周周报
了解了一下前端学习的路线,我有点震惊,学习的东西真的很多很多,如下: 原来css也只是准备工作,不禁感慨任重而道远 附带一张我HTML和css的视频学习进度 这周学习完了HTML和css中的属性和一部 ...
- Datawhale组队学习周报（第013周）
本周(05月10日~05月16日),第 25 期组队学习正在如火如荼的进行中.本期组队学习,一共有 3 门开源课程,共组建了 3 个学习群,参与的学习者有 292 人.另外,第 26 期组队学习也蓄势 ...
- Datawhale组队学习周报（第012周）
本周(05月03日~05月09日),第 24 期组队学习已经全部结营.另外,第 25 期组队学习也与大家见面了.我在这里要感谢所有的航路开辟者(课程设计者),以及我们的航海士(专业助教).领航员(运营 ...
最新文章
- vc60如何输入c语言,vc60中如何编译运行及调试c语言程序.pdf
- 3. 机器学习中为什么需要梯度下降?梯度下降算法缺点?_浅谈随机梯度下降amp;小批量梯度下降...
- xshell可以连接上linux，但是xftp却连不上问题
- PAT_B_1058_Java(20分)
- Android之CheckBox复选框控件使用inelayout.xml Xml代码
- 【翻译】ANDROID KTX – 使用Kotlin进行Android开发
- java stack 类 效率_Java中ArrayList、LinkedList、Vector、Stack的比较
- 多线程模拟实现生产者／消费者模型 (借鉴)
- TensorFlow游乐场及神经网络简介
- 最新版：如何到Redhat官网下载RedHat镜像及申请试用安装序号
- vue 挑战最强大脑 记忆力5分 观察力5分 推理力4分
- 如何用人工智能自动玩游戏
- 谷歌命名工具_Google地图正在重命名整个社区
- oracle+ebs+fsg报表,EBS 11i FSG报表用XML publish输出问题！！！！
- 风变编程python26_风变编程学习Python的切身体会
- linux修改证书通用名,如何在Linux上创建自己的通配符证书？
- 东财《人力资源管理X》综合作业
- windows下 搭建 wxWidgets 开发环境
- 数字电路要点总结-TTL电路分析
- 英语单词学习-8-39