html基础标签 

<!DOCTYPE html>

<!-- html语言是解释型语言,不是编译型 -->

<!-- html页面中由一对标签组成：<html></html>
<html>称为开始标签
</html>称为结束标签 -->
<html>
    <head>
        <!-- meta标签中设置编码方式 -->
        <meta charset="utf-8">
        
        <!-- 网页的标题 -->
        <title>标题</title>
        
        <!-- 控制div -->
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                position: absolute;<-- 让其他的div在下一个下 -->
            }
            #div1{
                background-color: #ABC;
            }
            #div2{
                background-color: #BBC;
                left: 100px;
                top: 1200px;
            }
            #div3{
                background-color: #CBC;
                left: 200px;
                top: 1300px;
            }
        </style>
    </head>
    
    <body>
        
        Hello World!
        
        <!-- <br/>表示换行，br标签是一个单标签 -->
        <!-- 单表签：开始标签和结束标签是同一个，斜杠放在单词后面 -->
        <br/>
        
        你好，世界！
        
        <!-- p表示段落标签 -->
        <p>第一段内容</p>
        <p>第二段内容</p>
        
        <!-- 图片标签 -->
        <!-- 
            src属性表示图片文件的路径
            width和height表示图片的大小
            alt表示图片的提示 
        -->
        <!-- 
            路径的问题
                1.相对路径imgs\Male.gif
                2.绝对路径D:\web\imgs\Male.gif
         -->
        <img src="D:\web\imgs\Male.gif" width="57" height="57" alt="这里是一张图片"/>
        
        <!-- 最小到h6 -->
        <h1>标题一</h1>
        <h2>标题二</h2>
        <h3>标题三</h3>
        <h4>标题四</h4>
        <h5>标题五</h5>
        <h6>标题六</h6>
        <!-- <h7>标题七</h7>
        <h8>标题八</h8> -->
        
        <!-- 列表标签 -->
        <!-- ol有序列表 -->
        <!-- 
            start表示从*开始
            type 显示的类型:1(default) A a I i
         -->
        <ol >
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
        </ol>
        <ol type="A" start="3">
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
        </ol>
        <!-- ul无序列表 -->
        <!--type 显示的类型:disc(default) circle square-->
        <ul>
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
        </ul>
        <ul type="square">
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
        </ul>
        
        <!-- 字体 -->
        <!-- 
            u 下划线
            b 加粗
            i 斜体
         -->
        你还差的远呢
        <br />
        <b>你还差的远呢!</b>
        <br />
        <i>你还差的远呢!</i>
        <br />
        <u>你还差的远呢!</u>
        <br />
        <b><i><u>你还差的远呢!</u></i></b>
        <br />
        
        <!-- 
            上标 sup
            下标 sub
        -->
        水分子化学式：H<sub>2</sub>O
        <br />
        氧气的化学式：O<sup>2</sup>
        <br />
        
        <!-- HTML中的实体 -->
        <!-- 
            小于号 &lt;
            大于号 &gt;
            大于等于号 &ge;
            小于等于号 &le;
            注册商标 &reg;
            版权符号 &copy;
        仅随意例举几个";"不能漏写
         -->
         5&lt;10
         10&gt;5
         5&le;10;
         10&ge;5
         注册商标 &reg;
         版权符号 &copy;
         
         <!-- span -->
         <!-- 不换行的块标签 -->
         <!-- 光写span是没什么意义的,用span围起来做特殊处理 -->
         <span>我</span>是帅哥
         <br />
         
         <!-- 超链接 -->
         <!-- 
            href 链接的地址
            target:
                _self 在本窗口打开
                _blank 在一个新窗口打开
                _parent 在父窗口打开
                _top 在顶层窗口打开
          -->
         <a href="http://www.baidu.com">超链接</a>
        
        <!-- div 层 -->
        <!-- 通过id在<head><style type="text/css">***</type></head>的***里控制 -->
        <div id="div1">div1</div>
        <div id="div2">div2</div>
        <div id="div3">div3</div>
        
    </body>
</html>

 

posted @ 2022-03-08 20:19  行呗  阅读(40)  评论(0)    收藏  举报