目录

html常用的文本标签以及属性

html常用的文本标签以及属性

HTML标签

HTML通过一系列的标签(也成为元素),来定义文本,图像,链接等等,HTML标签是由尖括号包围的关键字。

标签通常成对出现,包括 开始标签和结束标签( 也成为双标签),内容位于两个标签之间,例如:

<p>这是一个段落</p>
<hl>这是一个标题</hl>
<a href="#">这是一个超链接</a>

除了双标签,也存在单标签,例如:

<input type="text">
<br>
<hr>

区别是: 单标签 用于 没有内容 的元素, 双标签 用于 有内容 的元素。

HTML的文件结构

<!--这里放置文档的元信息-->
<!DOCTYPE html>
<html>
    <head>
        <!--这里放置文档的元信息-->
        <title>文档标题</title>
        <meta charset="UTF-8">    //文件编码的形式
        <!--链接外部样式或脚本文件等-->
        <link rel="stylesheet" type="text/css" href="styles.css>   //外部样式的标签
        <script src="script.js"></script>
    </head>
    <body>
        <!--这里放置页面内容--->
        <h1>这是一个标题</h1>
        <p>这是一个段落</p>
        <a href="https://www.example.com">这是一个链接</a>
        <!--其他内容-->
    </body>
</html>

创建一个文件夹,打开,在文件夹上进入cmd文件,通过code打开当前目录。选择文件,打开文件夹,进行创建html。

直接输入一个 之后,选择一个!按住 Tap键 ,就会出出现 基础格式

标签的形式:有6个标签h1……h6分别表示一级标签到六级标签。输入一个h1,自动有h1标签,按住Tap键tap就有一个标签。

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

·还有其他的形式:

<p>
    <b>字体加粗</b>
    <i>斜体</i>
    <u>下划线</u>
    <s>删除线</s>
</p>

还有其他形式的:无序列表:

       和有序列表:

      <ul>
          <li>无序列表元素1</li>
          <li>无序列表元素2</li>
          <li>无序列表元素3</li>
      </ul>
      <ol>
          <li>有序列表元素</li>
          <li>有序列表元素</li>
          <li>有序列表元素</li>
      </ol>

      标题标签:

      <table>
          <tr>  //行标签
              <th>列标题 1</th>
              <th>列标题 2</th>
              <th>列标题 3</th>
          </tr>
          <tr>
              <td>元素 1</td>
              <td>元素 2</td>
              <td>元素 3</td>
          </tr>
          <tr>
              <td>元素 21</td>
              <td>元素 22</td>
              <td>元素 23</td>
          </tr>
      </table>

      可以给表格增加一些边框:

         1,2,3,4都可以。

      HTML属性:

      属性在html中非常重要的作用,他们用于 定义元素的行为和外观 ,以及与其他元素的关系。

      基本语法:

      <开始标签 属性名=“属性值”>

      每个HTML元素可以具有 不同的属性

      <p id="describe" class="section">这是一个段落标签</p>
      <a href="https://www.baidu.com">这是一个超链接</a>

      s属性名称不区分大小写,属性值对大小写敏感

      <img src="example.jpg" alt="">
      <img SRC="example.jpg" alt="">
      <img src="EXAMPLE.JPG" alt="">
      <!--前两者相同,第三个与前两个不太一样-->

      class 属性: 为HTML元素定义一个或多个类名(类名从样式文件引入)

      id 属性: 定义元素唯一的id

      style 属性: 规定元素的行内样式

      例如:

      <h1 id="title"></h1>
      <div class="nav-bar"></div>
      <h2 class="nav-bar"></h2>

      a标签有一个属性, href属性 ,定义了链接的目标,可以是其他网页,VRL文件路径,电子邮件

      <body>   
          <a href="https://docs.geeksman.com">这是一个超链接</a>
          <a href="https://docs.geeksman.com" target="_blank">这是第二个超链接,</a>
      
      </body>

      可以看到a标签中的是一行的,可以对其进行换行

      <a>   </a>
          <br>   //换行
      <a>   </a>

      _self :是以默认值,表示链接在当前窗口

      -blank: 表示链接在新窗口或者新的标签页打开

      -parent: 表示链接在窗口或父框中打开

      -top :表示来凝结在顶层窗口或顶层框架中打开

      另外还有:

      img图片标签,

      <img src="logo.png" alt="">

      可以在网上找照片,把链接复制下来,而且还可以修改图片的大小

      <img src="https://img.baidu.com....." alt="" width="200" height="100">