HTML｜青训营笔记

课堂笔记

本堂课重点内容：

• 简单介绍了什么是前端、前端的技术栈、应该关注那些方面和前端的边界以及开发环境等
• HTML的概念、标签
• html5新增的一些语义化标签等。

具体案例：

HTML:

• HTML元素 = 开始标签 + 结束标签 + 元素内容

• 一些元素只有一个标签，如img、input、br等

• HTML元素标签不区分大小写

• 元素可以嵌套在其他元素中间

• 元素可以拥有属性，属性包含有元素的额外信息

• HTML结构标签:

  • < HTML>：定义HTML文档
  • < head>：定义关于文档的信息
  • < title>：定义文裆的标题
  • < body>：定义文档的主体

常用的HTML标签:

p标签、h1~h6标签、div标签、ol/ul>li标签、input标签、img等。

注意: p标签、h1~h6标签内容建议只放文字。

• p标签:
• <p>Hello 青训营</p>
• h1~h6标签:

<h1>青训营</h1>
<h2>青训营</h2>
<h3>青训营</h3>
<h4>青训营</h4>
<h5>青训营</h5>
<h6>青训营</h6>
复制代码

注意 :h1~h6对应不同大小的字体,其中h1最大.同时一个html文档只能有一个h1标签

• 超链接标签(a标签): 可以给文字,图片,音乐,其他标签添加超链接功能,默认会该表字体颜色以及添加下划线 href 属性. 可以是本地的资源,也可以是网络路径

  <a href="https:baidu.com" target="_self" >百度</a>

  （1）href：指定访问资源的URL

  （2）target:指定打开资源的方式

      -   _self：默认值，在当前页面打开
      -   _blank：在空白页面打开
  
      通常在页面内部跳转使用_self，跳转到外部资源用_blank
  复制代码
  

• 多媒体标签

  音频： audio 是一个双标签，它同图片一样，需要使用src属性设置音频查找的路径，支持音频文件的格式有：.mp3、.ogg、.wav后缀的文件

  <audio src="audio.mp3" controls="controls"></audio>
  复制代码
  

  注意:src属性是音频文件的路径，controls是音频控制条属性：音频加载后不会自动显示播放器的控制条，需要使用controls属性进行设置，属性值也是controls。

  视频： 也是一个双标签，视频设置方法与音频非常类似，支持视频文件的格式

• 其他标签:

    < hr> ：定义水平线
    < b> ：定义粗体文本
    < i> ：定义斜体文本
    < u> ：定义文本下划线
    < center> ：定义文本居中(css完成)
    < br>：定义换行
复制代码