• 百度前端技术学院-精选笔记-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标签被 浏览器支持的情况,当然这只是其中一个功能,剩下的还需要各位同学去探索。
    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">
  • 相关阅读:
    mac 电脑自动登录服务器
    prometheus-operator 监控 k8s 外部集群
    生产prometheus-operator 监控二进制kubernetes
    微信小程序-nginx-https 代理后端服务
    Redis 高可用之哨兵模式
    Redis 高可用之数据持久化
    服务之间连接不上问题分析
    prometheus 告警指标
    错误代码:0x800706BE 解决方法
    泛微OA服务器更改IP地址后EMobile出现“调用远端服务器接口时发生错误(122)”的提示
  • 原文地址:https://www.cnblogs.com/changningios/p/6528144.html
Copyright © 2020-2023  润新知