初识H5(笔记二)

    xiaoxiao2021-03-26  31

        前一篇文章 初识H5(笔记一) 简单的总结了下  HTML 的作用、历史、基本架构规范、几个基本的标签、字符集和DTD文档声明;那么这篇文章继续研究探讨 HTML 的知识。在之前我们编写html文件都是使用文本编辑器,效率低不说还很不方便,那么在企业开发中,使用编写网页的工具主要有三种 : Dreamweaver(偏向于设计) / Sublime(轻量级、自带功能不足、但插件很强大) / WebStrom(重量级、功能强大、对JS支持很好)。一下我们主要使用 WebStrom 辅助学习网页开发。

        首先先来看看 H系列标签、p标签、Hr标签 :

            1. H系列标签分为6个 从H1~H6 ,最多到6,超过6则无效 如 : <h1>标题</h1>;

                      + 被H标签包裹的内容会独占一行

                      + 在H系列标签中H1最大,H6最小

                      + 在企业开发中要慎用H系列标签,特别是H1标签,一般情况下一个界面只能出现一个H1标签(跟SEO有关)

                      + H系列标签只是给文本添加语义,而没有修改文本的样式

             2. p标签,作用是告诉浏览器哪些文本是一个段落,段落标签;

                       +  段落标签包裹的内容独占一行

             3. Hr标签, 作用是在浏览器中添加一行分割线

                       + <hr /> 是单标签,而且独占一行

                       + <hr /> 和 <hr> 这两种写法在H5的版本规范中都可以,<hr />写法是在XHTML中的规范要求,必须闭合,但是H5得规范对HTML和XHTML的规范是向下兼容。

        在编写HTML时的注释格式

                                                  <!--这里是注释的内容-->   快捷方式(Mac)command + /

         图片标签

                     图片标签的基本格式 :<img src="图片名" alt="替代图片的文本" width=“图片的宽” height="图片的高" title="当鼠标悬停在这个图片上时,显示这段文字">

                              注意 : 01.同时设置图片的宽高时可能图片会被拉伸,也可以单独只设置宽或高,那么图片的高或宽会按照图片原本款高比推算出来

                                        02.img标签不会独占一行

         <br>标签 : 同一语义段落换行使用(企业开发用到的地方较少,一般换行时,说明不是一段语义时才换行。注意点 : 添加N个<br>标签就换N行)

        img标签获得图片的相对 / 绝对路径

                                                                        + 相对路径 : 每次从html文件所在的文件夹开始查找(资源图片与HTML文件的关系分为三类:01.同级、02.下级、03.上级)。

                                                                    + 绝对路径 : 每次从根目录(Mac)/ 指定的一个盘符开始查找。

                                                                    + 注意点 : 路径中尽量不要有中文,可能会发生未知错误;绝对路径不要跨盘符查找,找不到。

         <a>标签 : 用于控制两个页面相互跳转    

    <!--a标签的基本格式--> <a href="想要跳转的网页地址">显示给用户看的内容</a>      注意 : a标签不仅可以使点击文字具有跳转页面作用,也可以使图片具有页面跳转作用

                    a标签必须具有href属性,不然使用a标签不知跳转到何处

                    a标签中跳转的URL地址必须包含协议头 如 : http://  or https://

                    a标签不仅可以跳转远程服务器网页,也可以跳转本地网页

    <a href="想要跳转的网页地址"> <img src="显示的可点击图片" alt="图片显示不出来" width="200"> </a>      <a>标签重要的属性 : href描述要跳转的网址、title鼠标悬停显示的文字、target跳转是否开启新的选项卡                          

         <base>标签 : 用来指定当前网页中所有超连接(a标签)需要如何打开

                               注意点 :01. base标签必须写在head标签内部

                                        02. base标签的target属性和每个a标签的target属性设置优先级为 : 就近原则

         html中的假连接 :其实就是 a 标签,只不过href属性对应的跳转网页链接用 "#" or "javascript:"替代 致使点击链接跳转不了。

                                 作用 :01. 在项目开发前期很多页面未完成时,很多超链接先使用假链接

                                                    02. 实现点击某个文本弹回网页顶部功能

           "#" 和 "javascript:"区别 :"#"号点击会弹回网页顶部;"javascript:"不会

                      

         html中利用<a>标签跳转到本页特定位置 和 跳转到其他网页特定位置

                                     跳转本网页特定位置 : 与其说跳转到本网页特定位置,不如说跳转到本网页特定位置的标签。每一个标签都有一个id的属性,我们就是通过这个属性,来找到要跳转位置的标签。至于用什么方法跳转,我们还是利用<a>标签来跳转,只不过在 href 属性里加入#要跳转标签的id。

    <!--点击这个a标签,跳转到下面的h1标签--> <a href="#flag">点我跳到本页指定位置</a> <!--跳转到的位置--> <h1 id="flag">要跳转的位置</h1>                                   跳转本其他网页特定位置 : 基本原理和上面跳转本网页特定位置方法相同,不同的就是在<a>标签的 href 属性里要跳转的网页URL/文件名后面加上 #其他网页中指定位置标签的id。

    <!--点击这个a标签,跳转到特定网页中的h1标签--> <a href="Test.html#flag">点我跳到Test.html网页中指定位置</a> <!--其他网页中要跳转到的位置--> <h1 id="flag">要跳转的位置</h1>

    WebStrom快捷方式 01. command + D 快速复制添加当前光标所在行代码

                                     02. command + X 快速删除当前光标所在行代码

                                     03. command + option + T 快速包裹一段选中文字来添加语义标签

    转载请注明原文地址: https://ju.6miu.com/read-662250.html

    最新回复(0)