第一次前端培训

html基本规则

• 使用标签

• 标签成对出现，必须闭合

• 常用标签

  • ``标题

  •   <h1>html的标题</h1>
      <h1>这是标题 1</h1>
      <h2>这是标题 2</h2>
      <h3>这是标题 3</h3>
      <h4>这是标题 4</h4>
      <h5>这是标题 5</h5>
      <h6>这是标题 6</h6>

  • 标题大小从h1~h6

  • <p>段落

  •   <p>这是一条段落</p>

  • <a>超链接

  • <a href="https://www.luogu.com.cn">洛谷传送门</a>
    <a href="https://www.luogu.com.cn" target="blank" rel="noopener">洛谷传送门</a>

  • 加上target="blank"则从新标签页打开

  • <img>图片

  • <img src="https://s1.328888.xyz/2022/10/09/glm5R.png" width="300" height="175" />

  • 可自定义图片的宽度和长度

  • <button>按钮

  • ``表单

  • 输入元素input

    • type包含几种：文本域text，密码password，单选按钮radio，复选框checkbox，提交按钮submit

    • text实例

    • 
      First name: <br>
      Last name: 
      

    • password实例

    • 
      Password: 
      

    • tradioext实例

    • 
      男<br>
      女
      

    • checkbox实例

    • 
      我喜欢自行车<br>
      我喜欢小汽车
      

    • submit实例

    • 
      Username: 
      

CSS基础

几种CSS用法

• 内联样式

  • 直接在标签内部使用style=" "

• 内部样式

  • 在<code class="prettyprint" >中的标签中编写

• 外部样式

  • 在外部使用.css文件，然后在html文件中引入

• 优先级如下：

  内联样式 > 内部样式 >外部样式> 浏览器默认样式

定位方法

• 使用id和class。只需要在标签中定义该标签的id和class就可以定位到他们

• id用#

  • 下面这个实例应用于元素属性<code class="prettyprint" > id="para1":

  • #para1
    {
    text-align:center;
    color:red;
    }

• class用.

  • 下面这个实例应用于元素属性class="center"

  .center {text-align:center;}

  • 下面这个实例仅应用于段落

  
  p.center
  {
      text-align:center;
  }
  
  <h1 class="center">这个标题不受影响</h1>
  <p class="center">这个段落居中对齐。</p> 
  

可以设置的属性

• 可以设置的属性（菜鸟教程传送门）

• 

周 愈涵