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

HTML（内容）

HTML语法

标签和属性不区分大小写，推荐小写
空标签可以不闭合，比如input、meta
属性值推荐双引号包裹
某些属性值可以忽略，比如required、readonly

<h1>--<h6>:一到六级标题（一最大）

列表

<ol>order list有序列表--- <li>list item 列表项
<ul>unordered list 无序列表---<li>
<dl>definition list定义列表---<dt>definition title标题---<dd>definition description描述

链接

<a href=" " target="_blank">---target="_blank"新建一个窗口打开

图片

<img src=" " alt=" " width=" ">---alt当图片加载不出来时显示
<audio src=" " controls>---controls提供播放控件
<video src=" " controls>视频

输入

<input placeholder="请输入用户名">
<input type="range">通常使用滑块或拨号控件
<input type="number" min="1" max="10">元素用于让用户输入一个数字，其包括内置验证以拒绝非数字输入
<input type="date" min="2018-02-10">创建一个让用户输入一个日期的输入区域
<textarea>Hey</textarea>文本区中可容纳无限数量的文本
<input type="checkbox">选择框可选多个---
type="radio" 选一个
<select>---<option>下拉选择框
<input list="">引用数据列表---<datalist>--<option>包含输入字段的预定义选项

文字

<blockquote></blockquote>块级引用 cite属性表示文字来源
<site>短引用，定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题
<q>标签定义短的引用,行内,用的具体内容
<code>标签，引用的代码，可长可短，长代码常用pre再引起来
<strong>强调，表示事情紧急、严重</strong><em>表示在一段话中要强调的词句</em>

css（样式）

外链

<link  href="style.css" rel="stylesheet" type="text/css" />

href超文本引用，href 为 URL地址
rel="stylesheet" 描述了当前页面与href所指定文档的关系,即说明的是href连接的文档是一个新式表,但是只有 rel 属性的 "stylesheet" 值得到了所有浏览器的支持.
type为链接文件的格式

嵌入

<style>
     li{margin:0;list-style:none;}
     p{margin:lem 0；}
</style>

内链

<p style="margin:lem 0">Example Content</p>

选择器

标签选择器 X{}
id选择器 #X{}
类选择器 .X{}

Todo List
<ul>
    <li class="done">Learn HTML</li>
    <li class="done">Learn CSS</li>
    <li>Learn JavaScript</li>
</ul>
<stlye>
.done{
    color:gray;
    tex-decoration:line-through;
    }
 </style>

属性选择器 []{}

  <label>密码：</label>
  <input type="password" value="123456" />
</p>

<style>
  input[type="password"] {
    border-color: red;
    color: red;
  }
</style>

5.伪类选择器

  example.com
</a>

<label>
  用户名：
  <input type="text">
</label>

<style>
a:link /*a未被访问前的样式，字体黑色 */ {
  color: black;
}

a:visited/*a被访问后 字体颜色为灰色*/ {
  color: gray;
}

a:hover/*鼠标移入时 字体变橙*/ {
  color: orange;
}

a:active/*被激活瞬间 字体为红色有下划线*/ {
  color: red;
  text-decoration:underline;
}

:focus /*一个输入字段获得焦点时选择的样式*/ {
  outline: 2px solid orange;
}
</style>

组合

直接组合 AB 满足A同时满足B
后代组合 A B 选中B如果它是A 的子孙
亲子组合 A>B 选中B如果它是A 的子元素
兄弟选择器 A~B 选中B如果它在A后且和A同级
相邻选择器 A+B 选中B如果它紧跟在A后面

    <body>
    <head> 
      
        <style>
            article p/*article中所有的p*/{
                color:green;
            }
            article>p/*article中紧跟着的p*/{
                color:blue;
            }
            h2+p/*相邻h2的p*/{
                color:red;
            }
        </style>
    </head>
    <article>article...
        <h1>(h1)这是第一句</h1>
        <p>(p)这是第二句</p>
        <section>section...
            <h2>(h2)这是第三句</h2>
            <p>(p)这是第四句</p>
            <p>(p)这是第五句</p>
        </section>
    </article>
    </body>
</html>

颜色表示方法

直接英文表示
RGB 红绿蓝每个颜色由八位二进制数组成 rgb(0,0,0)=#000000=white
HSL hue色相(0-360) saturation饱和度(0-100%) lightness(0-100%) hsl(200,30%,50%)

透明度alpha (0-1)

字体

font-family 使用时建议字体列表最后写上通用字体族，英文字体放在中文字体前面
font-size 关键字：small、medium、large

长度：px、em

百分数：%相对于父元素字体大小

font-style

normal 默认值，浏览器显示一个标准的字体样式。

italic 浏览器会显示一个斜体的字体样式。

oblique 浏览器会显示一个倾斜的字体样式。

inherit 规定应该从父元素继承字体样式。

font-weight
属性指定了字体的粗细程度 font-weight: 100 （400-normal）（700-bold）
line-height
设置行间的距离（行高）
text-align 对齐方式 left、right、center、justify（行内左右两端对齐）
spacing
letter-spacing字母间距；word-spacing 单词间距
text-indent
首行缩进大小
text-decoration
none、underline(下划线)、line-throught(中间划一条线)、overline(上划线)
white-space

nowrap    文本不换行，在同一行上继续，直到遇到 br 标签为止。
pre       空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。 
pre-wrap  保留空白符序列，但是正常地进行换行。
pre-line  合并空白符序列，但是保留换行符。

white-space效果展示：CodePen - 青训营/CSS/white-space (cdpn.io)

HTML+CSS基础 | 青训营笔记

HTML（内容）

HTML语法

列表

链接

图片

输入

文字

css（样式）

外链

嵌入

内链

选择器

颜色表示方法

字体