zoukankan      html  css  js  c++  java
  • 2-4-2-6HTML文件标签

    标签学习:
      1.文件标签:构成html最基本的标签
        html:html文档的根标签
        head:头标签,用于指定html文档的一些属性,引入外部资源
        titie:标题标签
        body:体标签
        <!DOCTYPE html>:html5中定义该文档是html文档
      2.文本标签:和文本有关的标签
        注释:<!--注释内容-->
        标题标签:<h1></h1>到<h6></h6>
          h1-h6:字体大小逐次递减
        段落标签:<p></p>
        换行标签:<br/>
        水平线标签:<hr/>
        属性:
          color:颜色
          width:宽度
          size:高度
          align:对齐方式
        字体加粗:<b></b>
        字体斜体:<i></i>
        字体居中:<center><center>
        字体属性:<font></font>
        属性:
          face:字体类型
          width:字体宽大小
          color:字体颜色
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>标签学习</title>
    </head>
    <body>
        <!--    注释内容-->
        <!-- 换行标签 -->
        白日依山尽,黄河入海流。<br>
        欲穷千里目,更上一层楼。<br>
    
        <!--水平线标签-->
        <hr color="red" width="200px" size="5px" align="left">
    
        <!-- 段落标签 -->
        <p>白日依山尽,黄河入海流。</p>
        <p>欲穷千里目,更上一层楼。</p>
    
        <!--标题标签-->
        <h1>白日依山尽,黄河入海流。</h1>
        <h2>欲穷千里目,更上一层楼。</h2>
        <h3>白日依山尽,黄河入海流。</h3>
        <h4>欲穷千里目,更上一层楼。</h4>
        <h5>白日依山尽,黄河入海流。</h5>
        <h6>欲穷千里目,更上一层楼。</h6>
    
    
        白日依山尽,黄河入海流。
        <!--字体加粗-->
        <b>欲穷千里目,更上一层楼。</b>
        <!--字体斜体-->
        <i>欲穷千里目,更上一层楼。</i>
        <!--字体属性标签-->
        <center>欲穷千里目,更上一层楼。</center>
        <!--文本居中-->
        <font color="red" width="20px" face="楷体">欲穷千里目,更上一层楼。</font>
    </body>
    </html>

      3.图片标签
        加载图片:<img/>
        属性:
          src:用来加载图片的路径
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>图片标签</title>
    </head>
    <body>
        <img src="u=2020089733,86807406&fm=26&gp=0.jpg">
    </body>
    </html>

      4.列表标签

        1.无序列表:没有排序的列表<ul></ul>

        属性:

          type:disc(圆形)、square(方形)、circle(空心圆)

        2.有序列表:有排序的列表<ol></ol>

        属性:

          type:1(数字)、Ⅰ(大写罗马数字)、A(大写英文)、i(小写罗马数字)、a(小写英文)

          start:从第几个开始

        3.列表项:列表的各个项<li></li>

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表标签</title>
    </head>
    <body>
    <!--有序列表-->
    早晨起床
    <ol type="I" start="5">
        <!--每一项-->
        <li>睁眼</li>
        <li>看手机</li>
        <li>穿衣服</li>
        <li>洗漱</li>
        <li>上班</li>
    </ol>
    <!--无序列表-->
    早晨起床
    <ul type="disc">
        <!--每一项-->
        <li>睁眼</li>
        <li>看手机</li>
        <li>穿衣服</li>
        <li>洗漱</li>
        <li>上班</li>
    </ul>
    </body>
    </html>

      5.链接标签

        1.超链接标签:<a></a>

        属性:

          href:跳转到的url路径

          target:选择是否打开新的窗口加载超链接路径

            _blank:打开新的窗口加载超链接

            _self:在该窗口加载超链接

  • 相关阅读:
    【Docker 命令】- top命令
    笛卡尔的情书
    thinkphp5.0 中使用第三方无命名空间的类库
    配置thinkphp3.2 404页面
    svn取消文件夹关联的方法(svn取消关联)
    wamp php.ini 配置的坑
    meta标签中的http-equiv属性使用介绍
    META http-equiv="refresh" 实现网页自动跳转
    关于onclick的执行原理
    redis启动出错Creating Server TCP listening socket 127.0.0.1:6379: bind: No error
  • 原文地址:https://www.cnblogs.com/KeepCalmAndNeverSayNever/p/13641455.html
Copyright © 2011-2022 走看看