web前端之html基础复习
作者：互联网
------------恢复内容开始------------
web前端（网页前端开发）主要由html超文本标记语言，css层叠样式表，JavaScript脚本语言组成
html基础
html主要由标签与内容组成
标签结构
<!DOCTYPE html>
<html leng="en">
<!--语言选择-->
<html>
<head>
<meta charset="utf-8">
<!-- 编码选择-->
<title>网页标题</title>
</head>
<body>
</body>
</html>
标签
标签（单标签，双标签），
标签又称元素（块级元素，行内元素）
<></>,</>
块级元素：独占一行可设置宽高可包含行内元素
例如：div（布局标签），p（段落标签），h1，....，h6（字体大小，1最大6最小），ul（无序列表），ol（有序列表），li（列表项）,table，hr（分割线），br（换行）
注：div与p具有格式上的区别不应滥用具体辨析请访问https://zhidao.baidu.com/question/177279208803866604.html
行内元素：共享一行，不可设置宽高（img标签除外），外边距只能设置左右不能设置上下
例如：span（文本框）,sub,sup,a,i,b，input
两者显示转换
块转行内：display-inline；
行内转块：display：block；
块，行内元素转换为行内块：display：inline-block
转义字符：有时候代码文本上传，浏览器会无法识别一些特殊符号如<>,空格等这时候就需要转义字符帮助说明
 ；（空格）
