学习笔记：学习前端第一周

1、语法

标签声明
HTML标签名、类名、标签属性和大部分属性值统一用小写。
对称型标签结束标记中必须包含结束符号"/"。例：。
注释
HTML 统一使用注释内容 <!-- -->方法在文档中进行注释，并且规定注释内容与注释符号两端间隔一个空格。
注释位于要注释代码的上面，单独占一行

2、标签

h标签 定义标题，有h1~h6这几种类型

	<h1></h1>
    <h2></h2>
    <h3></h3>
    <h4></h4>
    <h5></h5>
    <h6></h6>

a标签 超链接，能够在页面中进行跳转

<a href=""></a>

p标签 定义一个段落，块级元素，不能保留换行符和空格

<p></p>

pre标签 用来修饰文本，可以保留换行符和空格，块级标签

<pre></pre>

div标签 定义一个块级元素，div标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

<div></div>

span 行内标签，常用来组合文档中的行内元素

<span></span>

br标签 换行，用来修饰文本，不能保留换行符和空格，块级标签，但没有语义

<br>

strong标签 用来修饰文本，加粗，行内标签

<strong></strong>

h5新增语义标签
<header> 它可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容。
<main>用于呈现网页的主体内容，且每个页面只能有一个。这意味着它只应包含与页面中心主题相关的信息，而不应包含如导航连接、网页横幅等可以在多个页面中重复出现的内容。
<article>是一个分段标签，用于呈现独立及完整的内容。这个标签适用于博客入口、论坛帖子或者新闻文章。
<nav>用于呈现页面中的主导航链接。它可以使屏幕阅读器快速识别页面中的导航信息。对于页面底部辅助性质的站点链接，不需要使用 nav，用 footer 会更好。
<footer>与header和nav类似，footer也具有语义化特性，可以使辅助设备快速定位到它。它位于页面底部，用于呈现版权信息或者相关文档链接。
<section>section也是一个 HTML5 新标签，与article标签的语义含义略有不同。article用于独立的、完整的内容，而section用于对与主题相关的内容进行分组。它们可以根据需要嵌套着使用。举个例子：如果一本书是一个article的话，那么每个章节就是section。当内容组之间没有联系时，可以使用div。

3、字符实体

< 小于符的实体字符,在页面中替换成<。
>大于于符的实体字符,在页面中替换成>。
& 连接符的实体字符,在页面中替换成&。
  空格符的实体字符,在页面中替换成 空格。

4、列表

有ul无序列表和ol有序列表，他们下面自带li,也可以互相进行嵌套

/*无序列表*/
<ul>
        <li></li>
</ul>
/*有序列表*/
<ol>
      <li></li>
</ol>
/*两种列表进行嵌套*/
<ul>
      <li>
           <ol>
                   <li></li>
            </ol>
        </li>
</ul>

5、表格

由头部表格,表格主体和表格脚部组成
其中可以嵌套tr或者th,tr下可以嵌套td
th,td常用属性
colspan 向右合并单元格扩展栏位
rowspan 向下合并单元格扩展栏位

<table>
     <thead>
           <th>
           		<td></td>
           </th>
      </thead>
      <tbody>
            <tr>
                <td></td>
            </tr>
      </tbody>
      <tfoot>
            <tr>
                 <td></td>
             </tr>
      </tfoot>
 </table>

6、图像

<img src="" alt="" width="" height="">

src 表示这个图片的来源，可以放本地地址，也可以放外部地址
alt 表示当图片加载不出来的时候解释该图片是什么图片，为页面增加可读性
该标签支持宽高

7、超链接

<a href=""></a>

href表示链接地址，还能对图片进行链接跳转

 <a href=""><img src="" alt=""></a>

当页面内容较多的时候该标签可以作为锚点来使用，在本页面进行寻找
例如：

