共计 8263 个字符，预计需要花费 21 分钟才能阅读完成。
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 色彩
- HTML 色彩由红色、绿色、蓝色混合而成；
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>正文完