【青训营】- HTML知识梳理

FixEcho
303 阅读3分钟

html文档结构

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>我的测试站点</title>
  </head>
  <body>
    <p>这是我的页面</p>
  </body>
</html>

  • <!DOCTYPE html> 声明文档类型，告诉浏览器按照什么标准来解析渲染页面，当前短声明代表W3C的HTML5标准

  • <html></html> 网页的根元素，包含整个页面的内容

  • <head></head> 网页的元素，其中包含页面描述，css样式等

  • <body></body> 网页主体内容，能够被访问者看到的内容，包括文本、视频等

  • <meta></meta> 元数据，描述数据的数据，常见的元数据如下：

<meta charset="utf-8">
<!-- 表示页面的字符集编码，只有用对应的字符集去解析才能得到正确的文字，而非乱码的文字 -->

<meta name="keywords" content="掘金-代码不止，掘金不停">
<!-- 效果如下图 此为网页关键字，已经被搜索引擎忽略了， 因为作弊者填充了大量关键词到keyword， 错误地引导搜索结果-->

<meta name="description" content="掘金是一个帮助开发者成长的社区……">
<!-- 效果如下图 此为网页描述-->

image.png

<meta name="author" content="Smith">
<!--添加作者-->

  • <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> 可以自定义页面图标，如下图,也可以用png格式的图标，填入href链接中 image.png

  • <link rel="stylesheet" href="css.css"> 引入外部样式表

  • <script type="text/javascript" src="my-js-file.js"></script> 引入外部行为表

元素类型

页面元素分为三类：块级元素、行内元素、行内块元素

  • 块级元素：占据其父元素的整行，能容纳其他块级元素或者行内元素，可以控制宽高、行高、边框等
  • 行内元素：只占据它内容的大小，只能容纳文本或其他行内元素，不能设置宽高等
  • 行内块元素：既不会独占一行，也支持设置宽高等

标题与段落

标题有<h1>到<h6>，一般情况下<h1>用来表示网页的logo而且一个页面只能有一个<h1>

段落用<p></p>标签表示

列表

列表分为三类：有序列表、无序列表、定义列表

  • 有序列表
<ol>
     <li>数学</li>
     <li>语文</li>
     <li>英语</li>
     <li>计算机</li>
 </ol>

image.png

  • 无序列表
<ul>
     <li>香蕉</li>
     <li>苹果</li>
     <li>水蜜桃</li>
     <li>鸭梨山大</li>
 </ul>

image.png

  • 定义列表
<dl>
     <dt>四川省</dt>
     <dd>成都市</dd>
     <dd>绵阳市</dd>
     <dd>眉山市</dd>
 </dl>

image.png

超链接

<a href="https://www.baidu.com" target="blank" title="点击进入百度">进入百度</a>

  • 其中href中的链接就是页面将要跳转到的地方，如果需要网页不刷新即填入href="javascript:;"
  • 其中target表示怎么打开页面，新标签页打开值为blank，默认当前页打开为self
  • 其中title为当鼠标移到当前位置时，就会有小窗口显示当前标签的描述

语义化标签

  • <header> 页面的头部或者其父元素的头部，一般包括标题、logo、搜索框等
  • <nav> 导航栏，如菜单、目录、索引等，用来放置一些热门的链接
  • <article> 独立的文档、页面、应用，如新闻文章，博客，用户的评论等
  • <section> 按主题将内容分组，可以用作迷你地图，一组文章标题和摘要
  • <aside> 表示一个与其他内容几乎无关的部分，可以展示广告，引用内容
  • <footer> 表示章节的页脚或者页面的最下面的联系方式友情链接内容

音视频

<video>视频 <audio>音频

  • 属性
  • src 属性是必须的，表示嵌入的文件路径
  • controls 是否展示浏览器自带的空间，可以创建自定义控件
  • autoplay 是否自动播放
  • loop 是否自动循环播放
  • muted 是否静音
  • poster 指定图片或一小段视频可以是广告或者预览
  • source 元素表示视频的可替代资源 针对浏览器兼容问题
  • preload 用来缓冲较大的文件 有三个值 none 不缓冲 auto 页面加载后缓存视频文件 metadata仅缓冲文件的元数据
 <audio controls src="music/apple.mp3">
     你的浏览器不支持该音频
 </audio>
 
 <video controls src="videos/apple.mp4">
     你的浏览器不支持该视频
 </video>
 
  <video controls >
     <source src="videos/apple.mp4" type="video/mp4">
     <source src="videos/apple.webm" type="video/webm">
 </video>
 
 
<video controls width="400" height="400"
       autoplay loop muted
       poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>
  • 添加字幕

字幕类型

  • subtitles 添加翻译字幕
  • captions 只有重要地方出现的字幕
  • timed descriptions 把文字转换为音频
  • 使用track标签包裹，放在所有source之后，使用kind属性指明是哪一种类型，使用srclang高速浏览器你是用什么语言来编写的字幕
<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>
avatar
文章
阅读
粉丝