<div id="strat"><a href="#q">跳转到q</a>
            <a href="#w">跳转到w</a>
            <a href="#e">跳转到e</a></div>
        <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
        <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
        <br> <br> <br> <br> <br> <br> <br><div id="q">我是q</div> <a href="#strat">回到开始</a><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
        <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
        <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
        <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
        <br> <br> <br> <br> <br> <br> <br> <br> <br> <div id="w">我是w</div><a href="#strat">回到开始</a><br> <br> <br> <br> <br> <br> <br> <br> <br>
        <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
        <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
        <br> <br> <br> <br> <br><div id="e">我是e</div><a href="#strat">回到开始</a> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> -->

8、表单

一般和input一起使用

<form action="" method=""></form>

method: 属性定义了发送数据的HTTP方法(它可以是“get”或“post”).
action: 属性定义了在提交表单时,应该把所收集的数据送给谁(/那个模块)(URL)去处理。

9、元素

<input type="text" name="" id="">

input是一个单一型元素用于为基于Web的表单创建交互式控件，以便接受来自用户的数据。
type：input的工作方式相当程度上取决于type属性的值，不同的 type 值会赋予input元素不同的功能。如果未指定此属性，则采用的默认类型为 text。

type的属性

表单输入框类型
text (默认)：单行的文本输入框，输入中的换行会被自动去除。

<input type="text">

password：单行的密码输入框，输入的文本使用密文显示
可以和text进行交互式使用，进行明文与密文之间的切换，涉及js

 <input type="password">

number：只能输入数字的输入框。

<input type="number">

表单选择框类型

checkbox：复选框，可设为选中或未选中。
disabled表示不可选中
checked表示选中

<input type="checkbox">
<input type="checkbox" name="栏位 名 称 " value="内定值" checked="checked" disabled="disabled ">

radio：单选框，可设置选中与未选中，但需将name设置成一样的
disabled表示不可选中
checked表示选中
这个类型如果多个一起使用产生排他性的话需要将name设置为同一个值，这样才能产生排他性

<input type="radio" name="" id="">
<input type="radio" name="栏位 名 称 " value="内定值" checked="checked" disabled="disabled ">

表单按钮类型
button：没有默认行为的按钮，上面显示 value 属性的值，默认为空。

<input type="button" value="">

submit：用于提交表单的按钮。

<input type="submit" value="">

image：带图像的 submit 按钮。显示的图像由 src 属性规定。如果 src 缺失，alt 属性就会显示。

<input type="image" src="" alt="">

reset：此按钮将表单的所有内容重置为默认值。

<input type="reset" value="">

表单文件类型
file：让用户选择文件的控件。使用accept属性规定控件能选择的文件类型。

<input type="file" name="" id="">

10、label控件

元素（标签）表示用户界面中某个元素的说明。
常和input中单选框和多选框一起使用，进行单选或多选的伪造
例:
当隐藏复选框的时候为label下的div添加状态就能实现点击产生颜色变化

<div style="width: 50px; height: 50px; background-color: blue; display: inline-block;">
	<label for="qwe"><div></div></label>
	<input type="checkbox" name="" id="qwe">
</div>

11、select窗体选项栏

HTML 元素表示一个提供选项菜单的控件
能与 元素、 元素一起使用产生分组效果
例如：

<select>
     <optgroup label="分组名称">
         <option value=""></option>
         <option value=""></option>
         <option value=""></option>
     </optgroup>
     <optgroup label="分组名称">
         <option value=""></option>
         <option value=""></option>
         <option value=""></option>
     </optgroup>
 </select>

12、css介绍

常用样式
颜色 color
背景 background
字体 font
位置 position
显示 display
边框 border
内边距 padding
外边距 margin
行高 line-height
装饰 text-decoration
过渡 transtion
变化 transform
动画 animation

13、css引入方式

css的引入方式分为三种方式：内联、内部和外部
内联是直接写在标签上的style
内部方式是直接写在header里面或者写在header与body之间的style
外部则是从外部引用的css文件

14、选择器

