1 html布局
1.1 应用div块元素
<div> 元素是用于分组 HTML 元素的块级元素；
1.1.1 举例
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>布局学习</title></head><body> <div id="container" style="width: 1920;"> <div id="title" style="background-color: rgb(172, 132, 140);"> <h2 style="margin-bottom: 0">NoamaNelson的博客 <div> <span style="text-align: center;font-size: small;">专一测试畛域的测试技术钻研，测试实践、测试方法、测试治理等测试常识分享 </span> </div> </h2> </div> <br> <div id="menu" style="background-color:rgb(201, 201, 219);float: left;"> 1000 1000 1000 100万 10<br> 原创 周排名 总排名 拜访 等级<br> <br> 5000 1000 6000 10万 8000<br> 积分 粉丝 获赞 评论 珍藏<br> </div> <div id="content" style="text-align: center;background-color: khaki;height: 500;"> 内容在这里内容在这里内容在这里<br> 内容在这里内容在这里内容在这里<br> 内容在这里内容在这里内容在这里<br> 内容在这里内容在这里内容在这里<br> 内容在这里内容在这里内容在这里<br> </div> <div id="text"> <h3 style="clear: both;">热门文章</h3> <div style="background-color: khaki;float: left;"> <p>Visual Studio2019装置闪退（不弹出<br>下载界面）等问题解决办法 </p> <p>Visual Studio2019装置闪退（不弹出<br>下载界面）等问题解决办法 </p> <p>Visual Studio2019装置闪退（不弹出<br>下载界面）等问题解决办法 </p> </div> </div> <div id="list"> <h3 style="clear: both;">文章分类</h3> <div style="background-color: rgb(112, 102, 7);float: left;"> <p>Visual Studio2019装置闪退（不弹出<br>下载界面）等问题解决办法 </p> <p>Visual Studio2019装置闪退（不弹出<br>下载界面）等问题解决办法 </p> <p>Visual Studio2019装置闪退（不弹出<br>下载界面）等问题解决办法 </p> </div> </div> </div></body></html>
1.2 应用表格
- 能够应用
HTML <table> 标签创立布局；
1.2.1 举例
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>布局学习</title> </head><body> <table width="1000" border="0"> <tr> <td colspan="2" style="background-color:#dfbe82;"> <h1>NoamaNelson的博客</h1> </td> </tr> <tr> <td style="background-color:#979690;width:100px;vertical-align:top;"> <b>文章分类</b><br> Python<br> C++<br> JAVA<br> PHP<br> </td> <td style="background-color:#f5b1b1;height:200px;width:400px;vertical-align:top;"> 文章内容</td> </tr> <tr> <td colspan="2" style="background-color:#998f86;text-align:center;"> 版权信息</td> </tr> </table></body></html>
2 表单
2.1 表单阐明
- 表单是一个蕴含表单元素的区域；
- 表单元素是容许用户在表单中输出内容；
- 表单应用表单标签
<form> 来设置； - 格局：
<form>内容局部</form>
2.2 表单标签
| 标签 | 阐明 |
|---|
<form> | 供用户输出的表单 |
<input> | 输出域 |
<textarea> | 文本域 (一个多行的输出控件) |
<label> | <input> 元素的标签，个别为输出题目 |
<fieldset> | 一组相干的表单元素，并应用外框蕴含起来 |
<legend> | <fieldset> 元素的题目 |
<select> | 下拉选项列表 |
<optgroup> | 选项组 |
<option> | 下拉列表中的选项 |
<button> | 一个点击按钮 |
<datalist> | 一个事后定义的输出控件选项列表 |
<keygen> | 表单的密钥对生成器字段 |
<output> | 一个计算结果 |
2.3 输出元素-文本域
- 通过
<input type="text"> 标签来设定； - 应用场景：比方用户在表单中输出字母、数字等字符；
- 默认宽度为20个字符；
- 举例：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>表单学习</title></head><body> <h2>1、输出元素：文本域</h2> <form> please input height: <input type="text" height="height"><br> please input weight: <input type="text" weight="weight"><br> </form></body></html>
2.4 输出元素-明码字段
- 通过标签
<input type="password"> 来定义； - 输出的明码不显示，以星号或圆点代替；
- 举例：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>表单学习</title></head><body> <h2>1、输出元素：文本域</h2> <form> please input height: <input type="text" height="height"><br> please input weight: <input type="text" weight="weight"><br> </form> <h2>2、输出元素：明码字段</h2> <form> please input password: <input type="password" name="pwd"><br> please input password again: <input type="password" name="pwd"><br> </form></body></html>
2.5 输出元素-单选按钮
- 通过标签
<input type="radio"> 定义; - 举例：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>表单学习</title></head><body> <h2>1、输出元素：文本域</h2> <form> please input height: <input type="text" height="height"><br> please input weight: <input type="text" weight="weight"><br> </form> <h2>2、输出元素：明码字段</h2> <form> please input password: <input type="password" name="pwd"><br> please input password again: <input type="password" name="pwd"><br> </form> <h2>3、输出元素：单选按钮</h2> <form> please select: <input type="radio" value="是">是<br> please select: <input type="radio" value="否">否<br> </form></body></html>
2.6 输出元素-复选框
- 通过标签
<input type="checkbox"> 定义； - 举例：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>表单学习</title></head><body> <h2>1、输出元素：文本域</h2> <form> please input height: <input type="text" height="height"><br> please input weight: <input type="text" weight="weight"><br> </form> <h2>2、输出元素：明码字段</h2> <form> please input password: <input type="password" name="pwd"><br> please input password again: <input type="password" name="pwd"><br> </form> <h2>3、输出元素：单选按钮</h2> <form> please select: <input type="radio" value="是">是<br> please select: <input type="radio" value="否">否<br> </form> <h2>4、输出元素：复选框</h2> <form> 你都在哪个网站写博客，请抉择：<br> <input type="checkbox" name="boke" value="CSDN">CSDN<br> <input type="checkbox" name="boke" value="博客园">博客园<br> <input type="checkbox" name="boke" value="开源中国">开源中国<br> <input type="checkbox" name="boke" value="简书">简书<br> <input type="checkbox" name="boke" value="掘金">掘金<br> <input type="checkbox" name="boke" value="思否">思否<br> <input type="checkbox" name="boke" value="GitHub">GitHub<br> <input type="checkbox" name="boke" value="集体网站">集体网站<br> </form></body></html>
2.7 输出元素-提交按钮
- 通过标签
<input type="submit"> 定义； - 单击确认按钮时，表单的内容会被传送到另一个文件；
- 表单的动作属性定义了目标文件的文件名；
- 举例：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>表单学习</title></head><body> <h2>1、输出元素：文本域</h2> <form> please input height: <input type="text" height="height"><br> please input weight: <input type="text" weight="weight"><br> </form> <h2>2、输出元素：明码字段</h2> <form> please input password: <input type="password" name="pwd"><br> please input password again: <input type="password" name="pwd"><br> </form> <h2>3、输出元素：单选按钮</h2> <form> please select: <input type="radio" value="是">是<br> please select: <input type="radio" value="否">否<br> </form> <h2>4、输出元素：复选框</h2> <form> 你都在哪个网站写博客，请抉择：<br> <input type="checkbox" name="boke" value="CSDN">CSDN<br> <input type="checkbox" name="boke" value="博客园">博客园<br> <input type="checkbox" name="boke" value="开源中国">开源中国<br> <input type="checkbox" name="boke" value="简书">简书<br> <input type="checkbox" name="boke" value="掘金">掘金<br> <input type="checkbox" name="boke" value="思否">思否<br> <input type="checkbox" name="boke" value="GitHub">GitHub<br> <input type="checkbox" name="boke" value="集体网站">集体网站<br> </form> <h2>5、输出元素：提交按钮</h2> <form name="input" action="xxx.py" method="GET"> 用户名: <input type="text" name="name"><br> 密 码: <input type="password" name="pwd"><br> <input style=background-color:yellow; type="submit" value="submit"><br> </form></body></html>
3 框架
3.1 语法
- 应用标签
<iframe>定义； - 作用是：通过框架能够在一个窗口中能够显示多个页面；
- 语法：
<iframe src="url"></iframe>
3.2 设置iframe宽高
- 应用height 和 width 属性用来定义iframe标签的高度与宽度；
- 默认为像素单位，也可应用比例；
- 举例：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>框架学习</title> </head> <body> <iframe name="csdn" src="https://blog.csdn.net/NoamaNelson" width="300" height="300"></iframe> <iframe name="csdn" src="https://blog.csdn.net/NoamaNelson" width="300" height="300"></iframe> <iframe name="csdn" src="https://blog.csdn.net/NoamaNelson" width="300" height="300"></iframe> <br> <iframe name="csdn" src="https://blog.csdn.net/NoamaNelson" width="300" height="300"></iframe> <iframe name="csdn" src="https://blog.csdn.net/NoamaNelson" width="300" height="300"></iframe> <iframe name="csdn" src="https://blog.csdn.net/NoamaNelson" width="300" height="300"></iframe> <br> </body></html>
3.3 iframe边框移除
- 应用frameborder 属性定义iframe边框；
- 属性值为0，则示意移除边框；
- 举例：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>框架学习</title> </head> <body> <iframe name="csdn" src="https://blog.csdn.net/NoamaNelson" frameborder="0" width="300" height="300"></iframe> <iframe name="csdn" src="https://blog.csdn.net/NoamaNelson" width="300" height="300"></iframe> </body></html>
DENY：该网站页面不容许被嵌套；
SAMEORIGIN：该页面能够在雷同域名页面中被嵌套；
ALLOW-FROM uri：该页面能够在指定起源页面中进行嵌套。
4 色彩
4.1 色彩名
- HTML和CSS色彩标准定义有141个色彩名称（其中17个规范色彩）；
- 17规范色彩：彩色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色；
- 比方色彩名：Bule、Black等等；
4.2 色彩值
- 色彩值由十六进制来示意红、绿、蓝（RGB）；
- 每个色彩的最低值为 0(十六进制为 00)，最高值为 255(十六进制为FF)；
- 十六进制值的写法为 # 号后跟三个或六个十六进制字符。
4.3 色彩举例
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>色彩学习</title> </head> <body> <p style=background-color:yellow; >会当凌绝顶，</p> <p style=background-color:rgb(82,82,218); >一览众山小。</p> <p style=background-color:#FF0000>前两句是啥？。</p> </body></html>