前端的基础

于 2021-08-10 23:16:00 发布
阅读量186 收藏
点赞数
文章标签： python html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_58645785/article/details/119581679
版权
这篇博客详细介绍了HTML的基本结构，包括如何设置编码、标题和图标，以及文本标签、图片和超链接的使用。同时，它还涵盖了CSS的外部、内联和内部样式表的应用，以及选择器的用法，包括标签、ID、类和后代选择器。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前端的基础

index.html

<!DOCTYPE html>
<html>
   <head>
      <!-- 1. 设置编码方式 -->
      <meta charset="utf-8">
      <!-- 2. 设置网页标题 -->
      <title></title>
      <!-- 3. 设置网页图标 -->
      <link rel="icon" type="image/png" href="img/点赞.png" />
        <!-- <link rel="stylesheet" type="text/css" href=""/> -->
        <!-- <style type="text/css">
            
        </style> -->
        <!-- <script type="text/javascript">
            
        </script> -->
   </head>
   <body>
   </body>
</html>

一、head中的标签.html

<!DOCTYPE html>
<html>
   <head>
      <!-- 1. 设置编码方式 -->
      <meta charset="utf-8">
      <!-- 2. 设置网页标题 -->
      <title></title>
      <!-- 3. 设置网页图标 -->
      <link rel="icon" type="image/png" href="img/点赞.png" />
        <!-- <link rel="stylesheet" type="text/css" href=""/> -->
        <!-- <style type="text/css">
            
        </style> -->
        <!-- <script type="text/javascript">
            
        </script> -->
   </head>
   <body>
   </body>
</html>

二、文本标签.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <!-- 1.标题标签：h1~h6 -->
      <h1>===========1. 标题标签=================</h1>
      <h1>一级标题</h1>
      <h2>二级标题</h2>
      <h3>三级标题</h3>
      <h4>四级标题</h4>
      <h5>五级标题</h5>
      <h6>六级标题</h6>
      <!-- 2.段落标签：p -->
      <h1>===========2. 段落标签=================</h1>
      <p></p>
      <!-- 3.普通的文本标签（行内文本标签）：font、span、for -->
      <h1>==========3. 行内文本标签==============</h1>
      <font>发布时间：2021年</font>
      <font>9月1日</font><br>
      <font>创作者</font>
      
      <!-- 4.文本效果相关标签和符号 -->
      加粗：b、strong
         <b></b>
         <strong></strong>
      倾斜：i、em
         <i></i>
         <br><em>魏广是猪</em><br>
      换行：br（在代码中直接按回车换行无效）
         <br>
      空格：&nbsp;   &emsp;
         <br>&emsp;不愧是我！
      
   </body>
</html>

三、图片和超链接.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <!-- 1. 图片标签：img 
       1）src属性：设置图片地址（可以是本地的，也可以是网络的）
       2）title属性：设置图片标题（鼠标停留在图片上才会显示）
      -->
       
      <h1>-----------1. 图片标签-----------------</h1>
      <!-- 显示本地图片 -->
      <img src="img/点赞.png" title="点赞">
      <img title="叮当猫" src="https://img2.baidu.com/it/u=2567
      651289,4291810710&fm=26&fmt=auto&gp=0.jpg" >
      
      <!-- 2. 超链接：a -->
      <!-- 文本超链接 -->
      <a href="https://www.baidu.com/">百度</a>
      <!-- 图片超链接 -->
      <a href="https://www.jd.com/">京东
         <img src="img/01.jpg" >
      </a>
      
      <a href="https://www.tmall.com/">
         <div id="">
            <img src="img/点赞.png" alt="">
            <p>一段文字</p>
         </div>
      </a>
   </body>
</html>

四、列表.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <!-- 1. 无序列表： -->
      <ul><!-- 相当于[] -->
         <li>python</li>
         <li>java</li>
         <li>h5</li>
         <li>UI</li>
      </ul>
      
      <!-- 2. 有序列表：ol-li -->
      <ol>
         <li>
            <img src="./img/人拿毛笔.png" >
         </li>
         <li>
                <img src="img/植物花.png" >
                java
            </li>
            <li>
                <a href="https://www.baidu.com">h5</a>
            </li>
            <li>
                UI
            </li>
      </ol>
      
   </body>
