Day-1 HTML基本标签和CSS常用样式

简介: Day-1 HTML基本标签和CSS常用样式

实训打卡第一天,学的不错,淦-----哈哈哈

HTML基本标签

基本标签:前端页面超链接的使用;字体的颜色和字体的大小、形式;还有就是页面图片、音频和视频的导入。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>这是我的第一个网页</title>
  </head>
  <body bgcolor="lightblue">
    <a href="http://www.baidu.com"><h1>百度</h1></a><br>
    <a href="http://www.jd.com">淘宝</a><br>
    <a href="http://www.csdn.com">CSDN</a><br>
    
    <hr color="red" size="1">
    <hr color="pink" size="2">
    <hr color="yellow" size="3">
    <hr color="blue" size="4">
    <hr color="purple" size="5">
    <hr color="black" size="6">
    <hr color="green" size="7"><br><br>
    <font color="red"size="5"face="楷体">陌上人如玉,公子世无双</font><br>
    <font color="green"size="5"face="楷体">有心持钵丛林去,又负美人一片情</font><br>
    <font color="yellow"size="5"face="楷体">情犹未了缘已尽,笺前莫赋断肠诗</font><br>
    <font color="hotpink"size="5"face="楷体">愿与卿结百年好,不惜金屋备藏娇</font><br>
    <font color="orange"size="5"face="楷体">红颜又惹相思苦,此心独忆是卿卿</font><br>
    <img src="img/1213.jpg" width="200px" height="200px" >
    <img src="img/1215.jpg" width="200px" height="200px">
    <hr>
    <video controls width="400px" height="300px" src="img/12.mp4"></video>
    <hr>
    <audio src="" controls="controls"></audio>
    <ul>
      <li>**流弊</li>
      <li>403流弊</li>
      <li>阳哥流弊</li>
    </ul>
    <ol>
      <li>**流弊</li>
      <li>403流弊</li>
      <li>阳哥流弊</li>
    </ol>
  </body>
</html>

表格标签: 在一个table中设置行,然后在行中再设置列的个数。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>表格标签</title>
  </head>
  <body bgcolor="lightcyan">
    
    <table cellspacing="0" align="center" width="600px" height="400px" border="2px">
      <tr bgcolor="aqua">
        <td>11</td>
        <td>12</td>
        <td>13</td>
      </tr>
      <tr>
        <td>21</td>
        <td bgcolor="orange">22</td>
        <td>23</td>
      </tr>
      <tr bgcolor="chartreuse">
        <td>31</td>
        <td>32</td>
        <td>33</td>
      </tr>
      <tr>
        <td>41</td>
        <td bgcolor="lightcoral">42</td>
        <td>43</td>
      </tr>
    </table>
  </body>
</html>

表单标签: 类似账号注册界面,包含账号、密码、性别、年龄等的设置。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>表单标签</title>
  </head>
  <body>
    <form>
      账号 <input type="text">
      <hr>
      密码   <input type="password">
      <hr>
      性别  
      <input type="radio" name="sex">男
      <input type="radio" name="sex">女
      <hr>
      爱好
      <input type="checkbox">篮球
      <input type="checkbox">赚钱
      <input type="checkbox">Game
      <input type="checkbox">Music
      <hr>
      个人简介
      <br>
      <textarea rows="10" cols="40">
        
      </textarea>
      <hr>
      <input type="button" value="普通按钮">
      <input type="reset" value="重置按钮">
      <input type="submit" value="提交按钮">
    </form>
    <hr>
    <!--
        块儿级元素
        div:默认占一行
    -->
    <p>helloKitty</p>
    <div>
      helloworld......
    </div>
    <span>helloAiY</span>
  </body>
</html>


CSS常用样式