单个选择器类型
id选择器 选中有这个id名的元素
类选择器 选中有这个类名的元素
属性选择器 选中包含这个属性的元素
标签选择器 选中是这个标签名的元素
通配选择器 在当前选择范围内的全部标签都会选到
多个选择器类型
组合选择器 使用，连接
后代选择器 使用空格连接
子代选择器 使用>进行连接
相邻选择器 使用~进行连接
兄弟选择器 使用+进行连接

伪类：伪类可以单独使用

:link /*未访问链接*/
:visited /*已访问链接*/
:hover /*鼠标放在链接上产生效果*/
:active  /*鼠标点击链接上产生效果*/

15、伪元素

伪元素不会在代码中显示，但会产生效果

/* 在代码前面加*/
::before{
	content:'';
}
/* 在代码后面加*/
::after{
	content:'';
}

16、背景

background背景一般情况跟颜色，进行背景颜色的修改

background-color:red ;

也能跟图片，加上一个背景图片

background-image
background-repeat/* 设置图片是否重复*/
background-size /* 控制图片大小*/
background-position /* 控制图片位置*/
background-attachment/* 控制背景是否滚动*/

17、浮动

浮动一般情况下都是左浮动和右浮动

float:left/* 左浮动*/
float:right/* 右浮动*/

在浮动情况下我们需要将父元素清除浮动，使用伪元素将父元素浮动清除，

.clear::after{
    content: '';
    display: block;
    clear: both;
}

18、文本属性

基本上属性都是基础
color 文字颜色
font-size 文字大小
font-weight 文字线条宽度
text-align 文字的位置
text-indent 控制首行缩进
word-spacing 控制单词之间的空白
text-transform: 控制单词变化
text-decoration 文本装饰 基本上是用来清除a标签的下划线
white-space 属性设置如何处理元素内的空白
text-overflow: 确定如何向用户发出未显示的溢出内容
vertical-align 控制对其方式
line-height:控制行高 也就是 基线和基线之间的距离

19、定位

position属性用于指定一个元素在文档中的定位方式
static 静态,默认的,top, right, bottom, left 和 z-index 属性无效。
relative 相对定位,占据原来文档流里面位置
absolute: 绝对定位,脱离文档流
fixed 固定定位，不占据文档流

20、媒体查询

使用@media来告诉css解析器这个是媒体查询而不是选择器
min 要求屏幕最小是XXX的时候实现
max 要求屏幕最大是XXX的时候实现
Extra small <576px
Small ≥576px
Medium ≥768px
Large ≥992px
Extra large ≥1200px

21、弹性定位

弹性flex
会影响子类的diaplay
浮动属性在这里是没有效果
分为块级和行内
块级 flex
行内 inline-flex
justify-content 控制主轴如何摆放
flex-start （默认）：项目基于主轴线在方向的开始处对齐。
flex-end：项目基于主轴线在方向的末端处对齐。
center：项目沿线居中
space-between：项目基于主轴线在方向的两端对齐。
space-around：项目基于主轴线在方向的两端留白对齐并且每个项目之间保留相等的间隔。
space-evenly：分配项目，以使任意两个项目之间的间距（以及到边缘的间距）相等。
flex-direction: 用于改变主轴
row | row-reverse | column | column-reverse;
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上端。
column-reverse：主轴为垂直方向，起点在下端
flex-wrap 控制是否换行
注意1 如果产生换行的话 会产生多根主轴
nowrap 遇到位置不够的时候会缩减子元素的大小
wrap 正常换行 往下面走
wrap-reverse 往上面走
align-item
stretch（默认值）：若flex项目未设置元素交叉轴对应的高度或宽度，项目将拉伸以占满整个容器交叉轴方向指定的宽度或高度。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的居中对齐。
baseline: 项目对齐，如文字的基线对齐。
align-content 在多根主轴的情况下 控制主轴的放置方法
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：交叉轴居中对齐
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
space-evenly：项目均匀分布，周围有相等的空间
stretch：线条伸展以占据剩余空间

以上就是我在学习中做了大致的笔记