HTML入门---慕课网

在这里插入图片描述

HTML 超文本的含义:HTML不仅可以包含文字,也可以包含图片、音乐、视频、超链接等
标签:
在这里插入图片描述

在这里插入图片描述

标签

框架标签

在这里插入图片描述
vscode 代码格式化快捷键 :Shift + Alt + F

<html> 
    
<head>
    <title>
        Hello
    </title>
</head>

<body>
    HELLO,everyone. This is my first page!
</body>

</html>

常用标签

在这里插入图片描述

字体标签

在这里插入图片描述

段落标签

换行

注意:


尽量不要混用
在这里插入图片描述

<html>
<head>
	<title>first.html</title>
</head>
<body>
 <!--这里是一个注释,只有程序员和队友才能看到-->
 <p>
 	慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。<br>在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
 </p>
  <p>
 	慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
 </p>
 	
</body>
</html>

在这里插入图片描述

标题标签

在这里插入图片描述

<html xmlns="http://www.w3.org/1999/html">

<head>
    <title>first.html</title>
    <meta charset="utf-8">
</head>

<body>
    <h1>标签1</h1>
    <h2>标签2</h2>
    <h3>标签3</h3>
    <h6>标签4</h6>

</body>

</html>

在这里插入图片描述

图片标签

在这里插入图片描述

<html xmlns="http://www.w3.org/1999/html">

<head>
    <title>first.html</title>
    <meta charset="utf-8">
</head>

<body>

  log1:  <img src="" alt="图片加载失败!"> <br>
  <!-- windows上一下两种路径都可以 -->
  <!-- 绝对路径 -->
  log2:  <img src="E:\学习\前端\慕课网--从网页搭建入门JavaWeb\常用标签\HTML入门源码\img\html\image\logo.png" alt="图片加载失败!"> <br>
  <!-- 绝对路径 -->
  log3:  <img src="E:/学习/前端/慕课网--从网页搭建入门JavaWeb/常用标签\HTML入门源码/img/html/image/logo.png" alt="图片加载失败!"> <br>
  <!-- 相对路径 -->
  log3:  <img src="../../img/html/image/logo.png" alt="图片加载失败!"> <br>
</body>

</html>

在这里插入图片描述

超链接

在这里插入图片描述

<html>
    <head>
        test1
    </head>

    <body>

        <h1>test1 </h1>
        <h1> 新链接 </h1>

         <p> <a href="E:\学习\前端\慕课网--从网页搭建入门JavaWeb\常用标签\HTML入门源码\超链接\html\welcome.html"> 打开新链接 </a> </p>

          <a href="http://www.imooc.com">慕课网 </a> 

          <a href="../img/html/image/songshulinzhicheng.jpg">打开图片 </a> 

         <a href="http://www.imooc.com"  target="_blank"> 
         <img src="../img/html/image/logo.png"  alt="加载图片失败"/>   

         </a>
    </body>
</html>

在这里插入图片描述

<html>
    <head>
        tes2
    </head>

    <body>
   <h1> 新链接 </h1>
     
    <a href="E:\学习\前端\慕课网--从网页搭建入门JavaWeb\常用标签\HTML入门源码\test\test1.html">
        返回前一个链接
    </a>

    </body>
</html>

在这里插入图片描述

锚点

锚点和超链接的区别是:超链接打开的是某一个新的链接页面,锚点是本链接内容中的一个位置链接,文件的长度足够长,大于浏览器的显示范围,需要出现滚动条。
在这里插入图片描述

注意:
定义锚点

<!-- 锚点使用要先定义 -->
<!-- 定义锚点1 -->
   <a name="锚点1">  
    <p>   锚点1辅导辅导费    </p>
    <p>   fdfdfdfdf</p>
    <p>   fdfdfdfdfdf</p>
   </a>

使用定义好的锚点

<!-- 使用定义好的锚点 -->
 <p> <a href="#锚点1">跳到锚点1</a> </p>

示例

<html>

<head>

锚点test1

</head>

<h1> 锚点test1 </h1>

<body>

  
<!-- 使用定义好的锚点 -->
 <p> <a href="#锚点1">跳到锚点1</a> </p>
 <p> <a href="#锚点2">跳到锚点2</a> </p>
  <p> <a href="#锚点3">跳到锚点3</a>  </p>

  <p>  <a href="锚点test2.html#锚点3"> 打开新链接中的锚点位置 </p>

