day45
HTML
继day44，w3cschool
常用的标签
k) 表格
表格由 table 标签来定义。每个表格均有若干行（由 tr 标签定义），每行被分割为若干单元格（由 标签定义）。字母 td指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
完整的表格：<!--border设置边框: cellspacing="20px" ：规定单元格之间的空白; cellpadding="5px" ：规定单元格边沿与其内容的空白th：定义表头 --> <table border="1" cellspacing="20px" cellpadding="5px"><thead> ---- 表头<tr><th>Header</th></tr> </thead><tbody> --- 表内容<tr><td>Data</td></tr> </tbody> <tfoot> -- 表末尾<tr><td>Data</td></tr></tfoot> </table>
常用：
table - 表格【存在，才有方框格子】
border设置边框【1表示一个像素，px省去了】
tr - 行th - 列（加粗、居中）td - 列（向左对齐）案例1：采用表格来展示学员数据
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><table border="1" width="300px"><tr><th>姓名</th><th>性别</th><th>年龄</th></tr><tr><td>小白</td><td>女</td><td>27</td></tr><tr><td>小黑</td><td>女</td><td>23</td></tr><tr><td>大雷</td><td>女</td><td>25</td></tr><tr><td>小化</td><td>女</td><td>24</td></tr></table></body>
</html>
运行：
案例2：模拟计算器表格
跨行和跨列的单元格
Colspan:可横跨的列数
Rowspan：可横跨的行数
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--rowspan="2" -- 占2行colspan="2" -- 占2列--> <table border="1" width="300px" height="400px"><tr><th>C</th><th>-></th><th>+</th><th>-</th></tr><tr><th>7</th><th>8</th><th>9</th><th>*</th></tr><tr><th>4</th><th>5</th><th>6</th><th>/</th></tr><tr><th>1</th><th>2</th><th>3</th><th rowspan="2">=</th></tr><tr><th colspan="2">0</th><th>.</th></tr></table></body>
</html>
运行：
l) 表单
HTML 表单用于收集用户输入
元素定义 HTML 表单：<form> form elements </form>HTML 表单包含表单元素。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
input：组件type属性text、password、radio【name属性相同情况下单选】、checkbox、file不同代表不同
submit【按钮，value设置按钮上的字】、image图片按钮、reset、button
默认选中checked
普通按钮扩展：onclick单击事件绑定一个函数【弹窗alert】select：【下拉列表】option里写下拉内容
textarea：【文本域】注意：br会显示换行
可以设置只读属性、宽高、style设置固定大小【样式】
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><form>输入框：<input type="text" /><br />密码框：<input type="password"/><br />单选框：<input type="radio" name="xxx"/><input type="radio" name="xxx"/><input type="radio" name="xxx"/><br />多选框：<input type="checkbox" /><input type="checkbox" /><input type="checkbox" /><input type="checkbox" /><br />上传文件：<input type="file" /><br />下拉列表：<select><option>aaa</option><option>bbb</option><option>ccc</option><option>ddd</option><option>eee</option></select><br />文本域：<textarea style="resize: none;" cols="20" rows="5" readonly="readonly">高山流水</textarea><br /><input type="submit" value="提交按钮" /><!--将表单数据提交给服务器--><input type="image" src="../img/星空一花.jpg" width="30px"/><!--和提交按钮的功能一致--><input type="reset" value="重置按钮" /><!--将表单数据重置，就类似于清除--><input type="button" value="普通按钮" onclick="fun01()"/><button onclick="fun02()">普通按钮</button></form><script type="text/javascript">function fun01(){//弹框alert("山好");}function fun02(){//弹框alert("水好");}</script></body>
</html>普通按钮可以自定义样式；函数相当于java中的方法；绑定单机事件
运行：点击按钮触发
案例： 提交数据
action=“服务器地址” 设置服务器地址
method=“post” 设置请求方式（get/post）
get：服务器地址?键=值&键=值
post：服务器地址 + 数据包
注意：post请求的安全级别比get请求更高，所以表单传输大概率会选择post请求注意：表单里的数据要想传给服务器，表单组件必须有name属性
做实验代码时用get好查看【地址那里可以看结果值】
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><form action="服务器地址" method="get">账号：<input type="text" name="username" placeholder="请输入账号..." /><br />密码：<input type="password" name="password" placeholder="请输入密码..." /><br />性别：<input type="radio" name="sex" value="man" checked="checked"/>男<input type="radio" name="sex" value="woman"/>女<br />爱好：<input type="checkbox" name="hobbies" value="football" checked="checked"/>足球<input type="checkbox" name="hobbies" value="basketball"/>篮球<input type="checkbox" name="hobbies" value="shop"/>购物<br />城市：<select name="city"><option value="beijing">北京</option><!--设置value：数据库唯一标识--><option value="shanghai">上海</option><option value="guangzhou">广州</option><option value="shengzheng">深圳</option><option value="chengdu" selected="selected">成都</option><option value="chongqing">重庆</option><option value="dongguan">东莞</option></select><br /><input type="submit" value="注册" /></form></body>
</html>
运行：点击注册后，虽然现在找不到文件，但可以查看get格式显示
补充说明：常见名词的解释
WWW：万维网（world wide web），它是提供网站相关服务，人们可以通过万维网服务进行网上聊天、网上冲浪、网购、搜索资料、查看天气、查看新闻、交友聊天等。
W3C：万维网联盟创建于1994年.是Web技术领域最具权威和影响力的国际中立性技术标准机构。我们学的html、css等标准都是由此机构主导制定。
HTTP：超文本传输协议（HTTP，HyperText Transfer Protocol），也就是浏览器和服务器端的网页传输数据的约束和规范。
CSS
CSS 概述
• CSS 指层叠样式表 (Cascading Style Sheets)
• 样式定义如何显示 HTML 元素
• 是为了解决内容与表现分离的问题
• 多个样式定义可层叠为一
• 样式通常存储在样式表中
理解：内容与样式一起写会难处理，即分离
选择器
选择器，选择你所需要修饰的HTML元素
通配符选择器
通配符选择器 – *
style【head标签里面】*{}
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{color: red;}</style></head><body><h1>一级标签</h1><h2>二级标签</h2><h3>三级标签</h3><h4>四级标签</h4><h5>五级标签</h5><h6>六级标签</h6><p>用良心做教育</p><p>做真实的自己</p><span>匠心育人</span><span>初心至善</span></body>
</html>运行：
基本选择器
基本选择器：
标签选择器：p、h。。。。。。
类选择器：【.开头】class属性标记
ID选择器：【#开头】id属性标记
标签选择器
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/** 知识点：基本选择器 -- 标签选择器*/p{color: red;}</style></head><body><h1>一级标签</h1><h2>二级标签</h2><h3>三级标签</h3><h4>四级标签</h4><h5>五级标签</h5><h6>六级标签</h6><p>用良心做教育</p><p>做真实的自己</p><span>匠心育人</span><span>初心至善</span></body>
</html>运行：
类选择器
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/** 知识点：基本选择器 -- 类选择器* 注意：类选择器使用.开头*/.myclass{color: red;}</style></head><body><h1 class="myclass">一级标签</h1><h2>二级标签</h2><h3 class="myclass">三级标签</h3><h4>四级标签</h4><h5 class="myclass">五级标签</h5><h6>六级标签</h6><p>用良心做教育</p><p>做真实的自己</p><span>匠心育人</span><span>初心至善</span></body>
</html>运行：
ID选择器
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/** 知识点：基本选择器 -- ID选择器* * 注意：* id选择器使用#开头* id唯一，不能重复*/#myid{color: red;}</style></head><body><h1 id=myid>一级标签</h1><h2>二级标签</h2><h3>三级标签</h3><h4>四级标签</h4><h5>五级标签</h5><h6>六级标签</h6><p>用良心做教育</p><p>做真实的自己</p><span>匠心育人</span><span>初心至善</span></body>
</html>运行：
三种基本选择器的优先级
ID选择器 > 类选择器 > 标签选择器
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">p{color: red;}.myclass{color: green;}#myid{color: blue;}</style></head><body><p id="myid" class="myclass">用良心做教育</p></body>
</html>运行：
群组选择器
群组选择器【就是选择器组合作用】
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/** 知识点：群组选择器*/h1,p,span{color: red;}</style></head><body><h1>一级标签</h1><h2>二级标签</h2><h3>三级标签</h3><h4>四级标签</h4><h5>五级标签</h5><h6>六级标签</h6><p>用良心做教育</p><p>做真实的自己</p><span>匠心育人</span><span>初心至善</span></body>
</html>运行：
派生选择器
通过依据元素在其位置的上下文关系来定义样式
派生选择器：
后代选择器
子代选择器【直系】
相邻兄弟选择器【作用在后者】
后代选择器
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/** 知识点：派生选择器/上下文关系选择器 -- 后代选择器*/ul a{color: red;}</style></head><body><ul><li><a href="#">超链接1</a></li><li><a href="#">超链接2</a></li><li><a href="#">超链接3</a></li></ul><ul><li><a href="#">超链接4</a></li><li><a href="#">超链接5</a></li><li><a href="#">超链接6</a></li><li><a href="#">超链接7</a></li></ul><a href="#">超链接8</a><a href="#">超链接9</a><a href="#">超链接10</a></body>
</html>运行：
子代选择器
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/** 知识点：派生选择器/上下文关系选择器 -- 子代选择器*/li>a{color: red;}</style></head><body><ul><li><a href="#">超链接1</a></li><li><a href="#">超链接2</a></li><li><a href="#">超链接3</a></li></ul><ul><li><a href="#">超链接4</a></li><li><a href="#">超链接5</a></li><li><a href="#">超链接6</a></li><li><a href="#">超链接7</a></li></ul><a href="#">超链接8</a><a href="#">超链接9</a><a href="#">超链接10</a></body>
</html>运行：
相邻兄弟选择器
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/** 知识点：派生选择器/上下文关系选择器 -- 相邻兄弟选择器* * 注意：效果作用在后者*/a+a{color: red;}</style></head><body><ul><li><a href="#">超链接1</a></li><li><a href="#">超链接2</a></li><li><a href="#">超链接3</a></li></ul><ul><li><a href="#">超链接4</a></li><li><a href="#">超链接5</a></li><li><a href="#">超链接6</a></li><li><a href="#">超链接7</a></li></ul><a href="#">超链接8</a><a href="#">超链接9</a><a href="#">超链接10</a></body>
</html>运行：
属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。
例子 1
如果您希望把包含标题（title）的所有元素变为红色，可以写作：
*[title] {color:red;}例子 2
与上面类似，可以只对有 href 属性的锚（a 元素）应用样式：
a[href] {color:red;}例子 3
还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。
例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：
a[href][title] {color:red;}
其中属性+值【进一步限制作用范围】
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/** 知识点：属性选择器* * 单个属性：* input[placeholder]{color: red;}* * 单个属性+值：* input[placeholder="请输入账号..."]{color: red;}* * 多个属性：* input[name][placeholder]{color: red;}* * 多个属性+值：* input[name="name"][type="text"]{color: red;}*/input[placeholder="请输入账号..."]{color: red;}</style></head><body><form action="服务器地址" method="get">账号：<input type="text" name="username" placeholder="请输入账号..." /><br />密码：<input type="password" name="password" placeholder="请输入密码..." /><br />确认密码：<input type="password" name="repassword" /><br />姓名：<input type="text" name="name" /><br />性别：<input type="radio" name="sex" value="man" checked="checked"/>男<input type="radio" name="sex" value="woman"/>女<br />爱好：<input type="checkbox" name="hobbies" value="football" checked="checked"/>足球<input type="checkbox" name="hobbies" value="basketball"/>篮球<input type="checkbox" name="hobbies" value="shop"/>购物<br />城市：<select name="city"><option value="beijing">北京</option><option value="shanghai">上海</option><option value="guangzhou">广州</option><option value="shengzheng">深圳</option><option value="chengdu" selected="selected">成都</option><option value="chongqing">重庆</option><option value="dongguan">东莞</option></select><br /><input type="submit" value="注册" /></form></body>
</html>运行：以单个属性+值为例
伪类
CSS 伪类用于向某些选择器添加特殊的效果。
锚伪类
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
注意：颜色网上搜
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/** 知识点：锚伪类* 理解：监听超链接的各种状态（未访问、已访问、鼠标悬停、鼠标按下）*/a:link {color: #FFCCFF} /* 未访问的链接 */a:visited {color: #66FF66} /* 已访问的链接 */a:hover {color: #33FFFF} /* 鼠标移动到链接上 */a:active {color: #000033} /* 选定的链接 */</style></head><body><a href="http://www.jd.com">京东</a></body>
</html>运行： 未访问>选中>点击未松开鼠标>访问后返回
样式的优先级
知识点：样式的优先级别
分类：
内部样式表
外部样式表
行内样式表
优先级别：
行内样式 > 内部样式或外部样式（内外部样式表要看加载顺序）
理解：
为什么行内样式最优先呢？
因为行内样式最后加载注意：【…/退回上一级，同级才能获取】
内外部样式【加载顺序，即哪个在前面】，行内样式在两者之后
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><!--外部样式表--><link rel="stylesheet" type="text/css" href="../../css/new_file.css"/><!--内部样式表--><style type="text/css">p{color: red;}</style></head><body><!--行内样式--><p style="color: blue;">用良心做教育</p></body>
</html>外部样式css/new_file.css
p{color: green;
}
运行：
小结
HTML 常用的标签
CSS选择器
