web入学零基础笔记本

---

一、字体的属性：

1. font-family  （字体系列）
2. font-size    （字体的大小）
3. font-style   （字体是否斜体
4. font-variant  以 小型 大写字母
5. font-weight   （粗细字体

/-- normal / bold / bolder--/ （正常-加大-加加大） 1. ：first-child：：first-letter /！--首字下沉--！//

二、文本的属性：

1. color  （颜色
1. direction  （文本方向或书写方向
2.  letter-spacing  （字符的间距
3. line-height   （文本的行高
4. text-align   （文本的对齐属性
5. text-decoration  （文本添加装饰效果
/*--none、underline、overline、line-through、blink、inherit
6.  text-indent  （首行缩进方式
7. text-shadow  （文本添加阴影效果
8.  text-transform  （切换 文本中的 大小写
9.  white-space   （处理元素的空白
/！--normal/pre/nowrap/inherit--！/

三、ID选择器：

  *#myself（所有id的选择）#myself  id=“myself”

四、类选择器：

  .myself   class="myself"

五、复合选择器：

  1）  交集： p.myself{}
<p class="myself">我是</p> (同时使用多种选择器)
   2） 并集：p，h1{}

六、关系选择器：

后代选择器：  p span
 子元素   ：  p>span
相邻兄弟  ： p+span
相邻兄弟组 ： p~span

七、伪类选择器：

：first-child  (父元素的第一个“子”元素
：last-child   （父元素的最后一个“子"元素
：nth-child（）    （父元素的第n个”子“元素 
：nth-last-child   （父元素的倒数第n个”子“元素
：only-child    （父元素内只包含一个”子“元素

：nth-of-type(n)  (父元素内指定类型的第n个”子“元素
：nth-last-of-type（n）  （父元素内指定类型的倒数第n个”子“元素
：first-of-type    （父元素内指定类型的第一个”子“元素
：last-of-type   （父元素内指定类型的倒数第一个”子“元素
：only-of-type    （选择父元素只包含一个同类型”子“元素

：root   （元素所在文档的根元素
：empty   （选择没有”子"元素的元素

八、边宽效果：

样式：
border-top-style ： （上边框的属性
 -------right----    （右边框的属性
--------bottom--    （下边框的属性
--------left---     （左边框的属性
--------style---    （4条边的属性
--------width---     （4条边的粗细
/*--none/hidden--*/

九、宽度：

border-top-width   （上边框的宽度属性
/*--thin/medium/thick/长度/inherit--*/
    （细/中/粗）

十、颜色：

