HTML基础

微风笑雨
277 阅读3分钟

HTML语义化的含义与意义

  • 正确的标签做正确事情
  • 根据内容的结构，选择合适的标签构建开发者阅读并且可维护性高的代码结构，同时更利于浏览器解析
  • 便于搜索引擎SEO
  • 便于阅读维护理解

HTML基本结构

<!DOCTYPE html>
  <html>
    <head>
    </head>
    <body>
    </body>
  </html>
  • <!DOCUTYPE html>放在HTML文档最前面的位置，加上之后就会按照W3C的HTML5标准来解析渲染页面。
  • <html>根元素，包含整个页面内容。
  • <head>对用户不可见，其中包含面向搜索引擎的关键字、页面描述、字符编码声明、CSS样式等。 
    <meta charset="utf-8">
    • charset如果设置此属性，meta元素是一个字符集声明，告诉文档使用哪种字符编码。
    <meta name="keywords" content="关键字">
<meta name="description" content="这是网页描述">
    • name和content属性可以一起使用，以名-值对的方式给浏览器提供元数据，其中name作为元数据的名称，content作为元数据的值。详细name-content可查看MDN
      • keywords关键字
      • description页面描述
      • author作者
      • viewport用于移动设备，用来定义设备屏幕上显示网页的区域
    • content此属性包含name属性的值
    <link rel="stylesheet" href="test.css">
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="test.css" media="screen and (max-width:600px)">
    • link外部资源链接元素，最常用于链接外部样式表，此外还可用于设置网站图标,以及对媒体查询进行设置；查看link标签详细文档。
      • href指定不配链接资源的URL
      • rel命名链接文档与当前文档的关系
      • media定义外部文档使用的媒体类型
    <script type="text/javascript" src="test.js"></script>
    • script可执行脚本,查看script标签详细文档。
      • 不加任何属性，停止DOM加载，等待脚本下载，下载完成后执行，执行完成后继续DOM加载
      • defer立即下载，等待DOM加载完成后执行
      • async立即下载，下载完成后执行
  • <body>页面主体，包含能够被用户访问到的内容

常用HTML元素

  • 行内元素 (inline)
    • 定义：一个行内元素只占据它对应标签的边框所包含的空间
    • 只能容纳文本或其他内联元素
    • 常用内联元素:<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
  • 行内块级元素 (inline-block)
    • 元素在行内排列，不会独占一行
    • 支持设置宽高及垂直边距、边框
    • 常见的行内块级元素:<img>、<input>、<td>
  • 块级元素 (block)
    • 占据父元素的整行，总是从新行开始
    • 可以容纳其他块级元素或行内元素
    • 可以控制宽高、行高、编剧、边框
    • 常用的块级元素:<div>、<p>、<h1>-<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>
  • 行内元素与块级元素的区别
    • 块级元素独占一行，宽度自动填满其父元素宽度
    • 行内元素左右方向的padding、margin会产生边距效果，垂直方向的padding、margin不会产生边距效果，该行内元素的内容范围会增大，但是对周围元素不产生影响[1]。
    • 块级元素即使设置了宽度也是独占一行 image.png
<div class="container">
   <p class="block"></p>
   <span class="line">line</span>
</div>

 *{
   margin: 0;
   padding: 0;
 }
 .container {
   border: 1px solid #000;
   width: 200px;
   height: 200px;
   margin: 30px auto;
 }
 .block {
   width: 50px;
   height: 50px;
   background: red;
 }

 .line {
   background: green;
   margin: 10px;
   padding: 10px;
   border: 1px solid #000;
 }

语义化标签

  • 区块
  • 分组
  • 文本

多媒体元素

  • 图片
  • 音视频

[1]inline的元素 高度，padding导致位置偏移

avatar
文章
阅读
粉丝