My First Post

今天通过青训营课程复习了一下html,感觉知识理解都有了一个大的提升,也掌握了新知识 ‘datalist’以及’dl’‘dt’‘dd’。

在课程中,我们复习了无序列表和有序列表,还有input的placeholder占位符,range、radio、text和date等类型。 cite是斜体标签;strong是加粗字体标签;blockquote是表示引用的标签。

datalist是放在input标签里的,可以给予用户快捷选择input内容的标签 用法如下

<input list="wajj" type="text">
    <datalist id="wajj">
        <option>给我青训营机会</option>
        <option>有许多好文章</option>
    </datalist>

image.png

而dl,dt,dd是起到的作用和制表符差不多,都是空出4个占位符。 此标签效果如下:

image.png select和datalist不同的是select不是input类型的子标签,而是一个供选择的选择的文本框,不支持自己手动输入文本。 最后要记录的是前端语言的几大要求:

  • 功能
  • 美观
  • 无障碍
  • 安全
  • 兼容
  • 性能
  • 用户体验

选择器

伪类选择器1

如图中第5行^=意思是选中href中以"#“开头的a标签

第11行$=意思是选中href中以”.jpg"结尾的a标签 image.png

伪类选择器2

伪类的定义:状态伪类、结构伪类等

状态伪类比如有标签所处不同状态不同css样式如:

link(默认状态下)、visited(访问过后的状态)、hover(鼠标移上去后)、active(鼠标摁下去后)四种状态

结构伪类:如first-child(第一个)、last-child(最后一个)

选择器组合

下面是一些css选择器样式, 除此之外如果想要同时选中多个标签可以用隔开(即选择器组)

image.png

css颜色在这里不过阐述

字体(font-family)

css中斜体是font-style: italic

css中字重(字的粗细)是font-weight 一些字体可以只有(400-normal)(700-bold)两种字重

image.png

line-height是行高(两行之间的距离加一行字体的高度)