Untitled

<aside> ⚡ 假定读者已经熟悉基本的HTML和CSS语法了，下面总结一些常用的东西组成手册，并非是教程。如果你需要了解一些基础知识，推荐去 https://chinese.freecodecamp.org/

</aside>

</aside>

HTML基础元素

超链接<a href='[<https://freecodecamp.org>](<https://freecodecamp.org/>)'></a>
- href
  - “#sth”:跳转到本页面内的锚点（id）
- target
  - "_blank”：在新页面打开

<aside> 💡 提示：A tag for an element without a closing tag is known as a self-closing tag 注意：在HTML5中不再需要显示的写”/”来表明一个标签是self-close

</aside>

表单

<form action="<https://freecatphotoapp.com/submit-cat-photo>">
    <fieldset>
      <legend>Is your cat an indoor or outdoor cat?</legend>
      <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
      <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
    </fieldset>
		<fieldset>
      <legend>What's your cat's personality?</legend>
      <input id="loving" type="checkbox" name="personality" value="loving" checked> <label for="loving">Loving</label>
      <input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
      <input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic">Energetic</label>
    </fieldset>
    <input type="text" name="catphotourl" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
</form>

CSS

新时代

https://tailwindcss.com/ 常用的CSS全写好，只在html里调用即可

css的三种引入方式

行内样式表：在元素标签内部的style属性中设定CSS样式

内部样式表：在head里的style标签里写

<style type="text/css">
    body{
        color:red
    }
</style>

外部样式表：使用<link>标签引入CSS文件
```
<link rel="stylesheet" href="default.css"/>
```

基本语法

element{color:red; font-family:"sans serif"},.className,#id {
 property: value;
}

<aside> 🔥 并列关系用, 属于关系用空格所有子元素会继承父元素样式

</aside>

<aside> 💡 发挥你的想象，下面很多数值都可以是负数；数值大小除了px（像素）以外，还有相对单位em （相对于字体大小）和 rem

</aside>

<aside> 🚧 优先级问题：class="class1 class2" 这里的顺序无关紧要，只和定义时候的顺序有关。只要记住新样式会覆盖旧样式就好。 ****!important; >行内样式>ID 选择器>Class 选择器>其他>旧其他

</aside>