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个格子
案例演示