目录: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
- 数组
- 普通对象