百度前端技术学院-精选笔记-1 HTML学习笔记

以下是我个人的理解，希望得到肯定与指正，在此先感谢各位。
而且不说温故知新，看别人的笔记就相当于复习了，记得更牢固。

向大家安利四个在线编写页面的网站（在写笔记的时候，千万不要在预览的状态下点击链接，原因你懂的！！！！）：
jsbin.com
mozilla
codepen.io
jsfiddle.net
1.提交作业的时候，不是有一个预览吗？虽然是选填的，但是，可以使用上面的四个网站解决这个问题（无法显示图片，但是可以使用一个神奇的网站解决。想要多大的图片，直接更改宽x高），我看到有的同学作业，直接使用gitHub显示出来效果来了！我研究研究，然后看看是怎么办到的，再写到笔记里面。
2.推荐这里效果图我的作业 ————这个是网上的教程。对于会在git上提交作业的我们，只看文章的前半部分就好啦！如果教程链接失效，根据本页面田野的提示去搜索就好啦。

Hypertext Markup Language（超文本标记语言）的简写就是HTML。
我们在浏览器中打开的网页，这个网页就是由长的帅的HTML组成的，没有HTML就没有网页。

我们使用这个语言的元素，来进行网页的制作。

从上图（来自《HTML5权威指南》）可以看到<code>元素由开始标签、内容、结束标签组成，我想，这就是为什么也会有人把元素叫做标签的原因。

推荐 caniuse.com这个网站很好理解，功能就是可以查询HTML标签被浏览器支持的情况，当然这只是其中一个功能，剩下的还需要各位同学去探索。

可以看到，在这个网站中有些元素已经不推荐使用了，但是像《HTML5权威指南》等出版时间过早的书中并没有说明。

HTML5是说的是HTML的版本，但是字不表意，不是说是从造出来到现在已经第一个版本了，就像QQ2001、QQ2003一样，不是说他两千多个版本了，而是其它的意思，在以后还会有CSS3也是同样的道理，我感觉对于这个大概了解一下就可以了，不必深究，有比它更重要的。
HTML5有一个很重要的概念就是语义化，每个HTML标签都有他的功能，但是在HTML5中为某些标签赋予了一些含义，谁代表什么（<header><main><footer>头部、主要内容、尾部）什么意思。这个字有利于阅读和搜索引擎的抓取，但是HTML5有很多功能现代的浏览器都不支持，低版本的浏览器更不支持了。

下面的代码，是我自己在上课的时候记录的笔记：

<!-->
标签在一对<>中
属性值在双引号中
嵌套缩进
</!-->
<!DOCTYPE html>
<html lang="en"> <head><!-->文档头部</!--> <meta charset="UTF-8"> <title>Document</title> <meta name="keywords" content="晚去"> <meta name="description" content="网易"> <meta name="viewport" content="width=device-width"> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" type="text/css" href="../css/style.css"> <style type="text/css">p{color:#999;}</style> <!-- 文档头部做了啥？ charset="UTF-8"是蛤意思？为什么要放在 head标签 中的第一行？ 嗯哼 title和谁的内容是唯二会显示出来效果的标签？ name和谁是一对？这对是什么鬼？嗯哼？description 是什么意思？ viewport??? icon是啥？在什么情况下不需要写？ rel?styles?heet?type?又都是什么？ href&src 的区别是什么？ 标签和元素是有区别的！ --> </head> <body><!-->文档主体</!--> </body> </html> <!--> 文档的基本属性和信息 meta 标签主要分为三种 one charset属性 定义了文档的字符编码，值和文档的内容是要一致的 two keywords description 主要描述了文档的基本信息 content中的内容主要是给 搜索引擎 用的 three 这一种name为viewport的meta 对移动端浏览器才有效，设置宽高、缩放等等 link 有两个作用 one 引入shortcut icon 在href中引入图片地址，一般不要写，浏览器默认 根目录下的图标进行展示，如果不一样就用显示的引入 two stylesheet引入样式 引入style的两种方式，还有第三种 打 ！ 再 tab 会产生基本的HTML页面————emmet插件 command+ / 会产生注释 ————插件的功劳 </!-->

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>属性</title> </head> <body> fefsfsfefeffesf3232323fesfefefefsfef <div id="nav"></div> <div class="time"></div> <style type="display:none;"></style> </body> </html> <!--> di与class的区别 HTML label和 属性名 都建议用小写 属性值用双引号“”引起 对所有label 都有效的property,也称为全局property </!--> <!--> id属性 元素在页面中唯一的标识 class属性 元素的类名 具有统一的功能和样式的元素可以给一个统一的类名 class属性值中间可以用空格隔开！！！ id&class都是给 CSS&JS使用的 style 规定了元素的样式 title 规定了元素的隐藏内容 鼠标hover在不完全显示的内容或者hover在功能图标上想看其意思的时候 会显示hover的值 </!-->