<!-- 锚点使用要先定义 -->
<!-- 定义锚点1 -->
   <a name="锚点1">  
    <p>   锚点1辅导辅导费    </p>
    <p>   fdfdfdfdf</p>
    <p>   fdfdfdfdfdf</p>
    <p>   fdfdfdf辅导费</p>
    <p>   fdfdfdfdf</p>
    <p>   fdfdfdfdfdf</p>
    <p>   fdfdfdf辅导费</p>
    <p>   fdfdfdfdf</p>
    <p>   fdfdfdfdfdf</p>
    <p>   fdfdfdf辅导费</p>
    <p>   fdfdfdfdf</p>
    <p>   fdfdfdfdfdf</p>
    <p>   fdfdfdf辅导费</p>
    <p>   fdfdfdfdf</p>
    <p>   fdfdfdfdfdf</p>
    <p>   fdfdfdf辅导费</p>
    <p>   fdfdfdfdf</p>
    <p>   fdfdfdfdfdf</p>
    <p>   fdfdfdf辅导费</p>


   </a>
   <!-- 定义锚点2 -->
   <a name="锚点2">  
    <p>   锚点2辅导辅导费    </p>
    <p>   fdfdfdfdf</p>
    <p>   fdfdfdfdfdf</p>
    <p>   fdfdfdf辅导费</p>
    <p>   fdfdfdfdf</p>
    <p>   fdfdfdfdfdf</p>
    <p>   fdfdfdf辅导费</p>
    <p>   fdfdfdfdf</p>
    <p>   fdfdfdfdfdf</p>
    <p>   fdfdfdf辅导费</p>
    <p>   fdfdfdfdf</p>
    <p>   fdfdfdfdfdf</p>
    <p>   fdfdfdf辅导费</p>
    <p>   fdfdfdfdf</p>
    <p>   fdfdfdfdfdf</p>
    <p>   fdfdfdf辅导费</p>
    <p>   fdfdfdfdf</p>
    <p>   fdfdfdfdfdf</p>
    <p>   fdfdfdf辅导费</p>

   </a>
   <!-- 定义锚点3 -->
   <a name="锚点3">  
    <p>   锚点3辅导辅导费    </p>
    <p>   fdfdfdfdf</p>
    <p>   fdfdfdfdfdf</p>
    <p>   fdfdfdf辅导费</p>
    <p>   fdfdfdfdf</p>
    <p>   fdfdfdfdfdf</p>
    <p>   fdfdfdf辅导费</p>
    <p>   fdfdfdfdf</p>
    <p>   fdfdfdfdfdf</p>
    <p>   fdfdfdf辅导费</p>
    <p>   fdfdfdfdf</p>
    <p>   fdfdfdfdfdf</p>
    <p>   fdfdfdf辅导费</p>
    <p>   fdfdfdfdf</p>
    <p>   fdfdfdfdfdf</p>
    <p>   fdfdfdf辅导费</p>
    <p>   fdfdfdfdf</p>
    <p>   fdfdfdfdfdf</p>
    <p>   fdfdfdf辅导费</p>
   </a>


</body>


</html>>

效果
在这里插入图片描述

<html>
<head>
    锚点test2
</head>

<body>
  
  <p> <a href="锚点1.html"> 返回锚点1.html </a> </p>
    
