其他分享
首页 > 其他分享> > HTML学习第一天

HTML学习第一天

作者:互联网

查看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 浏览器多个空格自动解析为一个
    不能直接写大于小于以及一些特殊符号
    如果需要使用则需要使用转义字符,也就是实体
    空格 &nbsp;
    大于 &gt;
    小于 &lt;
    直接搜索w3c网站
-->
    <h1>hello</h1>
    <p>你好呀</p>
</body>
</html>

 

实体

meta

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!--meta主要用于设置网络中的一些元数据,元数据不是给用户看的
        charset 指定网页的字符集
        name 指定数据的名称
        content 指定的数据内容


        keywords表示网站的关键字,可以同时指定多个关键字用逗号隔开
        网页重定向http-equiv

-->

    <meta name="keywords" content="HTML,前端,CSS">
    <meta name="descreption" content="这是一个不错的网站">

    <meta http-equiv="refresh" content="3,url=https://www.baidu.com">
    <h1>hello</h1>
    <p>你好呀</p>
</body>
</html>

 

语义标签

行内元素与块元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!--
        HTML负责网站的结构
        应该关注标签的语义,而不是样式

        标题标签:
            h1~h6共六级标题
            重要性递减,h1的重要性,仅次于title标签
            所以一般一个页面只有一个h1,标题一般只会使用到h3

            标题标签都是块元素
            在页面中独占一行的元素叫做块元素
-->

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

    <!-- 
        p标签表示页面中的一个段落,也是块元素
     -->

     <!-- 
         hgroup用来为标题分组,可以将相关的标题放入hgroup
      -->
     <hgroup>
         <h1>回乡偶书</h1>
         <h2>其一</h2>
     </hgroup>
    
     <!-- 
         em标签语音语调加重,em不会独占一行,叫做行内元素
      -->
     <p>今天天气<em>真</em>不错!</p>

     <!-- 
         strong表示强调,重要,也是行内元素
      -->
     <p>你今天必须<strong>完成作业</strong></p>

     <!-- 
         blockquote表示一个长引用,独占一行,是块元素
      -->
     鲁迅说<blockquote>这句话我从来没说过!</blockquote>

     <!-- 
         q表示一个短引用,行内元素
      -->
      孔子说:<q>学而时习之,不亦说乎</q>
     
      <br>
      <!-- br标签表示换行 -->
      今天天气真不错
</body>
</html>

 

语义标签2

p元素中不放块元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 
        块元素
            在网页中一般通过块元素对页面布局
        行内元素
            对文字设置特殊效果
        块元素中放行内元素
        块元素基本什么都能放
        p元素中不能放任何块元素

        浏览器解析网页时会自动对不符合规定元素修正
        比如标签写在了根元素外面
        p中写了块元素等

        修正不一定符合预期以及增加不必要的工作
     -->

     <p>
         <h1>哈哈</h1>
     </p>
</body>
</html>

 

语义化标签3

查看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 
        布局标签(结构化语义标签)
     -->
     <!-- 
         header表示标签的头部
         main表示网页主体部分,一般一个页面只有一个
         footer网页底部
         aside 和主体相关的内容(侧边栏)
         article表示独立的文章
         section表示独立的区块,以上标签都不能表示时用section
         div没有语义,表示区块,可以代替以上所有
         sapn行内元素,没有语义,一般用于网页中选中文字
      -->
      <header>aa</header>
      <main>bb</main>
      <footer>cc</footer>
      <aside>dd</aside>
      <article>ee</article>
      <section>ff</section>
      <div></div>
      <span></span>
</body>
</html>

 

列表

列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 
        列表(list)

        列表三种,列表之间是可以相互嵌套的
            无序列表ul用li表示列表项
            有序列表ol
            定义列表 使用dl来定义内容
            dt对内容解释说明
     -->

     <ul>
         <li>结构</li>
         <li>表现</li>
         <li>行为</li>
     </ul>

     <ol>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ol>

    <dl>
        <dt>结构</dt>
        <dt>结构表示网页结构</dt>
        <dt>结构表示网页结构</dt>
        <dt>结构表示网页结构</dt>
    </dl>

    <ul>
        <li>ww
            <ul>
                <li>
                    11
                    <ul>
                        <li>
                            ee
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>

