Day29
HTML
前端：展示页面、与用户交互 — HTML
后端：数据的交互和传递 — JavaEE/JavaWeb
网页的组成部分(HTML+CSS+JAVASCRIPT)
HTML：页面结构
CSS：页面样式表现
JavaScript：交互行为HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标记语言”，主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。HTML提供了许多标记，如段落标记p、标题标记 h1-h6、超链接标记 a、图片标记 img等，网页中需要定义什么内容，就用相应的HTML标记描述即可。
常用标签
h1~h6:标题标签
<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- h1~h6 标题标签 无效标签认为是纯文本去展示内容 --> <h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3> <h4>四级标签</h4> <h5>五级标签</h5> <h6>六级标签</h6> <h7>七级标签</h7> 教育 </body> </html>p:段落标签
<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>用良心</p> <p>做自己</p> </body> </html>span：文本标签
br：换行标签
hr：分割线标签
<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- span：文本标签 br：换行标签 hr：分割线标签 --> <span>用良心</span> <br /> <span>做自己</span> <hr /> </body> </html>
列表
ul：无序列表
type - 类别（circle-空心圆 disc-实心圆 square-实心方块）ol：有序列表
type - 类别（1-阿拉伯数字 a-小写英文 A-大写英文 i-小写罗马数字 I-大写罗马数字）li：项
dl：定义列表
dt：列表头
dd：列表体
<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li> <h3>荤菜</h3> <ol> <li>回锅肉</li> <li>小炒肉</li> <li>红烧肉</li> <li>宫保鸡丁</li> <li>火爆腰花</li> <li>糖醋排骨</li> <li>鱼香肉丝</li> </ol> </li> <li> <h3>素菜</h3> <ol> <li>清炒土豆丝</li> <li>家乡豆腐</li> <li>地三鲜</li> <li>清炒空心菜</li> </ol> </li> <li> <h3>汤类</h3> <ol> <li>紫菜蛋花汤</li> <li>西红柿煎蛋汤</li> <li>皮蛋黄瓜汤</li> <li>珍珠翡翠白玉汤</li> </ol> </li> </ul> </body> </html>img：图片标签
src - 图片资源地址
width - 宽度
height - 高度
alt - 图片加载失败后展示的文本内容a：超链接
href - 链接地址
target - 目标（_self-本页面跳转 _blank-新增页面跳转）<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- a：超链接 href - 链接地址 target - 目标（_self-本页面跳转 _blank-新增页面跳转） --> <a href="08_列表案例.html" target="_self">链接到本地页面</a> <a href="08_列表案例.html" target="_blank">链接到本地页面</a> <a href="http://www.baidu.com" target="_blank">链接到百度页面</a> <a href="http://www.baidu.com" target="_blank"> <img src="../img/衣.jpg" width="100px" height="100px" /> </a> </body> </html> name=" "：锚链接
<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <a href="#new01">法治</a><!--链接到锚点的位置--> <a href="#new02">国际</a><!--链接到锚点的位置--> <a href="#new03">娱乐</a><!--链接到锚点的位置--> <a name="new01"></a><!--下锚点--> <h1>法治新闻</h1> <h1>法治新闻</h1> <h1>法治新闻</h1> <h1>法治新闻</h1> <h1>法治新闻</h1> <h1>法治新闻</h1> <a name="new02"></a><!--下锚点--> <h1>国际新闻</h1> <h1>国际新闻</h1> <h1>国际新闻</h1> <h1>国际新闻</h1> <h1>国际新闻</h1> <a name="new03"></a><!--下锚点--> <h1>娱乐新闻</h1> <h1>娱乐新闻</h1> <h1>娱乐新闻</h1> <h1>娱乐新闻</h1> <h1>娱乐新闻</h1> <h1>娱乐新闻</h1> </body> </html>table：表格
border-边框tr：行
th：列（居中、加粗）
td：列（向左对齐）
rowspan=“2” 占2行
colspan=“2” 占2列
注意：1.只能先写tr再写th
2.在表格中不是中的内容会默认放在表格之前<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li> <h3>荤菜</h3> <ol> <li>回锅肉</li> <li>小炒肉</li> <li>红烧肉</li> <li>宫保鸡丁</li> <li>火爆腰花</li> <li>糖醋排骨</li> <li>鱼香肉丝</li> </ol> </li> <li> <h3>素菜</h3> <ol> <li>清炒土豆丝</li> <li>家乡豆腐</li> <li>地三鲜</li> <li>清炒空心菜</li> </ol> </li> <li> <h3>汤类</h3> <ol> <li>紫菜蛋花汤</li> <li>西红柿煎蛋汤</li> <li>皮蛋黄瓜汤</li> <li>珍珠翡翠白玉汤</li> </ol> </li> </ul> <dl> <dt> <h3>价格</h3> </dt> <dd> <li>荤菜一个8块</li> <li>素菜一个5块</li> <li>汤一个3块</li> </dd> </dl> <h3>菜单</h3> <table border="10px" width="600px" heigth="800px"> <tr> <th>荤菜</th> <th>素菜</th> <th>汤</th> <tr> <tr> <td>回锅肉</td> <td>清炒土豆丝</td> <td>紫菜蛋花汤</td> <tr> <tr> <td>小炒肉</td> <td>家乡豆腐</td> <td>西红柿煎蛋汤</td> <tr> <tr> <td>红烧肉</td> <td>地三鲜</td> <td>皮蛋黄瓜汤</td> <tr> <tr> <td></td> <td>清炒空心菜</td> <td>珍珠翡翠白玉汤</td> <tr> </table> </body> </html>
表单
请求方式：get、post
get：http://127.0.0.1:8020/Day29/01_常用标签/14_表单.html?键=值&键=值&…
post：http://127.0.0.1:8020/Day29/01_常用标签/14_表单.html + 数据包经验：表单数据具有一定的隐私性，一般选择post请求
注意：表单数据要想传输给服务器，必须有name属性
文本、密码、单选、多选、下拉列表、上传文件、提交按钮、重置按钮、图片按钮、普通按钮
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 请求方式：get、post get：http://127.0.0.1:8020/Day29/01_常用标签/14_表单.html?键=值&键=值&.... post：http://127.0.0.1:8020/Day29/01_常用标签/14_表单.html + 数据包 经验：表单数据具有一定的隐私性，一般选择post请求 注意：表单数据要想传输给服务器，必须有name属性 --> <form action="服务器地址" method="get"> <input type="image" src="img/头像.jpg" width="100px" height="100px"/><br/><!--图片按钮等同于提交按钮--> 账号：<input type="text" name="username" /><br /> 密码：<input type="password" name="password" /><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="province"> <option value="hn">湖南</option> <option value="hb">湖北</option> <option value="sc" selected="selected">四川</option> <option value="gd">广东</option> </select> <br /> <input type="submit" value="提交" /><!--提交按钮：将表单数据提交给服务器--> <input type="reset" value="重置按钮" /><br /> <input type="button" value="普通按钮" onclick="fun01()"/><br /> <button type="button" onclick="fun02()">普通按钮</button><!--定义按钮的第二种方式--> </form> <script type="text/javascript"> function fun01(){ alert("用良心做教育"); } function fun02(){ alert("做真实的自己"); } </script> 上传文件：<input type="file" /><br /> </body> </html>
CSS
通配符选择器
<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* * 通配符选择器 */ *{ color: red; } </style> </head>标签选择器
<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* * 标签选择器 */ p{ color: red; } </style> </head>类选择器
<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> </body>ID选择器
<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* * ID选择器 * * 注意：ID唯一 */ #myid{ color: red; } </style> </head> <body> <h1 id="myid">一级标签</h1> </body>基本选择器的优先级别：ID > Class > 标签
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* * 基本选择器的优先级别：ID > Class > 标签 */ h1{ color: red; } .myclass{ color: green; } #myid{ color: blue; } </style> </head> <body> <h1 class="myclass" id="myid">123456</h1> </body> </html>群组选择器
<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* * 群组选择器 */ h1,h3,h5,p{color: red;} </style> </head>派生选择器/上下文关系选择器 – 后代选择器
<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* * 派生选择器/上下文关系选择器 -- 后代选择器 */ ul a{color: red;} </style> </head>派生选择器/上下文关系选择器 – 子代选择器
<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* * 派生选择器/上下文关系选择器 -- 子代选择器 */ li>a{color: red;} </style> </head>派生选择器/上下文关系选择器 – 相邻兄弟选择器
注意：样式作用在后者
<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* * 派生选择器/上下文关系选择器 -- 相邻兄弟选择器 * 注意：样式作用在后者 */ a+a{color: red;} </style> </head>属性选择器
<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[type='password'][name='repassword']{color: red;} */ </style> </head>锚伪类
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> a:link {color: #66ff99} /* 未访问的链接 */ a:visited {color: #660033} /* 已访问的链接 */ a:hover {color: #00ccff} /* 鼠标移动到链接上 */ a:active {color: #33ffff} /* 选定的链接 */ </style> </head> <body> <a href="http://www.jd.com">跳转</a> </body> </html>样式的优先级别：
行内样式表 > 内外部样式表
注意：内外部样式表要看加载顺序<html> <head> <meta charset="UTF-8"> <title></title> <!-- 样式的优先级别： 行内样式表 > 内外部样式表 注意：内外部样式表要看加载顺序 --> <!--内部样式表--> <style type="text/css"> h1{color: red;} </style> <!--外部样式表--> <link rel="stylesheet" type="text/css" href="../css/new_file.css"/> </head> <body> <!--行内样式表--> <h1 style="color: blue;">初心至善</h1> </body> </html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