以下标签语义化的表示章节结构，在HTML5之前都是用div标签进行分隔
header 页面头部／标题／logo／搜索表单等等
nav 任何有导航性质的标签都可以用到，比如页面中的导航，可以有多个
aside 和主要内容不相关的内容，工具内容／广告什么的
article 表示独立的可重复的结构：论坛的帖子／博客的评论
section 表示文档中的一个区域：一般会带一个标题　相临的section之间是有相关性的，article则不相关，是独立的
footer 章节的尾部：版权信息／相关文档／一些独立内容的尾部也可以用到

我在学习中遇到了一些问题，可以帮我解答一下吗？谢谢

用〈label〉绑定<input>的时候，这两个是独立分开写好，还是把<input>写在<label>里面好？还是无所谓？
我认为无所谓，只要有固定的格式就好，有人推荐把<input>写在<label>里面，利用嵌套方便阅读理解。
在新窗口中打开链接。
我在百度页面的搜索结果中，看到百度使用的 target="_blank"，面在网易的首页（163.com）没有加target="view_window"也没有使用target="_blank"确能够在新的页面打开这个连接，这是为什么？

百度搜索新闻的结果代码

网易新闻的代码
3.为什么我在第一次输入密码的时候设置必填属性但是点击提交之后没有效果，是为什么？
这个问题已经在在线编程上解决，因为我少了一个标签，没有注意到，chorme浏览器不能正确运行，但是，在线编程网站上有错误提示，而且可以运行，所以发现了。
```
<label for="PW">请输入密码：</label><input id="PW" placeholder="这是输入框" type="password" maxlength="16" required="required">
```

转载于:https://www.cnblogs.com/changningios/p/6528144.html

百度前端技术学院-精选笔记-1 HTML学习笔记相关推荐

2018年百度前端技术学院学习笔记
对百度前端技术学院心仪已久,今天开始正式学习了,特地开个博客记录今后的学习学了几个月的前端了,之前也做过一些百度前端学院的练习,终于等到2018年前端学院开始,在开头先立flag,本次前端学院的任务 ...
学计算机前端技术学院,百度前端技术学院(任务)
百度前端技术学院这一期高档班的标题列表在:ife/2015_spring/taskatmaster·baidu-ife/ife·GitHub下面的高档班(趁便吐槽一下知乎的链接无法识别URL中文锚点 ...
百度前端技术学院—斌斌学院题库转载 cristina-guan
Cristina_Guan https://github.com/CristinaGuan 博客园首页新随笔联系订阅管理随笔 - 34 文章 - 3 评论 - 2 百度前端技术学院-斌 ...
百度前端技术学院—斌斌学院题库
任务一:零基础JavaScript编码(一) 重要说明百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决 ...
百度前端技术学院--零基础--第二天给自己做一个在线简历吧
百度前端技术学院–零基础–第二天给自己做一个在线简历吧课程目标通过简单的实践,更加清楚地了解HTML是什么,HTML5是什么.学习基本的HTML标签,理解HTML语义化概念任务描述用code ...
百度前端技术学院—-小薇学院(HTML CSS课程任务)
任务一:零基础HTML编码课程概述作业提交截止时间:04-24 重要说明百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...
百度前端技术学院—-小薇学院(HTML+CSS课程任务)
任务一:零基础HTML编码课程概述作业提交截止时间:04-24 重要说明百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...
2018百度前端技术学院第五六课编码作业
2018百度前端技术学院第五六课编码作业一.课程题目这节课给出了三份文字内容相同的简历,但是样式布局不一样.题目要求我们使用同一份HTML结构内容,三份不同的CSS代码分别实现图片所示的样式, ...
沉迷百度前端技术学院的第一天
盼啊盼,终于等到了百度前端技术学院开课的日子,很激动,终于可以跟着学啦! 第一天,主要是了解前端,包括要学什么,用书签标记的方法,还有在codepen.GitHub.CSDN上注册账号,作为一个程序员 ...

百度前端技术学院-精选笔记-1 HTML学习笔记

百度前端技术学院-精选笔记-1 HTML学习笔记相关推荐

最新文章

热门文章