技术改变生活

Technology changes life,Life-long learning

三 HTML-结构与基础

一 、基础结构

1.1、网页整体结构

1.2、文档类型声明

  1. 作用
    文档类型声明(Document Type Declaration,也称Doctype)。它主要告诉浏览器所查看的文件类型。在以往的HTML4.01 和 XHTML1.0 中,它表示具体的 HTML 版本和风格。而如今 HTML5 不需要表示版本和风格了。
  2. 示例

1.3、html标签(双标签)

  1. 作用
    它是一个双标签,头尾呼应,包含内容。这个元素有一个属性和值:lang=”zh-cn”,表示文档采用语言为:简体中文
  2. 注意
    其它所有的标签都必须写在html标签里面, 也就是写在html开始标签和结束标签中间.
    并且一个HTML文件只能有一个HTML标签

1.4、head标签(双标签)

  1. 作用
    它是一个双标签,用来包含元数据内容,元数据包括:<link>、<meta>、<noscript>、<script>、<style>、<title>。这些内容用来浏览器提供信息,比如 link提供 CSS 信息,script提供JavaScript 信息,title 提供页面标题等
  2. 应用场景
    1. 指定网站的标题 / 指定网站的小图片
    2. 添加网站的SEO相关的信息(指定网站的关键字/指定网站的描述信息)
    3. 外挂一些外部的css/js文件
    4. 添加一些浏览器适配相关的内容
  3. 注意
    一般情况下, 写在head标签内部的内容都不会显示给用户看

1.5、meta 元素(单标签)

  1. 说明
    这个元素用来提供关于文档的信息,起始结构有一个属性为:charset=”utf8″。表示告诉浏览器页面采用的什么编码,一般来说我们就用utf8。当然文件保存的时候也是utf8,而浏览器也设置 utf8即可正确显示中文,
    meta也可以定义很多其他的属性,后面细讲
  2. 示例代码

1.6、title 标签(双标签)

  1. 说明
    设置浏览器左上角的标题
  2. 示例代码

1.7、link 元素(单标签)

  1. 作用
    link标签通常放置在一个网页的头部标签head标签内的用于链接外部css文件、链接收藏夹图标(favicon.ico),<link>标签最常见的用途是链接外部样式表的外部资源。
  2. 属性
    属性 说明
    href 值为外部资源地址这里是收藏夹图标地址
    rel 定义当前文档与被链接文档之间的关系
    type 规定被链接文档的 MIME 类
  3. 示例代码

1.7、base 元素(单标签)

  1. 作用
    为页面上的所有链接规定默认地址(href)或默认目标(target)。
    常见的url路径形式分别有相对路径与绝对路径,对于相对URL,通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。但使用<base>标签后,浏览器将不再使用当前文档的 URL,而使用<base>标签指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。
  2. 注意
    • base标签必须位于 head 元素内部
    • 一个HTML中最多使用一个<base>标签,当用多个<base>标签定义了href时,默认使用第一个<base>标签的href定义的地址。
  3. 示例代码

1.8、body标签(双标签)

  1. 作用
    双标签,专门用于定义HTML文档中需要显示给用户查看的内容(文字/图片/音频/视频)
  2. 注意
    1. 一个html开始标签和一个html结束标签只能有一对body标签
    2. 默认样式:margin:8px;

二、基础标签

1、h标签(Headline)(双标签)

  1. 作用
    用于给文本添加标题语义
  2. 格式
  3. 说明
    • H标签是用来给文本添加标题语义的, 而不是用来修改文本的样式的
    • H标签一共有6个, 从H1~H6, 最多就只能到6, 超过6则无效
    • 被H系列标签包裹的内容会独占一行
    • 在H系列的标签中, H1最大, H6最小
    • 在企业开发中, 一定要慎用H系列的标签, 特别是H1标签. 在企业开发中一般情况下一个界面中只能出现一个H1标签,
    • H1默认样式:margin:8px;
    • H2标签尽量在页面中不要超过5个
    • 针对搜索引擎来说是告诉了不同标签下代表不同的重要级别内容。如果你在一个网页中使用的1-2中H型标签中都含有一个相同关键字,搜索引擎也会格外注重你所注重关键字与内容,但切记别乱用。

