【青训营】前端——HTML与CSS入门 | 青训营笔记

【青训营】前端——HTML与CSS

这是我参与「第四届青训营 」笔记创作活动的的第1天

本人属于前端入门级别的选手，之前只是简单了解过三件套，主流的vue啊什么的所致甚少，所以可能老师上课讲到的大多，哪怕很基础的我都会记录下来~

上课内容：

• 前端简介以及html常用标签
• css简介以及常用标签

HTML

1、什么是HTML

• HTML是 HyperText  Markup  Language的简称，简而言之就是超文本语言。

2、DOM树

• HTML文档被解析后，转化为DOM树，因此对HTML文档的处理可以通过对DOM树的操作实现。

3、各种常用标签

• 标题h1~h6

 <h1>这是h1标签</h1>
 <h2>这是h2标签</h2>
 <h3>这是h3标签</h3>
 <h4>这是h4标签</h4>
 <h5>这是h5标签</h5>
 <h6>这是h6标签</h6>
 <h7>这是h7标签</h7>  

效果：

可以看到最多是到h6，再多的就是html不识别的标签了

• ol li ul dt dd 标签 直接上代码，看得更直观一些：

<h3>ol 的有序列表 </h3>
  <ol>
      <li>有序列表</li>
      <li>有序列表</li>
      <li>有序列表</li>
  </ol>

  <h3>ul 的无序列表 </h3>
  <ul>
      <li>无序列表</li>
      <li>无序列表</li>
      <li>无序列表</li>
  </ul>

  <h3>霸王别姬</h3>
  <dl>
  <dt>导演：</dt>
      <dd>陈凯歌</dd>
  <dt>上映日期：</dt>
      <dd>1993-01-01</dd>
  </dl>

效果：

另外ol ul 的子标签一定是li，而dd 的，我目前理解是当作tab键用时怎么回事儿哈哈哈

• 单选框、复选框与选择框 同样还是看代码：

    <p>  
      <label><input type="checkbox" />🍎</label>
      <label><input type="checkbox" checked />🍏</label>
    </p>

    <p>
      <label><input type="radio" name="sport" />⚽</label>
      <label><input type="radio" name="sport" />🏀</label>
    </p>

    <p>
      <select>
        <option>🥑</option>
        <option>🥩</option>
        <option>🥓</option>
      </select>
    </p>

效果：

type选择是什么类型，checkbox是复选框，后面接checked表示默认选中的状态；radio为单选框，name相同代表属于同一组单选框，在这一组里面只能选择一个；select很明显为选择框，默认为第一个。

CSS入门

CSS简介

• CSS是 Cascading Style Sheets 的缩写，用来定义页面元素样式的，包括但不限于字体和颜色、位置和大小以及动画效果，可以说CSS是页面好看的关键所在。以下是CSS如何工作的：

CSS三种使用方式：

<!-- 外链 -->
<link rel="stylesheet" href="/assets/style.css">
 
<!-- 嵌入 -->
<style>
  li { margin: 0; list-style: none; }
  p { margin: 1em 0; }
</style>
 
<!-- 内联 -->
<p style="margin:1em 0">Example Content</p>

工作中绝大多数是第一种方式

CSS选择器

代码：

    <style>
        #name1{
            color : greenyellow;
        }

        .cls{
            color : lightgrey;
        }

        div{
            color : #4255ff;
        }
    </style>
    
    
    <div id="name1" class="cls"> 这是一个id标签选择器 </div> <br>
    <div class = "cls"> 这是一个类选择器 </div> <br>
    <div> 这是一个div元素选择器</div>

效果：

其实不难看出，这三种选择器，id选择器，优先级最高，其次是类选择器，标签选择器最低，当然这是目前来说

---

初学者，笔记不严谨之处见谅，欢迎斧正