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

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

HTML

列表标签

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

超链接和锚链接

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

表格标签

<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 action="login.html" method="post" enctype="application/x-www-form-urlencoded">
    
    文本框:<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>
    
    
    
    <button type="button">普通按钮button>
    
    
    <button type="reset">重置按钮button>
    
    
    <button type="submit">提交表单button>
form>

body>
html>

span&div

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

span

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

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
  • 数组
  • 普通对象