2、br标签(Break)(单标签)

  1. 作用
    让内容强制换行
  2. 格式
  3. 说明
    br的意思是不另起一个段落进行换行,如果需要另起了一个段落,则应该使用p标签来做。

3、p标签(Paragraph)(双标签)

  1. 作用
    告诉浏览器哪些文字是一个段落
  2. 格式
  3. 说明:
    在浏览器中会单独占一行且自动换行。
  4. p标签与br标签的区别
    1、相同之处
    brp都是有换行的属性及意思
    2、不同之处
    1、<br/>是只需一个单独使用,而<p>和</p>是一对使用
    2、br标签是小换行,p标签是大换行(分段)作用

4、a标签(anchor)(双标签)

4.1、作用

<a>标签也叫做超级链接或超链接,用于从一个页面链接到另一个页面。

<a> 元素最重要的属性是 href 属性,它指示链接的目标。

4.2、格式

4.3、注意

在a标签之间一定要写上文字,如果没有,那么在页面上找不到这个标签。

4.4、属性

1、target
  1. 作用
    规定在何处打开链接文档
  2. 可选值
    可选值 说明
    _blank 在新窗口或标签页中打开文档
    _self 在当前窗口打开文档(默认)
    _parent 在父窗框组(frameset)中打开文档(废弃)
    _top 在顶层窗口打开文档
  3. 说明
    这四种最常用的是_blank,新建一个窗口。而_self是默认,当前窗口打开。_parent_top是基于框架页面的,分别表示在父窗口打开和在整个窗口打开。而HTML5 中,框架基本被废弃
2、href
  1. 说明
    href(hypertext reference) 是一个必须属性,用来指定跳转的目标地址,他的值可以是一个外部链接地址,也可是本地的html文件
  2. 可选值
    描述
    URL 超链接的 URL。可能的值:绝对 URL – 指向另一个站点(比如 href=”https://www.baidu.com“)
    URL 相对 URL – 指向站点内的某个文件(href=”index.htm”)
    URL 锚 URL – 指向页面中的锚(href=”#top”)
3、title
  1. 说明
    悬停文本(介绍这个链接,只有在鼠标移动到超链接上时才会显示)

4.5、示例代码

  1. 假链接(本质是跳转到当前页面)
  2. 跳转外部链接
  3. 跳转本地界面
  4. 跳转到当前页面指定位置(锚点链接)
  5. 跳转到指定页面的指定位置
  6. base标签和a标签结合使用
  7. 发送邮件

5、img(单标签)

  1. 作用
    ,在网页上插入一张图片
  2. 格式
  3. 图片路径:图片路径分为两种
    • 网络路径:直接是其他服务器的图片地址
    • 本地路径:本地操作系统的路径
    • 一种是绝对路径、一种是相对路径(相对于该HTML页面文件所在路径)。在企业级开发中没有人使用绝对路径,因为绝对路径不易于移植。
  4. 常用属性:
    属性 说明
    src(source) 告诉浏览器需要插入的图片路径, 以便于浏览器到该路径下找到需要插入的图片
    alt(alternate) 规定图像的替代文本,只有在src指定的路径下找不到图片,才会显示alt指定的文本
    title 悬停文本(介绍这张图片, 只有在鼠标移动到图片上时才会显示)
    height 设置图片显示的高度
    width 设置图片显示的宽度,如果想让图片等比拉伸, 只写高度或者宽度即可
  5. 示例代码

6、span

  1. 作用
    双标签,没有实际意义,它的存在纯粹是为了应用样式,给一段内容加上
    <span></span>
    标记,通常配合css来定义内容的样式
  2. 格式

7、div

  1. 作用
    双标签,一个没有任何语义的通用元素,主要用于搭建界面的整体架构
  2. 格式

8、pre

  1. 作用
    该标签可定义预格式化的文本,被包围在 pre 元素中的文本通常会保留空格和换行符,并且文本会呈现为等宽字体。该标签的一个常见应用就是用来表示计算机的源代码
  2. 格式

原文始发于:三 HTML-结构与基础

点赞