<!-- 锚点使用要先定义 -->
<!-- 定义锚点1 -->
<a name="锚点1">  
    <p>   锚点1辅导辅导费    </p>
    <p>   fdfdfdfdf</p>
    <p>   fdfdfdfdfdf</p>
    <p>   fdfdfdf辅导费</p>
    <p>   fdfdfdfdf</p>
    <p>   fdfdfdfdfdf</p>
    <p>   fdfdfdf辅导费</p>
    <p>   fdfdfdfdf</p>
    <p>   fdfdfdfdfdf</p>
    <p>   fdfdfdf辅导费</p>
    <p>   fdfdfdfdf</p>
    <p>   fdfdfdfdfdf</p>
    <p>   fdfdfdf辅导费</p>
    <p>   fdfdfdfdf</p>
    <p>   fdfdfdfdfdf</p>
    <p>   fdfdfdf辅导费</p>
    <p>   fdfdfdfdf</p>
    <p>   fdfdfdfdfdf</p>
    <p>   fdfdfdf辅导费</p>

   </a>
   <!-- 定义锚点2 -->
   <a name="锚点2">  
    <p>   锚点2辅导辅导费    </p>
    <p>   fdfdfdfdf</p>
    <p>   fdfdfdfdfdf</p>
    <p>   fdfdfdf辅导费</p>
    <p>   fdfdfdfdf</p>
    <p>   fdfdfdfdfdf</p>
    <p>   fdfdfdf辅导费</p>
    <p>   fdfdfdfdf</p>
    <p>   fdfdfdfdfdf</p>
    <p>   fdfdfdf辅导费</p>
    <p>   fdfdfdfdf</p>
    <p>   fdfdfdfdfdf</p>
    <p>   fdfdfdf辅导费</p>
    <p>   fdfdfdfdf</p>
    <p>   fdfdfdfdfdf</p>
    <p>   fdfdfdf辅导费</p>
    <p>   fdfdfdfdf</p>
    <p>   fdfdfdfdfdf</p>
    <p>   fdfdfdf辅导费</p>
   </a>
   <!-- 定义锚点3 -->
   <a name="锚点3">  
    <p>   锚点3辅导辅导费    </p>
    <p>   fdfdfdfdf</p>
    <p>   fdfdfdfdfdf</p>
    <p>   fdfdfdf辅导费</p>
    <p>   fdfdfdfdf</p>
    <p>   fdfdfdfdfdf</p>
    <p>   fdfdfdf辅导费</p>
    <p>   fdfdfdfdf</p>
    <p>   fdfdfdfdfdf</p>
    <p>   fdfdfdf辅导费</p>
    <p>   fdfdfdfdf</p>
    <p>   fdfdfdfdfdf</p>
    <p>   fdfdfdf辅导费</p>
    <p>   fdfdfdfdf</p>
    <p>   fdfdfdfdfdf</p>
    <p>   fdfdfdf辅导费</p>
    <p>   fdfdfdfdf</p>
    <p>   fdfdfdfdfdf</p>
    <p>   fdfdfdf辅导费</p>
   </a>


</body>


</html>

在这里插入图片描述

列表

无序列表

在这里插入图片描述

<html>

<head>
无序列表
</head>

<body>
 
    <ul>
 <li>
     <a href="https://www.baidu.com"> 百度</a>
 </li>

 <li>
     qqqqqqqqqqqqqqq
 </li>

 <li>
    wwwwwwwwwwwwwwwwwwww
</li>
<li>
    eeeeeeeeeeeeeeeeeeee
</li>
    </ul>

</body>

</html>

在这里插入图片描述

有序列表

在这里插入图片描述

<html>

<head>
有序列表
</head>

<body>
 
    <ol>
 <li>
     <a href="https://www.baidu.com"> 百度</a>
 </li>

 <li>
     qqqqqqqqqqqqqqq
 </li>

 <li>
    wwwwwwwwwwwwwwwwwwww
</li>
<li>
    eeeeeeeeeeeeeeeeeeee
</li>
    </ol>

</body>

</html>

在这里插入图片描述

表格

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
效果
在这里插入图片描述

<html>
<head>
    table1
</head>

<body>
    <!-- <table border="1" width="600px"> -->
        <table border="1" width="50%">

        <tr>
            <td>      </td>
            <td> 星期1 </td>
            <td> 星期2 </td>
            <td> 星期3 </td>
            <td> 星期4 </td>
            <td> 星期5 </td>
        </tr>
        <tr>
        <td>第一节 </td>
         <td> 语文1 </td>
         <td> 语文2 </td>
         <td> 语文3 </td>
         <td> 语文4 </td>
         <td> 语文5 </td>
        </tr>
        <tr>
            <td>第二节 </td>
            <td> 数学1</td>
            <td> 数学2</td>
            <td> 数学3</td>
            <td> 数学4</td>
            <td> 数学5</td>
        </tr>
        <tr>
            <td>第三节 </td>
             <td> 外语1 </td>
             <td> 外语1 </td>
             <td> 外语1 </td>
             <td> 外语1 </td>
             <td> 外语1 </td>
            </tr>
            <tr>
                <td>第四节 </td>
                <td> 历史1</td>
                <td> 历史2</td>
                <td> 历史3</td>
                <td> 历史4</td>
                <td> 历史5</td>
            </tr>

    </table>
</body>

</html>

在这里插入图片描述

表单

在这里插入图片描述

HTML 表单包含表单元素。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
 <input> 元素
