HTML基础（1）

HTML语言的一个主要工作是编辑文本结构和文本内容（也称为语义)以便浏览器能正确的显示结果.

标题

    <h1>我是标题一</h1>
    <h2>我是标题二</h2>
    <h3>我是标题三</h3>
    <h4>我是标题四</h4>
    <h5>我是标题五</h5>
    <h6>我是标题六</h6>

这里有六个标题元素标签 . 每个元素代表文档中不同级别的内容;
<h1>表示主标题，<h2>表示二级子标题，<h3>表示三级子标题等等.

段落

<p>我是段落</p>

注释

<!-- 我是一个注释 -->

换行

<br>

水平线

<hr>

列表

• 无序列表

 <ul>
      <li>我是无序列表一</li>
      <li>我是无序列表二</li>
      <li>我是无序列表三</li>
  </ul>

• 有序列表

   <ol>
        <li>我是有序列表一</li>
        <li>我是有序列表二</li>
        <li>我是有序列表三</li>
    </ol>

• 自定义列表

<dl>
  <dt>Coffee</dt>
    <dd>Black hot drink</dd>
  <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

文本格式

    <strong>加重语气</strong>
    <em>着重文本</em>
    <i>斜体文本</i>
    <b>粗体文本</b>
    <small>小号文本</small>
    这是 <sub> 下标</sub> 和 <sup> 上标</sup>

属性

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name="value"

<div class="" id="" style="" title="">属性实例</div>

超链接

URL可以指向HTML文件，文本文件，图像，文本文档，视频和音频文件以及可以在网络上存在的任何其他内容。 如果Web浏览器不知道如何显示或处理文件，它会询问您是否要打开文件（在这种情况下，打开或处理文件的义务传递到设备上的合适的本机应用程序）或 下载文件（在这种情况下，您可以尝试以后处理它。）

<a href="" target="" title="" >我是超链接</a>

• title属性:这旨在包含关于链接的补充有用信息，例如页面包含什么样的信息或需要注意的事情.
• target 属性:
  • _blank:浏览器总在一个新打开、未命名的窗口中载入目标文档
  • _self:这个目标的值对所有没有指定目标的 <a> 标签是默认目标,它使得目标文档载入并显示在相同的框架或者窗口中作为源文档.这个目标是多余且不必要的,除非和文档标题 <base> 标签中的 target 属性一起使用.
  • _parent:这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集.如果这个引用是在窗口或者在顶级框架中,那么它与目标 _self 等效.
  • _top:这个目标使得文档载入包含这个超链接的窗口,用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口.
• href属性：
  • 目标地址：<a href="https://developer.mozilla.org/zh-CN/">MDN</a>
  • 假链接:<a href="#"></a>\<a href="javascript:"></a>
  • 指定位置:<a href="index.html#location">跳转到指定位置</a>只需要在index.html页面添加一个id位置即可.
  • 下载:<a href="girl.zip">下载福利资源<a/>

相对路径和绝对路径

• 绝对路径：从电脑的具体盘符开始寻找我们需要的资源.(移植性太差)
• 相对路径:一个文件相对于另外一个文件的位置寻找我们需要的资源.
• 相对路径几种查找方式：
  • 同级：
    • 直接编写, 例如: girl.png
    • 加上./ 编写, 例如./girl.png ./代表当前目录
  • 下级:
    • 直接编写, 例如abc/girl.png
    • 加上./ 编写, 例如./abc/girl.png
    • 相对当前目录有几个文件夹,就在后面依次补全几个文件夹名称即可, 例如 abc/bbb/ccc/ddd/girl.png或./abc/bbb/ccc/ddd/girl.png
  • 上级:
    • ../代表访问上级目录
    • 假设a文件夹下面有b文件夹, 图片存放在a文件夹中, html文件存放在b文件夹中, 那么路径为../girl.png
    • 因为html文件在b文件夹中, 所以路径是相对于b文件夹的, 所以../代表访问b文件夹的上一级目录, b文件夹的上一级目录是a文件夹, 所以../girl.png就代表在a文件夹查找girl.png

图像

<img src="" alt="" title="" width="" height="">

• src(source):告诉浏览器需要插入的图片路径, 以便于浏览器到该路径下找到需要插入的图片.
• alt(alternate):规定图像的替代文本, 只有在src指定的路径下找不到图片,才会显示alt指定的文本.
• title:悬停文本(介绍这张图片, 只有在鼠标移动到图片上时才会显示).
• height:设置图片显示的高度.
• width:设置图片显示的宽度.
• notice:
  • img标签添加的图片默认不是占一整行空间.
  • 如果想让图片等比拉伸, 只写高度或者宽度即可.