百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

HTML学习笔记,同时也有点问题,有人来一起讨论吗?

作者李杨帅课程任务一:零基础HTML编码3390次浏览82017-03-06 15:28

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

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

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

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

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

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

可以看到,在这个网站中有些元素已经不推荐使用了,但是像《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 章节的尾部:版权信息/相关文档/一些独立内容的尾部也可以用到

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

  1. 用〈label〉绑定<input>的时候,这两个是独立分开写好,还是把<input>写在<label>里面好?还是无所谓?
    我认为无所谓,只要有固定的格式就好,有人推荐把<input>写在<label>里面,利用嵌套方便阅读理解。
  2. 在新窗口中打开链接。
    我在百度页面的搜索结果中,看到百度使用的 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">
    
8条评论