<input> 元素是最重要的表单元素。
<input> 元素有很多形态,根据不同的 type 属性。
这是本章中使用的类型:

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

<form>标签定义表单
表单本身是不可见的,相当于是一个容器。

在这里插入图片描述

单选框注意点:
单选框 name属性名相同认为是同一组复选款,同一组复选框只有一个可以被选中,不同组的复选可一个每个组可以选中一个

checked=“checked” 属性设置默认被选中的单选框

   <input type="radio" name="" id="" checked="checked" placeholder=""><input type="radio" name="" id="" placeholder="">

在这里插入图片描述


<html>

<head>
   <p>表单1 </p> 
</head>

<body>

    <form action="/test" method="get">
    <lable> 姓名:</lable>
     <!--单行文本框-->
        <input typr="text" name = "vv" id =""> <br>
        
    <labe>密码:</lable>
        <input type = "text" name = "bb"  id =""> <br>
     <lable>再次输入密码</lable>    
        <input type = "password" name=""  id= "">  <br>
    <labe>性别: </labe>
    <!-- radio单选框 -->
        <input type="radio"  name = "f" id ="" value=""   checked="checked" >  <lable></lable>
        <input type="radio" name = "f" id = "" value=""> <lable></lable> <br>
        
         <!-- 复选框多选框 -->
     <lable>兴趣爱好:</lable>
        <input type="checkbox" name="" id="" value="1"> <label>看书</label>
        <input type="checkbox" name="" id="" value="1"> <label>旅游</label>
        <input type="checkbox" name="" id="" value="1"> <label>打球</label>
        <input type="checkbox" name="" id="" value="1"> <label>跑步</label> <br>
        <!-- 下拉列表 -->
      <lable>生日:</lable>
        <select>
            <option value="1991" >1991 </option>
            <option value="1992" >1992 </option>
            <!-- selected="selected" 表示下拉框默认选中 -->
            <option value="1993" selected="selected" >1993 </option>
            <option value="1994" >1994 </option>
            <option value="1995" >1995 </option>
            <option value="1996" >1996 </option>
        </select>   <lable></lable>
        <select>
            <option value="1" >01 </option>
            <option value="2" >02 </option>
            <!-- selected="selected" 表示下拉框默认选中 -->
            <option value="3" selected="selected" >03 </option>
            <option value="4" >04 </option>
            <option value="5" >05 </option>
            <option value="6" >-6 </option>
        </select>   <lable></lable>
        <select>
            <option value="1" >01 </option>
            <option value="2" >02 </option>
            <!-- selected="selected" 表示下拉框默认选中 -->
            <option value="3" selected="selected" >03 </option>
            <option value="4" >04 </option>
            <option value="5" >05 </option>
            <option value="6" >05 </option>
        </select>   <lable></lable> <br>
        <lable>头像:</lable> <img src="E:\学习\前端\慕课网--从网页搭建入门JavaWeb\常用标签\HTML入门源码\表单3\html\image\headLogo\1.gif">
        <select>
            <option value="1" >1 </option>
            <option value="2" >2 </option>
            <!-- selected="selected" 表示下拉框默认选中 -->
            <option value="3" selected="selected" >13 </option>
            <option value="4" >14 </option>
            <option value="5" >15 </option>
            <option value="6" >15 </option>
        </select>   <br>
       <!-- 普通按钮只在前端处理不进入后端 -->
        <input type="button" value="普通按钮"> 
        <!-- 提交按钮将数据传入后端处理 -->
        <input type="submit" value="提交按钮"> <br>
    </form>
<!--多行文本框-->
<textarea rows="10" cols="80" name="" id="">
 请输入 
</textarea>
<!-- 选择本地文件 -->
<input type="file" name="" value="">
<input type="button" value="上传文件"> <br>
<!-- 普通下拉框 -->
<select size="5">
    <option value="1">1 </option>
    <option value="1">2 </option>
    <option value="1">3 </option>
    <option value="1">4 </option>
    <option value="1">5 </option>
    <option value="1">6 </option>
    <option value="1">7 </option>
    <option value="1">8 </option>
    <option value="1">9 </option>
    <option value="1">10 </option>
    <option value="1">11 </option>
    <option value="1">12 </option>
</select>

</body>

</html>

在这里插入图片描述

HTML中转义字符

在这里插入图片描述

