zoukankan      html  css  js  c++  java
  • HTML基础篇之HTML基本元素

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

    这是一个标题标签在页面身体左上角开始显示。标签内的数字代表字体的大小基本最小到h6就可以了不要太过小。

    HTML自动在一个标题标签前后会自己添加空行。这个标题标签也可以加入aling属性调节左、右、中。

    <p>我这是一个段落</p>

    上面这个是段落标签,它可以把你所有写的东西分到一个段落里。然后会到一个新的段落书写。

    <p>这里是一个段落<br />我被分开到另一行了</p>

    <br>它是一个是空行符而且记住它本身就是可以结束的一个标签写的时候以<br />这个格式可以把<br />后面的东西分到下一行。

    各种格式化文字标签;

    <b>定义粗体文本</b>
    <strong>定义加重语气</strong>
    <big>定义大字号</big>
    <em>定义着重文字</em>
    <i>定义斜体字</i>
    <small>定义小字号</small>
    定义下标字H<sub>2</sub>O
    定义上标字X<sup>2</sup>+Y<sup>2</sup>
    <del>定义删除字</del>
    <u>定义下划线</u>

    重要的说一下上标字和下标字吧我先说一下什么类型的字体是下标字,例如:H2、H2OP2O。上标字,例如:X2、Y3Y

    如何书写:

    英文数字<sub>数字英文</sub>数字英文   这是下标的写法

    英文数字<sup>数字英文</sup>数字英文  这是下标的写法

    超链接相关标签

    <a href=”你要链接到的网址”>这是超链接显示出来的字符</a>

    这种打开网址方式是在当前的浏览器窗口打开链接而且要有网络支持

    在”你要链接到的网址”后面有三种属性值target=_blank”打开新的浏览器窗口来打开链接;target=_self”在当前浏览器打开链接; target=_top”在框架中用到,顶级框架里显示的打开连接。

    还可以加title=“”这个属性,会在鼠标移动到超链接显示的字符出现。它不仅能超链接网址还可以图片、视频、音频等。

    锚点

    <a href=”#锚点名字”> 跳转描点的名称</a>
    
    <a name=“#锚点的名字”>设置到跳锚点转到的位置名称</a>

    以上两个锚点的名字要相同,不然不能成功。还有一种最常见的返回顶部的锚点<a name=""id=""></a><a href="#"></a>这两个。

    <img sir=”图片名称.文件格式”/>

    它还有四个属性:

      src  定义图像的url

      alt  定义图像的替代文本(当浏览器无法载入图像时,替代文本属性告诉用户失去的信息)

      width  设置图像的宽度

      height  设置图像的高度

     图像相对地址目录的定义

    情形

    html文件位置

    图片位置

    写法

    同一个目录

    F:/html/01.html

    F:/html/01.jpg

    <img src="01.jpg" />
    <img src="./01.jpg" />

    下一层目录

    F:/html/01.html

    F:/html/images/01.jpg

    <img src="images/01.jpg"/>

    上一层目录

    F:/html/01.html

    F:/01.jpg

    <img src="../01.jpg"/>

    同一层不同目录

    F:/html/01.html

    F:/images/01.jpg

     <img src="../images/01.jpg"/>

  • 相关阅读:
    解决“Caused by: org.gradle.api.plugins.UnknownPluginException: Plugin with id 'org.springframework.boot' not found.”
    linux随机生成密码
    NFS网络共享文件系统
    shell实现带颜色输出的进度条
    【AtCoder】 ARC 101
    【AtCoder】 ARC 102
    【AtCoder】 ARC 103
    20190814校内模拟赛
    「2019-8-13提高模拟赛」树 (tree)
    [PA2014]Fiolki
  • 原文地址:https://www.cnblogs.com/azq6252930/p/5724762.html
Copyright © 2011-2022 走看看