超链接

超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
    <!-- alt+shift+向下箭头(向下复制)
        超链接-页面跳转
        使用a标签定义超链接,a标签是行内元素
        a标签中可以嵌套除了a自身的任何元素

        href指定跳转目标路径
            值可以使外部网站
            也可以是内部地址(在同一个目录下可以像以下这么写)
    -->

    <a href="https://www.baidu.com">超链接</a>
    <br><br>
    <a href="07.列表.html">超链接</a>
    

</body>
</html>
超链接内部跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
    <!-- 
        当我们需要跳转到服务器内部时
        一般使用相对路径,用./或者../开头
        不写默认为./
        ./表示当前文件所在目录
        ../表示当前文件所在目录的上级
     -->
     <a href="./target.html">超链接</a>
     <a href="../07.liebiao.html">超链接</a>
     <a href="./inner/target.html">超链接</a>
     <a href="../outer/target1.html">超链接</a>
    

</body>
</html>

 

跳转到文章任意位置

查看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
    <!-- 
        target属性,指定超链接打开的位置
            _self默认在当前页面打开
            _blank在新的页面中打开超链接

            lorem自动将中文生成英文版本

            超链接
                回到顶部
     -->

     <!-- 
         在开发中可以将#作为超链接的路径的占位符使用
      -->
      <a href="#">这是一个新的超链接</a>

      <!-- 
          javascript:; 作为href属性,点击后什么也不会发生
       -->
       <a href="javascript:;">不会发生</a>
     <a href="#bottom">去底部</a> 
     <a href="https://www.baidu.com" target="_blank">超链接</a>
     <p>ASP.NET Core是一个免费且开放源代码的Web框架,以及由微软和社区开发的下一代ASP.NET。它是一个模块化框架,既可以Windows上的完整.NET Framework上运行,也可以在跨平台.NET Core上运行。</p>
     <p>ASP.NET Core是一个免费且开放源代码的Web框架,以及由微软和社区开发的下一代ASP.NET。它是一个模块化框架,既可以Windows上的完整.NET Framework上运行,也可以在跨平台.NET Core上运行。</p>
     <p>ASP.NET Core是一个免费且开放源代码的Web框架,以及由微软和社区开发的下一代ASP.NET。它是一个模块化框架,既可以Windows上的完整.NET Framework上运行,也可以在跨平台.NET Core上运行。</p>
     <p>ASP.NET Core是一个免费且开放源代码的Web框架,以及由微软和社区开发的下一代ASP.NET。它是一个模块化框架,既可以Windows上的完整.NET Framework上运行,也可以在跨平台.NET Core上运行。</p>
     <p>ASP.NET Core是一个免费且开放源代码的Web框架,以及由微软和社区开发的下一代ASP.NET。它是一个模块化框架,既可以Windows上的完整.NET Framework上运行,也可以在跨平台.NET Core上运行。</p>
     <p>ASP.NET Core是一个免费且开放源代码的Web框架,以及由微软和社区开发的下一代ASP.NET。它是一个模块化框架,既可以Windows上的完整.NET Framework上运行,也可以在跨平台.NET Core上运行。</p>
     <p>ASP.NET Core是一个免费且开放源代码的Web框架,以及由微软和社区开发的下一代ASP.NET。它是一个模块化框架,既可以Windows上的完整.NET Framework上运行,也可以在跨平台.NET Core上运行。</p>
     <p>ASP.NET Core是一个免费且开放源代码的Web框架,以及由微软和社区开发的下一代ASP.NET。它是一个模块化框架,既可以Windows上的完整.NET Framework上运行,也可以在跨平台.NET Core上运行。</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
    
    <!-- 
         href="#"回到顶部
         去底部等于去最底部那个位置,id是区分大小写的

         也可以跳转到指定位置,只要设置id即可
      -->
      <a href="#" id="bottom">回到顶部</a>
      

</body>
</html>

标签:elit,neque,第一天,consectetur,学习,HTML,ipsum,NET,amet
来源: https://www.cnblogs.com/evelei/p/16116047.html