<；(小于号<)
>；（大于号>)
© （© ）
公共属性（修饰当前的元素）
id（唯一性）
class（类名属性，一个元素可有多个属性）
style（内联样式属性，可设置宽高，颜色背景等）
align（设置水平居中属性，有值left，center，right）
重要标签
<div></div><p></p><span></span>
<img>
<a>
<input>
<elect></elect>
<table></table>
<ol></ol>
<ul></ul>
<label></label>
<textarea></textarea>
超链接：
<a herf="网页地址、图片地址、锚点位置" target="_self/_blank">内容</a>
功能一：跳转
点击文字跳转网页
<a herf="http://www.baidu.com" target="_self">百度一下</a>
为了不让连接显得很平常，我们通常会改变他的初始颜色（这需要使用伪选择器），并去掉下划线等操作
去掉下划线text-decoration:none;
点击文字跳转图片
<a href="图片地址">点击文字跳转图片</a>
点击图片跳转网页
<a href="http://www.baidu.com"><img src="图片地址"></a>
功能二：压缩文件直接下载
<a herf="1.zip">你想要的压缩文件</a>
功能三：支持js代码
<a href="javascript:document.write('666666')">点击</a>
功能四： 支持返回页面顶部
<div style="height: 5000px"></div>
<a href="#">返回页面顶部</a>
功能五：锚点
锚点
步骤1 : 定义一个锚点(做一个记号)
可以通过a的name属性实现定义
可以通过任意标签的id属性值定义
步骤2 : 通过a链接实现锚点的跳转
<a href="#锚点名称" >锚点的跳转</a>
<!--步骤2 跳转指定锚点-->
<a href="#red">女生专区</a>
<a href="#dy">大爷专区</a>
<a href="#dm">大妈专区</a>
<a href="#om">欧美专区</a>
<a href="#rh">日韩专区</a>
<!-- 跨页面的锚点定义-->
<a href="02_hw.html#li">李白</a>
<!--步骤1 定义锚点 做标记-->
<div style="height: 500px;"></div>
<a href="" name="red">女生专区</a>
<div style="height: 500px;"></div>
<div style="height: 500px;background: #0ACD37" id="dy">大爷专区</div>
<div style="height: 500px;background: pink" id="dm">大妈专区</div>
<div style="height: 500px;background: aqua" id="om">欧美专区</div>
<div style="height: 500px;background: burlywood" id="rh">日韩专区</div>
<div style="height: 500px;"><a href="#">返回页面顶部</a></div>
表格
表格目前很少被使用
应用: 购物车 很老的项目可能看的到
语法:
table 包裹所有的内容
tr 行
td 列
table的属性
border 边框
width 宽
height 高
cellspacing 边框和边框的距离 外边距 一般给0
align 水平排列 center居中
cellpadding 内容和边框之间的距离 一般给不给
bgcolor: 背景颜色的简写
tr的属性
width无效
align
height
bgcolor
valign 垂直方向的定义 top顶部 middle中间 bottom底部
td的属性
width 支持 同一列都会变
height 支持 同一行都会变
align
bgcolor
不规则表格的实现 格子和格子之间的合并
rowspan 行与行之间合并
colspan 列与列之间合并
遵循 从上到下 从左到右的顺序进行合并
合并了n个格子 就需要删除n-1个格子
案例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 表格默认没有边框-->
<!--
border 边框
width 宽
height 高
cellspacing 边框和边框的距离 外边距 一般给0
align 水平排列 center居中
cellpadding 内容和边框之间的距离 一般给不给
bgcolor: 背景颜色的简写
-->
<!--
特点: 默认 垂直方向是居中的
-->
<div style="height: 100px;width: 200px;background: burlywood">大表哥</div>
<table border="1" width="600" height="400" align="center" cellspacing="0"
cellpadding="0" bgcolor="aqua">
<!-- tr属性 width无效
align
height
bgcolor
valign 垂直方向的定义 top顶部 middle中间 bottom底部
-->
<tr height="50" bgcolor="#deb887" align="center" valign="top">
<!-- td 格子的属性
width 支持 同一列都会变
height 支持 同一行都会变
align
bgcolor
-->
<td width="200" height="150" bgcolor="red" align="right">编号</td>
<td>姓名</td>
<td>年龄</td>
<td>工资</td>
</tr>
<tr>
<td rowspan="3">01</td>
<td>隔壁老徐</td>
<td>19</td>
<td>2800</td>
</tr>
<tr>
<!-- <td>02</td>-->
<td>隔壁老张</td>
<td>39</td>
<td>12800</td>
</tr>
<tr>
<!-- <td>03</td>-->
<td>隔壁老蔡</td>
<td>29</td>
<td>10000</td>
</tr>
<tr>
<!-- 不规则表格的实现 格子和格子之间的合并
rowspan 行与行之间合并
colspan 列与列之间合并
遵循 从上到下 从左到右的顺序进行合并
合并了n个格子 就需要删除n-1个格子
-->
<td colspan="3">薪资总计:</td>
<!-- <td></td>
<td></td>-->
<td></td>
</tr>
</table>
</body>
</html>
表单
定义：面向用户的客户端与服务器之间的桥梁
<input type="text/password/radio/checkbox/submit/reset/buttom/file/image/" name="" value="" placeholde="" maxlenght="">
<form >
n个不同的子元素
</form>
属性：
type:不同的值，对应的input功能是不一样的
name:提交给服务器的标志 必须加
value:输入框的内容 用户输入不是自己给的
placeholder:智能文本提示属性
maxlength:最大长度
text: 文本框
<p>用户姓名:
<input type="text" name="txt" value="" placeholder="请输入用户名">
</p>
password 密码输入框
<p>用户密码:
<input type="password" name="pwd" maxlength="6">
</p>
radio 单选框
<!-- 单选 一组必须加name属性 值需要一样 必须给value值-->
<p>用户性别:
<input type="radio" name="rao" value="m">男
<input type="radio" name="rao" value="w">女
<input type="radio" name="rao" value="qt">其他
</p>
checkbox 多选框
<!-- 多选 一组必须加name属性 值需要一样-->
<p>用户爱好:
<input type="checkbox" name="chk" value="eat">吃
<input type="checkbox" name="chk" value="drink">喝
<input type="checkbox" name="chk" value="play">玩
<input type="checkbox" name="chk" value="music">乐
</p>
按钮操作
<!-- 提交注册-->
<input type="submit" value="注册">
<input type="reset" value="格式化">
<!-- 图片注册-->
<input type="image" src="1.jpg" >
<!-- 没有功能 -->
<input type="button" value="普通按钮">
<!-- 自增 -->
<input type="button" value="0" onclick="this.value++">
补充：
label标签使点击文本达到点击控件的效果
1直接包裹不要for属性
<p>
<label>请输入用户名<input type="text" name="a" id="" placeholder="请输入用户名" ></label>
</p>
2包裹文本要for属性
<p>
<label for="xm">请输入用户名</label>
<input id="xm" type="text" name="a" placeholder="请输入姓名" >
</p>
form属性
action:服务器地址或接口
method:get:向服务器索要数据,内容会在地址栏明文显示 大小限制在kb级
post:向服务器发送数据,内容不会在地址栏显示 大小不会受限
file文件上传
<p>
<label>上传图片<img src="i.jpg" width="10px"><input type="file" name="wj"style="display: none"></label>
</p>
下拉选项框
<p>
<select size="3" name="xx" id="" multiple>
<option value="1">选项</option>
<option value="2">选项</option>
<option value="3">选项</option>
</select>
</p>
多行文本域
<textarea name="tk" id="" disabled rows="20" cols="10">
内容
</textarea>
uri编码
encodeURI("")加密
decodeURI("")解密
网页小图标的实现
列表
有序列表
<div>
<ol type="A" start="c">
<li></li>
</ol>
</div>
无序列表
<div>
<ul type="none" >
<li></li>
</ul>
</div>
标签：web,复习,专区,--,标签,边框,html,跳转,属性 来源： https://www.cnblogs.com/shuaifeiyu/p/14999920.html