border-color         (四条边的颜色设置
border-top-color    （上边框的颜色属性

十一、边宽样式解读：

 none--无边框，默认值
 hidden--隐藏，同上
 dotted--点线 边框效果
 *dashed--虚线 边框
 *solid--实线 边框
 double--双线 边框
 groove--3D凹槽 边框
 ridge--3d凸
 inset--3d凹入
 outset--3d凸起
inherit--从父元素继承

十二、内边距：

padding-top        （定元素的上内边距
  --------right      （-------右内边距
---------bottom     （--------下内边距
---------left        （--------左内边距

十三、外边框：

 margin-top               （定元素的上外边框
  --------right       （-----右外边框
---------bottom      （-----下外边框
---------left        （-----左外边框

十四、列表项目样式为：

    list-style:none     （删除项目符号
    ----------：disc    （默认值 ，实心圆
    ----------：circle  （空心
    ----------：decimal  （阿拉伯数字
    ----------：square   （实心方块
    ----------：lower-alpha  （小写英文字母
    ----------：upper-alpha   （大写英文字母
    ----------：lower-roma    (小写罗马数字
    ----------：upper-roma   （大写罗马数字

十五、超链接标记:

  <a href="www.baidu.com">我的网页</a>

十六、伪类选择器：

 a:link      （超链接的普通样式
 a:visited    (被单击过的超链接样式
 a：hover     （鼠标指针经过超链接时的样式
 a：active    （鼠标未松开时的样式

十七、标签：

 div   （是 一块的  ”垂直“
 span  （是 行   “平行
 /*--div里可以用span
---span里不可以用div--*/

十八、样式：

  display：inline   （按照行内元素  显示
-------：block   （按照块级元素 显示
-------：none   （不显示

十九、背景颜色：

  background-color：     （背景颜色

二十、颜色的透明度：

opacity

二十一、设置背景图：

background-image：ulr（“.jpg”）   （ 设置背景图片

---

二十二、图片铺平：

background-repeat： （沿水平和竖直方向平铺，等于默认值
-----------------：repeat-x  （水平方向铺平
-----------------：repeat-y  （竖直方向铺平

二十三、设置背景图片的位置：

 background-position（-x、-y）：right botton  （右下角位置

位置属性值：
top left           （左上位置
top center          （靠上居中位置
top right           （右上位置

left center         （靠左居中位置
center center       （正中位置
right center         （靠右居中位置
bottom left          (左下位置
bottom center        靠下居中位置 
bottom right        （右下位置

二十四、圆角：

border-radius：   px；
4个值：【左上角，右上角，右下角，左下角】
3个值：【左上，右上左下，右下】
2个值：【左上右下，右上左下】
1个值：【4个角都相同】

二十五、阴影：

box-shadow:10px 10px 12px #888;
/*向右10px 向左10px 柔化12px 颜色#888*/
width：500px；
height：100px；

二十六、渐变：

gradients

线性渐变：linear gradients 径向渐变：radial gradients

二十七、相对定位：

position:relative
--------：absolute（绝对定位是与盒子之间的距离）

[相反的位置去调试] position：fixed 【固定标题】 position:sticky（记得设置头部偏移 top：0px） [滑动时，顶部固定]

二十八、表格

<table border=“2” cellpadding=“2”  cellspacing=“2”>
<caption>表格的标题</caption>
<tr>（第一行）    就是表格标题
<th>表头</th>
<td>第一列</td>
</tr>

二十九、行组：

<thead> 【页眉】
<tbody> 【主体】
<tfoot> 【页脚】

三十、表格属性：

cellspacing  （内容的外边宽与外边框的距离）
cellpadding  （内容与边宽的距离）

*单元格与单元格之间的距离：（不能同时用 否则无效）

border-collapse：  【边宽的塌陷】
-------separate：

三十一、表格边宽的样式：

border-style：hidden  （优先级最高  其他无效）
------------：none  （优先级最低的）

三十二、跨列合并：

colspan  属性左右合并单元格，

跨行合并：

rowspan  属性上下合并单元格，

三十三、在设置中:

 .record

三十四、表单输入内容：

  <input/>   [实现浏览者的输入]

1. type属性值：
   1. button （定义可以点击按钮）
   2. text （定义单行的输入字段，供用户输入文本）
   3. password （定义密码字段，该字段中的字符被掩码）
   4. checkbox （定义多选框） *radio （定义单选框）
   5. file （定义输入字段和“ ”浏览“ 按钮额哇，供文件上 传）
   6. hidden （定义隐藏的输入字段）
   7. image （定义图像形式的提交按钮）
   8. reset （定义重置按钮，清除表单中的所有数据
   9. submit （定义提交按钮，把表单数据发送到服务器

三十五、按钮标签

<button><button/>  [强大的按钮标签]
button元素内部可以放置内容、如文本或图像、标签之间
所有内容都是按钮的内容

*属性值：id name disabled value type（可取button submit reset）

三十六、多行文本框

<textarea><textarea/>  [多行文本框  满足用户多行输入的要求]
 name定义多行文本框的名称  ；
 disabled 定义禁用文本区  也不可单击的
 readonly 定义文本区为只读  无法对内容修改

三十七、创建一个菜单，下拉列表

<select><select/>  [创建一个菜单下拉列表框]
 *<option></option> 标签用来指定表框中的一个选项    
放在<select><select/>标签的中间
      *option属性：
         1. value  （用来给<option>指定那一个选项赋值，这个值是
                   要传送到服务器上的。服务器是通过调用<select>
       区域的名字的value属性来获得得该区域选中的数据项）
          2. selected   （用来指定默认的选项）

三十八、为option元素定义的标注并提供提示文字

<label><label/>  [为option元素定义的标注，提供提示的文字，
                                不会向用户呈现任何特殊效果]
 for属性与某个表单元素进行绑定  使用户选择该标签时
浏览器自动将焦点转到和标签相关的表单控件上

三十九、将表单内的相关元素分组

<fieldset><fieldset/>  [将表单内的相关元素分组]
  （当一组表单元素放到<fieldset>标签内时，浏览器会以特殊
  方式来显示它们；  <legend>标签为<fieldset>元素定义标题）

*表单提交方式

浏览器提交表单数据时  应该向服务器端哪个发送表单数据，
采用哪种方式发送表单，表单数据如何编码等，都是通过：
<form> 标签一些属性来设置的

form的属性值：
    1）action （指定交给哪个程序来处理数据
    2）method-post  （表单数据不出现在URL中，是安全的
       ----- -get  （ 将表单数据附加到URL后面，以
                        ？name1=value1&name2=value2&name3=value3
                      的形式）
    3）enctype： text/plain （纯文本形式传送信息
              ： multipart/from-data （使用MINE编码）
              ： application/x-www-form-urlencoded

---

[@xiao_h]

---

本文章使用limfx的vscode插件快速发布