</html>

五、input标签.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <!-- 1. 普通输入框
         1) value属性    --    输入框中的内容
         2）
       -->
      <input type="" name="" id="" value="小明" placeholder="请输入"/>
      <input type="text" name="" id="" value="" />
      <!-- 自带清除按钮 -->
      <input type="" value=""placeholder="搜索电影,电视剧"/>
      <br><br>
      
      <!-- 2. 单选按钮 -->
      <input type="radio" name="sex" id="s1" value="" /><label for="s1">男</label>
      <input type="radio" name="sex" id="s2" value="" /><label for="s2">女</label>
      <br><br>
      
      <!-- 3. 复选按钮 -->
      <input type="checkbox" name="ins" id="i1" value="" /><label for="i1">蓝球</label>
      <input type="checkbox" name="ins" id="i2" value="" /><label for="i2">乒乓球</label>
      <input type="checkbox" name="ins" id="i3" value="" /><label for="i3">羽毛球</label>
      <br><br>
      
      <!-- 4. 普通按钮 -->
      <input type="button" name="" id="" value="确定" />
      <button type="button">取消</button>
      <button type="button"><img src="img/开始-outline.png" ></button>
      
      <!-- 5. 其他功能 -->
      <input type="color" name="" id="" value="" />
      <input type="file" name="" id="" value="" />
      <input type="date" name="" id="" value="" />
      <input type="datetime-local" name="" id="" value="" />
      
   </body>
</html>

六、div标签.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <!-- div标签：
       1. 作为普通双标签提供内容
       2. 作为一个盒子对网页中的内容进行分块、分组
       -->
       <div id="">
         31个省(自治区、直辖市)和新疆生产建设兵团报告新增无症状感染者38例
       </div>
       <div id="">
         其中境外输入18例，本土20例(湖北18例，河南2例);当日转为确诊病例44例(境外输入7例)
       </div>
       
       
   </body>
</html>

七、css语法.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>
      
      <!-- 外部样式表 -->
      <link rel="stylesheet" type="text/css" href="css/index.css"/>
   </head>
   <body>
      <!-- 内联样式表 -->
      <p style="color: burlywood; font-size: 25px;">我是段落1</p>
      
      
      <!-- 内部样式 -->
      <style type="text/css">
         span{
            color: bisque;
            border: 1px solid deeppink;
         }
      </style>
      <span>我是段落1</span>
      
      <a href="https://www.baidu.com/">百度</a>
      
   </body>
</html>

八、选择器

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>
      <style type="text/css">
         /* 1 . 标签选择器（元素选择器） */
         /* p{
            color: lightblue;
         } */
         /* a{
            color: red;
         } */
         
         /* 2. id选择器 */
         /* #p1{
            color: #FFE4C4;
         } */
         
         /* 3. class选择器(类选择器) */
         /* .c1{
            color: aquamarine;
         } */
         
         /* 4. 群组选择器
         p,.c1{
            color: ;
         } */
         
         /* 5. 后代选择器
         div p{
            background-color: deepskyblue;
         } */
         
         /* 6. 子代选择器
         div>p{
            background-color: indianred;
         } */
         
         
         /* .c1.c2{
            color: red;
         }
          */
         
      </style>
   </head>
   <body>
      <h1>我是标题1</h1>
          <div>
              <p class="c1 c2 c3">我是段落1</p>
              <a href="" class="c2">我超链接1</a>
              <p id="p1">我是段落2</p>
            <span>
               <p>我是段落5</p>
            </span>
            <div id="p1">
               <span class="c1">
                  我是span1
               </span>
               <p>我是段落3</p>
               <a href="">我是超链接2</a>
            </div>
            <a class="c1" href="">我是超链接3</a>
          </div>
          <p>我是段落4</p>
   </body>
</html>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值