HTML基础

Author Avatar
Ninefire 6月 06, 2018
  • 在其它设备中阅读本文章

meta标签

  • meta标签用来设置网页的一些元数据，比如网页的字符集、关键字、简介等。
    meta是一个自结束标签。

标题标签

  • 在HTML中共有6级标题标签h1,h2,h3,h4,h5,h6
  • 在显示效果上h1最大，h6最小，但是文字的大小我们并不关心，因为文字大小属于样式。
  • 使用HTML标签时，关心的是标签的语义，我们使用的标签都是语义化标签。
  • 6级标题中，h1最重要，表示一个网页的主要内容，h2~h6重要性依次递减。
  • 对于搜索引擎来说，h1的重要性仅次于title，搜索引擎检索完title之后，会立即查看h1中的内容。
    h1标签非常重要，它会影响到页面在搜索引擎中的排名，页面只能写一个h1标签。
  • 一般页面中标题标签只使用h1、h2、h3，其他标签基本不使用。

p标签

  • 段落标签，段落标签用于表示内容中的一个自然段。
    使用p标签来表示一个段落。
  • p标签中的文字，默认会独占一行，并且段与段之间会有一个间距，但样式我们并不关心。
  • 在HTML中，字符之间写再多的空格，浏览器也会当成一个空格解析，换行也只会当成一个空格解析。
  • 在页面中可以使用br标签来表示一个换行，br标签是一个自结束标签。
  • hr标签也是一个自结束标签，可以在页面中生成一条水平线。

实体

  • 在HTML中，一些如< >中特殊字符是不能直接使用的，需要使用一些特殊的符号来表示这些特殊字符，这些特殊符号被称为实体（转义字符），浏览器解析到实体时，会自动将实体转换为其对应的字符。
    实体的语法：
    &实体的名称;
例如：
      <       &lt;
      >       &gt;
      空格    &nbsp;
  版权符号    &copy;

相对路径

  • src属性配置的是图片的路径，目前我们所要使用的路径全部是相对路径。
    相对路径：相对路径指相对于当前资源所在目录的位置。
  • 可以使用../来返回一级目录，返回几级目录就使用几个../

图片的格式

  • JPEG（JPG）
    JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明。
    一般使用JPEG保存照片等颜色丰富的图片。
  • GIF
    GIF支持的颜色少，支持简单的透明（图片透明边界为水平和垂直），且支持动态图。
    图片颜色单一或者是动态图时可以使用GIF。
  • PNG
    PNG支持的颜色多，并且支持复杂的透明。
    可以用来显示颜色复杂的透明的图片。
  • 图片的使用原则
    1.效果不一致，使用效果好的。
    2.效果一致，使用占容小的。

meta标签扩展

  • 使用meta标签设置网页的字符集
    <meta charset="UTF-8">
  • 使用meta标签设置网页的关键字
    <meta name="keywords" content="HTML5,css,JavaScript">
  • 使用meta标签指定网页的描述
    <meta name="description" content="发布物联网工程2班的相关信息">
  • 使用meta标签设置请求的重定向
    <meta http-equiv="refresh" content="5;url=http://www.baidu.com">
    <meta http-equiv="refresh" content="时间;url=目标路径">

搜索引擎在检索页面时，会同时检索页面中的关键词和描述，但是这两个值不会影响页面在搜索引擎中的排名。

img图片标签

使用img标签来向网页中引入一个外部图片
img标签也是一个自结束标签。

属性：

  • src：设置一个外部图片的路径。
  • alt：可以用来设置图片的描述，在图片不能显示时，会显示该描述。
  • width：可以用来修改图片的宽度，一般使用px作为单位。
  • height：可以用来修改图片的高度，一般使用px作为单位。

例：<img src="images/1.jpg" alt="这是一个大美女" width="200px"/>

搜索引擎可以通过alt属性来识别不同的图片，如果不写alt属性，则搜索引擎不会对img中的图片进行收录。
宽度和高度两个属性若只设置一个，另一个也会同时等比例自动调整。
如果两个值同时指定则按照你指定的值来设置。
一般开发中除了自适应的页面，不建议同时设置width和height

超链接

使用超链接可以让我们从一个页面跳转到另一个页面。
使用a标签来创建一个超链接。

属性：

  • href：指向链接跳转的目标地址，可以写一个相对路径或一个完整的地址。
  • target：规定在何处打开链接文档。
    可选值：
    • _self，表示在当前窗口中打开 （默认值）。
    • _blank，表示在一个新的窗口中打开。
    • name，可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开。

如发现错误请联系我，谢谢你。
本文链接：http://ninefire.tk/HTML&CSS.basics/06.html