首页 > 代码库 > 百度前端技术学院-精选笔记-1 HTML学习笔记

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

2024-09-07 20:11:45   216人阅读

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

向大家安利四个在线编写页面的网站（在写笔记的时候，千万不要在预览的状态下点击链接，原因你懂的！！！！）：
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=http://www.mamicode.com/"favicon.ico">
    <link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"../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">

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


联系
我们