最近学了html5和css3,随便写下随笔记录学习内容。
这也是第一次写博客,感觉应该没什么人看的吧( ̄▽ ̄)~*
如果你有幸看到我写的随笔的话,如果你也是小白的话,如果文章对你有一点点帮助的话
那我还是会挺开心的( ̄ˇ ̄)
废话不多说,开始正文内容
学习时参照的教学视频
1、https://www.bilibili.com/video/BV1ds411r7o7 【星月教你做网站】
2、https://www.bilibili.com/video/BV1Mx411m7fd 【极客学院:Web前端开发教学】
(总所周知,b站是一个学习平台)
学的不精,很多原理是不懂的,只是勉强知道怎么使用
什么是HTML
HTML是用来描述网页的一种语言
HTML指超文本标记语言(Hyper Text Markup Language)
HTML不是编程语言,是一种标记语言
关于HTML5的新特性
用于绘画的canvas标签
用于媒介回放的video和autio元素
对本低离线储存的更好支持
新的特殊内容元素(article、footer、header、nav、section)
新的表单控件(calendar、date、time、email、url、search)
浏览器的支持(Safari、Chrome、Firefox及Opera包括IE9基本支持HTML5)
html文件模板
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>标题</title> 6 7 </head> 8 <body> 9 10 </body> 11 </html>
关于<!DOCTYPE>
HTM有多个不同版本,只有完全明白页面中使用的确切HTML版本,浏览器才能完全正确显示出HTML页面。HTML5:用<!DOCTYPE html>
HTML的各种标签
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!-- UTF-8的作用是避免网页出现乱码 --> 5 <meta charset="UTF-8"> 6 <!-- title是网页的名称 --> 7 <title>html的各种标签</title> 8 </head> 9 <body> 10 <!-- 以下两行代码是展示不用段落标签时的效果 --> 11 不用标签时 12 hello world! 13 <!-- 以下六行代码是展示不同大小的标题 --> 14 <h1>标题h1</h1> 15 <h2>标题h2</h2> 16 <h3>标题h3</h3> 17 <h4>标题h4</h4> 18 <h5>标题h5</h5> 19 <h6>标题h6</h6> 20 <!-- 以下两行代码是展示p标签的作用 --> 21 <p>使用p标签,标签定义段落</p> 22 现在是第二段,上面是第一段 23 <!-- 以下三行代码是展示a标签的作用 --> 24 <h3>使用a标签,标签定义链接</h3> 25 <a href="https://www.bilibili.com/video/BV1Mx411m7fd?p=8">这个是我学习时看的视频</a> 26 <br/> 27 <!-- 以下一行代码是展示img标签的作用 --> 28 <img src="D:/Web/从入门到精通/photo/1.jpg"> 29 </body> 30 </html>
想复制的孩子记得改下img标签图片的路径
打开网页时的效果如下
html5的元素-属性-格式化
-
- 关于元素的定义(具体参照https://www.w3school.com.cn/html/html_elements.asp)
- 关于属性的定义(具体参照https://www.w3school.com.cn/html/html_attributes.asp)
- 关于文本格式化的定义(具体参照https://www.w3school.com.cn/html/html_formatting.asp)
如果懒得点开链接详细了解,想粗略了解的话,那我们参照下下面代码
下面p是元素,align是p元素的属性,align对齐方式之居中是文本内容,我们可以用<b></b>标签对齐进行文本格式化,对齐加粗
<p align="center">align对齐方式之居中</p>
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>html5的元素-属性-格式化</title> 6 </head> 7 <!-- body里面bgcolor表示body部分的背景颜色,这里为樱花的颜色 --> 8 <body bgcolor="#F5D4D9"> 9 <!-- 以下5行代码表示html元素的使用方式 --> 10 <h3>html元素</h3> 11 <p>元素</p> 12 <br/> 13 <p><a>元素的嵌套</a></p> 14 <br/> 15 <h3>html属性</h3> 16 <!-- 以下3行代码表示html标题的对齐方式 --> 17 <p align="center">align对齐方式之居中</p> 18 <p align="left">align对齐方式之居左</p> 19 <p align="right">align对齐方式之居右</p> 20 <!-- 以下4行代码表示html中a标签打开链接的方式,是新建页面还是刷新页面 --> 21 <a href="https://www.bilibili.com/video/BV1Mx411m7fd?p=11" target="_blank">a标签target="_blank"时</a> 22 <br/> 23 <a href="https://www.bilibili.com/video/BV1Mx411m7fd?p=11" target="_self">a标签target="_self"时</a> 24 <br/> 25 <!-- 以下代码表示html的各种格式化 --> 26 <b>定义粗体文本_格式化</b><br/> 27 <big>定义大号字_格式化</big><br/> 28 <em>定义着重文字_格式化</em><br/> 29 <i>定义斜体文本_格式化</i><br/> 30 <small>定义小号字_格式化</small><br/> 31 <strong>定义加重语气_格式化</strong><br/> 32 参照<sub>定义下标字_格式化</sub><br/> 33 参照<sup>定义上标字_格式化</sup><br/> 34 <ins>定义插入字_格式化</ins><br/> 35 <del>定义删除字_格式化</del> 36 </body> 37 </html>
上面有一些代码在HTML5上是已经过时的,比如bgcolor元素、align元素、big标签,虽然过时,但是还是能出效果的,后面学到css后,一般都是用css自定义标签样式
打开网页时的效果如下
补充:关于<a>标签链接的使用
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>html5的链接</title> 6 </head> 7 <body> 8 <!-- 文本式超链接 --> 9 <a href="https://hao.360.com/?h_lnk">touch me</a> 10 <br/> 11 <!-- 图片式超链接,alt的作用是如果图片加载失败时会显示"点我"文本,同时可以设置图片的宽和高 --> 12 <a href="https://hao.360.com/?h_lnk"> 13 <img src="D:/Web/从入门到精通/photo/2.jpg" alt="点我" height="200px" width="200px"> 14 </a> 15 <br/> 16 <!-- 页面内的跳转(文档内的跳转) --> 17 <a name="tips">hello</a> 18 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 19 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 20 <a href="#tips">跳转到hello位置</a> 21 </body> 22 </html>
打开网页时的效果如下
总结
上面应该也没什么难度的应该,基本操作,复制代码然后去编译去看效果能一目了然的
第一次写博客,感觉还是挺方便的,应该还有挺多功能还没了解,可能在观看体验上面整的不是很人性化 ╮(╯▽╰)╭
最后希望这篇简单的随笔能对你们有所帮助吧(= ̄ω ̄=)
没用就当看着玩啦[狗头]