HTML5-part1

基础认知

Web标准

  • 构成:结构、表现、行为

HTML标签的结构

  • 需要确定开始结束包裹内容的选择双标签

    • 文字要加粗

  • 不需要开始结束的选择单标签

  • HTML标签与标签之间的关系

    • 父子关系(嵌套关系)

      • <head> <title></title> </head>
    • 兄弟关系(并列关系)

      • <head></head>

        <body></body>


1、标题标签

  • 标题标签特点

    • 文字都有加粗

    • 文字都有变大,但是从h1到h6文字逐渐减小

    • 独占一行

    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>

    HTML5-part1

2、段落标签

  • 段落标签特点

    • 段落之间存在间隙

    • 独占一行

<p>此元素包含 全局属性 。alink超链接选中之后的文本颜色。此方法不符合规范,请使用 CSS 的 color 属性和 :active 伪类替代。backgroundonfocus文档获得焦点时调用的函数。onhashchange文档当前地址的片段标识部分(以('#')开始的部分)发改变时调用的函数。</p>
   <p>onlanguagechange 用户选择的语言发生改变时调用的函数。onload文档完成加载时调用的函数。onmessag档接收到消息时调用的函数。</p>

HTML5-part1

3、换行标签

  • 换行标签特点:

    • 单标签

    • 让文字强制换

<p>此元素包含 全局属性。<br>超链接选中之后的文本颜色。此方法不符合规范,请使用 CSS 的 color 属性和 :active 伪类替代。backgroundonfocus文档获得焦点时调用的函数。onhashchange文档当前地址的片段标识部分(以('#')开始的部分)发改变时调用的函数。</p>
<p>onlanguagechange 用户选择的语言发生改变时调用的函数。onload文档完成加载时调用的函数。onmessag档接收到消息时调用的函数。</p>

HTML5-part1

4、水平线标签

  • 水平线标签特点:

    • 单标签

    • 在页面中显示一条水平线

<h1>这是文章标题</h1>
   <hr>
   <p>此元素包含 全局属性 。alink超链接选中之后的文本颜色。此方法不符合规范,请使用 CSS 的 color 属性和 :active 伪类替代。backgroundonfocus文档获得焦点时调用的函数。onhashchange文档当前地址的片段标识部分(以('#')开始的部分)发改变时调用的函数。</p>
   <p>onlanguagechange 用户选择的语言发生改变时调用的函数。onload文档完成加载时调用的函数。onmessag档接收到消息时调用的函数。</p>
</body>

HTML5-part1

5、文本格式化标签

  • 文本格式化标签特点:

    • 效果一样,特别强调文字的重要性就用strong、ins、em、del(表示的强调语义更强烈)

    • 并不自动换行

<b>加粗</b>
<strong>加粗</strong>
<u>下划线</u>
<ins>下划线</ins>
<i>倾斜</i>
<em>倾斜</em>
<s>删除线</s>
<del>删除线</del>

HTML5-part1

6、图片标签

 <img src="">
   <!-- alt替换文本:当图片加载失败时,才显示的文本 -->
   <img src="2.gif" alt="这是月亮">  
   <!-- title提示文本:当鼠标悬停时,才显示的文本 ,还可以用于其他标签-->
   <img src="2.jpg" alt="这是月亮" title="嗯哼" width="200">  
   <!-- width和height属性
       注意点:
               如果只设置width和height中的一个,另一个没设置的会自动等比例缩放(此时图片不会变形)。推荐,因为图片不会变形
               如果同时设置了width和height两个,若设置不当此图片可能会变形
    -->
</body>

HTML5-part1

7、绝对路径

<!-- 不推荐使用 -->
   <img src="D:\install\code\day01\images\1.jpg" alt="" width="200">

HTML5-part1

8、相对路径

  • 相对路径(常用):

  • 从当前文件开始找目标文件的过程

  • 相对文件分类:

    • 同级目录---当前文件和目标文件在同一个文件夹中

    • 下级目录---目标文件在下级目录中

    • 上级目录---目标文件在上级目录中

HTML5-part1

<!-- 同级目录 -->
<img src="./2.jpg" alt="">
<img src="2.jpg" alt="">
<!-- 下级目录 -->
<img src="./images/6.jpg" alt="">
<img src="images/6.jpg" alt="">
<!-- 上级目录 见09-->

9、相对路径--上级目录

HTML5-part1

<img src="../2.jpg" alt="">
<img src="../images/2.jpg" alt="">

10、音频标签

<!-- controls--显示播放的控件 autoplay--自动播放(部分浏览器不支持) loop--循环播放-->
<audio src="./firework.mp3" controls autoplay loop></audio>

HTML5-part1

11、视频标签

<!-- controls--显示播放的控件 autoplay--自动播放(谷歌浏览器中需配合muted实现静音播放) loop--循环播放-->
<video src="./video.mp4" controls autoplay muted loop></video>

12、链接标签

  • href的作用是跳转地址

  • target:目标网页的打开形式

    • _self:默认值,在当前窗口中跳转(覆盖原网页)

    • _blank:在新窗口中跳转(保留原网页)

<a href="https://www.baidu.com" target="_blank">跳转到百度</a>
<br>
<a href="./01-标题标签.html">点我呀,点了就去01-标题标签</a>

<!-- 当开发网站初期,我们还不知道跳转地址的时候,href的值书写#(空链接) -->
<br>
<a href="#">空链接,不知道跳转到哪</a>

HTML5-part1

 

 HTML5-part1

上一篇:表格、表单和H5


下一篇:浏览器本地存储(Html5新增:WebStorage)