常用样式 : 类似一个函数,先对div声明之后,再插入图片,这个对于HTML图片处理不同的是CSS可以让照片的形状,边界线,以及动画的设置。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>基本样式</title>
    <style>
      body{
        background:lightblue;
      }
      /* 美化div */
      #first{
        width: 250px;
        height: 250px;
        /* url图片路径 */
        background: url(img/1215.jpg);
        /* 使图片100%显示 */
        background-size: 100% 100%;
        /* 居中,左右200px */
        margin: 200px auto; 
        /* 边框 ,5px ,实线 ,边框颜色 */
        border: 5px solid purple;
        /* 圆角 */
        border-radius: 50px;
        /* 
          animation:动画的声明
          one : 动画名称,自定义
          2s :动画时常
          linear: 动画类型之一
          infinite: 无限执行
         */
        animation: one 3s linear infinite;
      }
      /* 动画执行,动画的名称 */
      @keyframes one{
        /* 动画执行起始状态 */
        from{
          /* 旋转角度 */
          transform: rotate(0deg);
        }
        /* 动画执行结束状态 */
        to{
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div id="first">
      
    </div>
  </body>
</html>

文本样式 把对于图片的设置改为对于文本的设置,可以设置字体的颜色,大小等等。这个形如C中的函数,不过CSS是用 link 调用外部的CSS文件,然后外部的CSS文件对文本编辑。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>文本样式</title>
    <!-- 引入外部css文件 -->
    <link rel="stylesheet" href="css/02.css">
  </head>
  <body>
    <div class="box">
      AiY.....6B
      hahahahah
    </div>
  </body>
</html>

body{
    background: lightgoldenrodyellow;
    
}
.box{
  width: 600px;
  height: 200px;
  background: #ADD8E6;
  margin: 200px auto;
  border: 10px solid greenyellow;
  border-radius: 150px;
  /* 文本居中 */
  text-align: center;
  /* 行高,高度和div一致 ,垂直居中 */
  line-height: 200px;
  /* 字体颜色 */
  color: white;
  /* 字体大小 */
  font-size: 30px;
  /* 鼠标变为手状 */
  cursor: pointer;
}

相关文章
|
2天前
|
XML 数据采集 前端开发
Python第二章(HTMl文件,CSS语言与第三方库Beautiful Soup)
Python第二章(HTMl文件,CSS语言与第三方库Beautiful Soup)
|
2天前
|
JavaScript 前端开发 定位技术
html中a标签的多用性
html中a标签的多用性
|
2天前
|
前端开发 JavaScript
HTML的a标签如何做返回顶部的功能
HTML的a标签如何做返回顶部的功能
|
2天前
|
移动开发 定位技术 HTML5
HTML5的新语义化标签
HTML5的新语义化标签
|
2天前
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
text-indent用于首行缩进,line-height与height相同实现垂直居中;vertical-align:middle用于行内元素居中;text-align:center做水平居中;list-style:none清除列表符号;overflow:hidden隐藏溢出;background-repeat:no-repeat阻止平铺;float:left实现横排;相对定位父元素,绝对定位子元素;box-sizing调整盒子模型;用边框或overflow解决盒子塌陷;
24 5
|
6天前
|
移动开发 HTML5 前端开发
【网页搭建基石】:揭秘HTML标签的魔法世界
【网页搭建基石】:揭秘HTML标签的魔法世界
|
6天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
6天前
|
存储 JavaScript 前端开发
HTML标签data-属性的作用
HTML标签data-属性的作用
|
6天前
|
缓存 前端开发 JavaScript
从HTML、CSS以及其他方面介绍一些移动端网页性能优化的策略
【6月更文挑战第14天】本文探讨了移动端网页性能优化的重要性,并提出了HTML、CSS及其他方面的优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件。CSS优化包括简化样式、利用CSS3动画、媒体查询及压缩文件。其他策略涉及图片和字体优化、缓存利用、压缩传输数据、减少HTTP请求及监听网络状态。通过这些方法,可提升网页性能,改善用户体验。
12 1
|
前端开发
HTML样式编辑
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_36367789/article/details/54906644 样式...
630 0