知识梳理：Web开发&HTML&列表标签&超链接和锚链接&表格标签&选择器优先级&CSS&Margin和Padding&JavaScript

目录：Web开发&HTML&列表标签&超链接和锚链接&表格标签&选择器优先级&CSS&Margin和Padding&JavaScript

HTML

列表标签

<ul>
    <li>菜单项01</li>
    <li>菜单项02</li>
    <li>菜单项03</li>
    <li>菜单项04</li>
    <li>菜单项05</li>
</ul>

超链接和锚链接

//超链接
<a href="page1.html" target="_blank">首页</a>
//锚链接
<a id="part2">第二章 。。。</a>

表格标签<table>

<table></table>定义表格
包含属性：border,bgcolor,bordercolor,width,height,cellspacing,cellpadding

<caption></caption>(非必须)定义表格名称，必须跟在table标签之后

表格通常分为三部分：thead、tbody、tfoot；这个三个字标签为非必须，不写时默认全部位于tbody中，具体如下：
<thead></thead>(非必须) 表示表格头部区域
<tbody></tbody>(非必须) 表示表格内容区域
<tfoot></tfoot>(非必须) 表示表格底部区域

<tr></tr>定义行，属性：align,valign,bgcolor…
<td></td>定义列，属性：width,height,align,valign.colspan,rowspan,…
<th></th>定义表头

表单标签<form>

<!--
表单标签form,常用属性:
action：设置表单提交的之后的跳转目标
method：设置表单的提交方式（get(默认)/post）
enctype：设置表单数据提交的编码模式
    application/x-www-form-urlencoded  默认值，以表单数据提交，数组使用名值对(name=admin&pwd=XXX)结构提交
    multipart/form-data 将数据以二进制流提交，一般用于文件上传

input元素常用属性：
    type:设置输入组件的类型(text,password,hidden,radio,checkbox,file,date,number,tel,email,button,reset,submit)
    name:为表单控件设置控件名，一般后台获取数据时根据控件名获取，控件名可以重复
    value:用于设置控件的默认值
    readonly:设置控件为只读，无法修改
    disabled:将控件失效，失效之后，后台无法根据控件名获取该控件的值

    placeholder:主要针对于输入框组件，用于显示水印提示信息，当用户输入内容之后自动隐藏
-->
<form action="login.html" method="post" enctype="application/x-www-form-urlencoded">
    <!--username=softeem-->
    文本框:<input type="text" name="username" placeholder="请输入账号" value="softeem"><br>
    密码框:<input type="password" name="password"><br>
    单选框:<input type="radio" name="sex" value="男" checked>男 
     	  <input type="radio" name="sex" value="女">女 <br>
    复选框:<input type="checkbox" name="lang" value="java" checked>Java
    <input type="checkbox" name="lang" value="c++">C++
    <input type="checkbox" name="lang" value="javascript">JavaScript <br>
    文件框:<input type="file" name="myfile" multiple> <br>
    列表框:<select name="city" multiple>
    <option value="wh">武汉</option>
    <option value="bj" selected>北京</option>
    <option value="sh">上海</option>
    <option value="hz">杭州</option>
    <option value="sz">深圳</option>
    </select><br>
    文本域:<textarea name="mark" cols="50" rows="5" placeholder="请输入个性签名" style="resize: none;"></textarea><br>

    <fieldset>
        <legend>用户登录</legend>
        <input type="text" name="uname"><br>
        <input type="password" name="pwd"><br>
        <button>登录</button>
    </fieldset>
    
    <!--普通按钮默认点击无效果，需要通过javascript进行事件绑定-->
    <!--<input type="button" value="普通按钮">-->
    <button type="button">普通按钮</button>
    <!--重置表单中已填写的内容-->
    <!--<input type="reset" value="重置按钮">-->
    <button type="reset">重置按钮</button>
    <!--提交按钮，点击之后可以将表单中填写的数据提交到form标签中action属性所指定的位置(一般为后台映射地址)-->
    <!--<input type="submit" value="提交表单">-->
    <button type="submit">提交表单</button>
</form>

</body>
</html>

span&div

​ 在html页面进行布局设置时，span和div是两个最为常见的分区标签，不同于其他标签的作用，其他标签大多数都具备特定样式效果，比如按钮button，链接a，图片img；span和div不具备任何的固有样式，仅仅用作于对页面结构进行分区，所以在进行网页布局是span和div是首选。

span

<span>是一个行内元素，元素在界面中遵循正常的文档流（从左往右，从上往下），根据内部包裹的内容占据内容固有的宽度，后续的元素紧邻span追加显示。

div

<div>是一个典型的块元素，在使用时无论内部包含多少内容，始终独占一行，从上往下布局。可以通过css代码结合div元素对网页结构进行布局以及美化。

选择器优先级

选择器的优先级遵循以下规律:

!important>ID选择器>属性选择器>类选择器>子选择=层级选择>元素选择>通配选择

CSS常用属性

定位

html中的任何元素在浏览器显示时都会遵循默认的文档流进行摆放，文档流即从左往右（行内元素），从上往下（块元素）；但是在css中可以通过定位的方式将元素脱离正常的文档流，css中定位主要包含以下属性：

• position：设置定位方式
  • relative:相对定位(不会导致元素脱离文档流)
  • absolute:绝对定位(元素会脱离正常的文档流)
  • fiexd:固定定位(脱离正常文档流)
  • static(默认值)
• z-index：层叠顺序（必须配合绝对定位一起使用，数值越大越置顶）
• left：元素与父容器左边的距离
• right：元素与父容器右边的距离
• top：元素与父容器上边的距离
• bottom：元素与父容器下边的距离

Margin和Padding

Margin：用于设置元素和相邻元素之间的外边距，margin可以设置1~4个属性值:

• 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。

• 如果只提供一个，将用于全部的四边。

• 如果提供两个，第一个用于上、下，第二个用于左、右。

• 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。

  属性	版本	继承性	描述
  margin	CSS1	无	检索或设置对象四边的外延边距
  margin-top	CSS1	无	检索或设置对象顶边的外延边距
  margin-right	CSS1	无	检索或设置对象右边的外延边距
  margin-bottom	CSS1	无	检索或设置对象底边的外延边距
  margin-left	CSS1	无	检索或设置对象左边的外延边距

padding：用于设置元素和内部内容之间的距离，padding取值也是1~4个值:

• 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。

• 如果只提供一个，将用于全部的四边。

• 如果提供两个，第一个用于上、下，第二个用于左、右。

• 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。

  属性	版本	继承性	简介
  padding	CSS1	无	检索或设置对象四边的内部边距
  padding-top	CSS1	无	检索或设置对象顶边的内部边距
  padding-right	CSS1	无	检索或设置对象右边的内部边距
  padding-bottom	CSS1	无	检索或设置对象底边的内部边距
  padding-left	CSS1	无	检索或设置对象左边的内部边距

JavaScript

src和href区别:

<link rel="stylesheets" href="css/index.css">
<script src="js/index.js"></script>

href:表示的是关联外部的样式文件，在外部样式文件中对其他资源的访问参考位置是样式文件所在位置

src：替换当前位置的代码为js文件中的代码，在js中访问其他资源的时候参考的目标是当前的html文件

数据类型

JavaScript包含的数据类型主要分为以下：

• number(整数类型和浮点类型)
• string(字符和字符串类型)
• boolean(布尔类型)
• undefined(未定义)
• object(对象类型)
  • null
  • 数组
  • 普通对象