1.细线表格
原理：将table的整个背景设置成黑色，每一个单元格背景设置成白色，单元格之间的间距设置为1，留出的缝隙就是黑色线
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table width="600" height="500" cellspacing="1" bgcolor="black">
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
<td rowspan="5"></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td colspan="3"></td>
</tr>
<tr bgcolor="white">
<td rowspan="2"></td>
<td></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr bgcolor="white">
<td></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr bgcolor="white">
<td></td>
<td colspan="5"></td>
</tr>
</table>
</body>
</html>
2.表单标签和input标签
2.1表单标签（form）
表单标签的作用：收集用户信息：实质是将表单标签作为容器，来收集表单标签中其他标签的信息。
本身没有任何显示效果
action属性: 设置提交地址
method属性: 提交方式(post/get)
点提交按钮提交的时候，将表单中所有相关标签以name=value的形式，按照method属性提供的提交方式，提交给action属性对应的接口。
form标签提供了两大功能：a.统一提交 b.重置
<form action="" method="post">
</form>
2.2.input标签 - 单标签
既可以放在form标签中，也可以不放在form标签里单独使用
type属性 - type对应的值不一样，input标签体现的功能不一样
a.text - 文本输入框
<font>账号：</font><input type="text" name="tel" value="726550822" placeholder="手机号..." maxlength="11"/>
name属性 - 专门用来区分不同的信息，相当于字典的key
value属性 - 标签内容；指向输入框中的内容; 设值其实是设文本输入框中的默认值
placeholder属性 - 当输入框中没有内容的时候，显示的提示信息
maxlength属性 - 设置输入框最大能输入的文字的个数
b.password - 密码输入框
<input type="password" name="password" value="123456" placeholder="密码.." />
name属性 - 专门用来区分不同的信息，相当于字典的key
value属性 - 标签内容；指向输入框中的内容; 设值其实是设文本输入框中的默认值
placeholder属性 - 当输入框中没有内容的时候，显示的提示信息
maxlength属性 - 设置输入框最大能输入的文字的个数
c.radio - 单选按钮
<input type="radio" name="sex" value="boy" checked="checked"/><font>男</font>
name属性 - 要求同一组的数据的name属性值必须一样，才能单选
value属性 - 不可见的，专门用于数据的提交；或者区分被选中的值
checked属性 - 让单选按钮默认处于选中状态
d.checkbox - 复选按钮
<input type="checkbox" name="hobby" id="" value="篮球" /><font>🏀</font>
name属性 - 要求同一组的数据的name属性值必须一样，才能单选
value属性 - 不可见的，专门用于数据的提交；或者区分被选中的值
checked属性 - 让单选按钮默认处于选中状态
e.button - 普通按钮
value属性 - 决定按钮上显示的文字
<input type="button" value="注册" />
f.submit - 提交按钮
点击提交按钮后会自动提交当前form中所有设置了name属性的相关标签的值。以‘name=value’的形式进行提交
<input type="submit" name="" id="" value="提交" />
g.reset - 重置按钮
将当前form标签中所有的标签状态设置为初始状态
<input type="reset" name="" id="" value="重置" />
2.3.按钮标签(button)
双标签，中间内容部分更灵活
<!--文字按钮-->
<button>登录</button>
<!--图片按钮-->
<button>
<img src="img/luffy.jpg"/>
<p>登录</p>
</button>
3.下拉菜单和多行文本框
3.1.下拉菜单（select-option）
a.select标签 - 代表整个下拉菜单
name属性 - 区分和提交
b.option标签 - 下拉菜单中的选项
内容 - 显示部分
value属性 - 提交的内容
selected属性 - 设置默认选中
c.optgroup标签
显示效果上对下拉菜单进行分组
label属性 - 给分组设置名字
<font>考试科目：</font><select name="学科">
<optgroup label="理科"></optgroup>
<option value="">数学</option>
<option value="">物理</option>
<option value="">化学</option>
<option value="">生物</option>
<optgroup label="文科"></optgroup>
<option value="">语文</option>
<option value="">政治</option>
<option value="">地理</option>
<option value="">历史</option>
</select>
<br />
<font>城市：</font><select name="province">
<option value="四川">四川省</option>
<option value="广西">广西省</option>
<option value="广东">广东省</option>
<option value="湖南">湖南省</option>
<option value="湖北">湖北省</option>
<option selected="selected" value="云南">云南省</option>
<option value="辽宁">辽宁省</option>
<option value="吉林">吉林省</option>
<option value="黑龙江">黑龙江省</option>
</select>
<select name="city">
<option value="">成都市</option>
<option value="">南宁市</option>
<option value="">深圳市</option>
<option value="">长沙市</option>
<option value="">武汉市</option>
<option value="">昆明市</option>
<option value="">沈阳市</option>
<option value="">长春市</option>
<option value="">哈尔滨</option>
</select>
3.2.多行文本输入框(textarea)
可以输入多行内容，内容超出范围可以上下滚动
name属性 - 提交和区分
rows - 一次性可以显示的行数(决定高度)
cols - 列数（一行最多可以显示多少个文字，决定宽度）
placeholder - 提示语句
内容 - 相当于value
maxlength属性 - 最多能输入的文字个数
<textarea maxlength="200" name="" rows="4" cols="20" placeholder="意见..." >默认值</textarea>
4.div和span
两个标签是无语义标签；一般用来将网页中的标签进行分组和分模块使用;
5.CSS基础
1.什么是CSS
css是web标准中的表现标准，专门负责网页中内容的布局和样式
目前使用的是css3
css代码又叫样式表
2.CSS语法（怎么写？）
a.基本结构
选择器{属性名1:属性值1;属性名2:属性值2;...}
b.说明
选择器{} - 通过选择器决定样式是针对哪个标签写的(在内联样式表中没有这个结构)
属性 - 属性不是随便写的，必须是CSS提供的两百多个属性中的一个；
属性名和属性值之间用冒号连接，多个属性之间用分号隔开(如果没有分号会导致后边所有的属性无效)
3.CSS代码写在哪儿？
a.内联样式表
将样式表作为HTML中标签的style属性值
内联样式表只能针对一个标签有效
<p style="color: #ff00ff; font-size: 40px;">我是内联样式表</p>
b.内部样式表
将样式表作为style标签的内容
内部样式表可以针对当前html中所有的标签
<style type="text/css">
/*内部样式，可以同时写多个样式表*/
a{
color: yellowgreen;
background-color: sandybrown;
}
div{
color: yellow;
}
p{
background-color: pink;
}
</style>
c.外部样式表
将样式表写在一个css文件中，再通过link导入
外部样式表可以针对所有html文件中的所有标签
<!--导入样式表-->
<link rel="stylesheet" type="text/css" href="css/css基础.css"/>
<!--设置网页图标-->
<link rel="icon" type="image/ico" href="img/aaa.ico"/>
优先级：内联样式表的优先级最高；内部样式和外部样式，谁后写谁的优先级就高
4.常用属性补充：
color : 字体颜色
font-size : 字体大小
background-color : 背景颜色
width : 宽度
height : 高度
CSS中的颜色值：a.颜色的英语单词
b.rgb的十六进制值，例如：#ff0000
c.直接使用rgb值：rgb(R,G,B), rgba(R,G,B, Alpha) Alpha：0(完全透明) ~ 1(不透明)
CSS中的数字：如果数字表示大小，必须加单位：px(像素)，em(空格)
6选择器
6.选择器{属性名1:属性值;属性名2:属性值;...}
css提供的选择器的写法大概也有十几种，常见的：
1.标签选择器：直接将标签名作为选择器,选中当前html中所有指定的标签
例如:a{} - 选中当前html中所有的a标签; div{} - 选中当前html中所有的div标签
2.id选择器：将标签的id属性值前面加#作为选择器，选中所有id是指定值的标签
例如：#text{} - 选中当前html中id属性值是text的所有标签
3.class选择器(类型选择器):将标签的class属性值前面加.作为选择器,选中所有class是指定值的标签
例如：.test{} - 选中当前html中class属性值是test的所有标签
4.群组选择器: 将多个选择器用逗号隔开作为一个选择器,同时选中每个单独的选择器选中的所有的标签
例如：p,a,.test,#text{} - 选中所有p标签，a标签和class值是test以及id值是text的标签
5.后代选择器：将多个选择器用空格隔开作为一个选择器, 从前往后一层一层的找，找到最后一个选择器对应的标签
例如: div .test #text{} - 现在div标签中class值是test的标签中id值是text的标签
div div p{} - 选中div中的div中的p标签
6.通配符：将*作为选择器, 选中当前页面中所有的标签
例如: *{} - 选中当前页面中所有的标签
7.伪类选择器
伪类选择器是用来选中标签的不同的状态（为了标签的不同状态设置不同的样式）
1.基本格式
普通选择器:伪类选择器
2.伪类选择器
1) link - 标签的初始状态;一般作用于a标签，表示a标签中的连接没有成功访问过对应的状态
标签:link{} - 标签是通过各种选择器来选中的标签
2)visited - 超链接被访问后的状态。一般作用于a标签
3)hover - 鼠标悬停在标签上的时候对应的状态
4)active - 激活状态,鼠标按下还没有弹起的时候对应的状态
3.爱恨原则:当同一个标签需要同时给多个状态添加样式的时候，要遵守爱恨原则：link-visited-hover-active
LoVeHAte
网友评论