<html xmlns="http://www.w3.org/1999/html">
<head>
    <title>first.html</title>
    <meta charset="utf-8">
</head>
<body>
<p>&lt;慕课网&gt;是垂直&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;的互联网"IT"技能免费学习网站。</p>
以独家视频教程、在线编程&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;工具、学习计划、问答社区为核心特色。</p>
在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。</p>
在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT&copy;技术。</p>
</p>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

作业

<html>
<head>
表单作业
</head>

<body>
 
    <h1 align="center"> 注册信息</h1>
<form action="/test1" method="get">
    <table  width="500px" bgcolor="Azure" align="center">
        <tr>
            <td align="right"> <label>用户名:</label> </td>
            <td> <input type="text" name="" id="" placeholder="请输入用户名"> </td>
        </tr>
        <tr>
            <td  align ="right"> <label>密码:</label> </td>
            <td> <input type="password" name="" id="" placeholder="请输入密码"> </td>
        </tr>
        <tr>
            <td  align ="right"> <label>确认密码:</label> </td>
            <td> <input type="password" name="" id="" placeholder="请再次输入密码"> </td>
        </tr>
        <tr>
            <td  align ="right"> <label>性别:</label> </td>
            <td>
                <input type="radio" name="" id="" checked="checked"><input type="radio" name="" id="" ></td>
        </tr>

        <tr>
            <td  align ="right"> <label>兴趣爱好:</label> </td>
            <td>
                <input type="checkbox" name="" id="" checked="checked"> 看书
                <input type="checkbox" name="" id=""> 打球
                <input type="checkbox" name="" id=""> 跑步

            </td>
        </tr>

        <tr>
            <td align="right">生日:</td>
            <td>
                <select>
                    <option value="1991"  >1991</option>
                    <option value="1992" selected="select">1992</option>
                    <option value="1993"  >1993</option>
                </select>
                <select>
                    <option value="1"  >01</option>
                    <option value="2" selected="select">02</option>
                    <option value="3"  >03</option>
                </select>
                <select>
                    <option value="1"  >01</option>
                    <option value="2" selected="select">02</option>
                    <option value="3"  >03</option>
                </select>
            </td>
        </tr>

        <tr>
            <td align="right">头像:</td>
            <td>
                <img src="E:\学习\前端\慕课网--从网页搭建入门JavaWeb\常用标签\HTML入门源码\表单3\html\image\headLogo\1.gif"> 
                <select>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4" selected="select">4</option>
                </select>
            </td>
        </tr>

        <tr>
            <td  align ="right"> <label >上传照片:</label> </td>
            <td> <input type="file" name="" id=""> </td>
        </tr>

        <tr>
            <td align="center" colspan="2">
                <input type="submit" value="注册"> 
            </td>
        </tr>


    </table>
</form>
</body>
</html>

在这里插入图片描述

作为一名AI智能助手,我无法亲身经历学习Oracle的过程。但我可以为您提供一些学习Oracle的建议和资源。 1. 学习Oracle前,需要掌握数据库的基础知识,如SQL语言、关系型数据模型等。 2. 了解Oracle的体系结构和技术架构,包括Oracle数据库实例、数据库对象、数据字典等。 3. 学习Oracle数据库的安装、配置和管理。 4. 学习Oracle SQL语言和PL/SQL编程语言,并掌握它们的基本语法和用法。 5. 学习Oracle数据库的性能优化和调优方法,包括索引、查询优化、存储优化等。 6. 学习Oracle数据库的备份和恢复,以及数据安全和故障恢复等方面的知识。 7. 掌握Oracle数据库的高级特性和应用,如数据仓库、分布式数据库、集群等。 以下是一些学习Oracle的资源: 1. Oracle官方文档:https://docs.oracle.com/en/database/oracle/oracle-database/index.html 2. Oracle官方培训课程:https://education.oracle.com/oracle-database-training/c/38 3. Oracle官方认证考试:https://education.oracle.com/oracle-database-certification/c/37 4. Oracle社区和论坛:https://community.oracle.com/community/developer 5. 优达学城的Oracle数据库课程:https://www.udacity.com/course/oracle-database-administration-for-developers--ud190 6. 慕课网的Oracle数据库课程:https://www.imooc.com/learn/321 7. 网易云课堂的Oracle数据库课程:https://study.163.com/course/introduction.htm?courseId=1209058803 希望这些资源能够帮助您学习Oracle,如有需要,可以随时向我提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值