其他分享
首页 > 其他分享> > 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