目录
1.对HTML的认识：
-
简介：
HTML，全称“Hyper Text Markup Language（超文本标记语言）”。是一种标记语言，用来描述网页、HTML 文档包含了HTML 标签及文本内容。
-
HTML基本结构：
<!DOCTYPE <!DOCTYPE html> ---- 文档声明
<html> ---- 网页的开始
<head> ----页头。代表页面的“头”，定义一些特殊内容（其中就有<title>--定义网页标 </head> 题），这些内容往往都是“不可见内容”（在浏览器不可见）。
<body> ----页身。代表页面的“身”，定义网页展示内容，这些内容往往都是“可见内容”
</body> （在浏览器可见）。
</html> ---- 网页的结束
-
常见编码字符集：
- UTF-8 ---通用字符集
- GB2312 ---简体中文字符集
- GBK ---是GB2312的后续更新，添加了更多的汉字和特殊的符号
- BIG5 ---繁体中文字符集
-
注释：
表示：<!-- 注释内容 -->
快捷键：选中部分 Ctrl+/
-
转义字符：
| 源码： | 效果： |
|  ； | 空格 |
| < | < |
| > | > |
| ¥ | ￥ |
| " | " |
| © | © |
| ® | ® |
| ± | ± |
| ‰ | ‰ |
| ÷ | ÷ |
2.段落与文字
1）.文本标签：
| 标签： | 说明： |
| <h1~6> </h1~6> | 标题标签。段落号从小到大，标题显示依次变小。 |
| <p> </p> | 段落标签 |
| <br> | 用于换行 |
| <div> </div> | 盒子（分割）（属于块元素） |
| <hr> </hr> | 水平分割线。可以在属性中修改线条的大小。 |
| <span> </span> | 标准的行内标签。只占据内容部分，不会自动换行，直到铺满一行。 |
| <pre> <pre/> | 不换行标签(通过拉伸窗口宽度实现) |
- 标题标签示例：
-
分割线示例：
2）.文本格式化（修饰）：
- 标签：
| 标签： | 说明： |
| <b> </b> | 加粗文字 |
| <strong> </strong> | 加粗（强调、加重语气） |
| <i> </i> | 斜体 |
| <em> </em> | 定义着重文字 |
| <u> </u> | 文字下划线 |
| <del> </del> | 定义删除字 |
| <big> </big> | 大号字体 |
| <small> </small> | 小号字体 |
| <sub> </sub> | 下标文字（脚标） |
| <sup> </sup> | 上标文字（角标）、（几次幂） |
| <ins> </ins> | 嵌入字（字体变小，有下划线） |
| <center> </center> | 定义居中的内容 |
| <font> </font> | 定义字体 |
-
属性：
| 属性： | 说明： |
| align <p align=" ? "> </p> | 定义文本对齐方式。?：left、center、right |
| color <font color=" ? "> </font> | 修饰字体颜色。?: 用单词或色号 |
- 例:
- 标签：
<!DOCTYPE html>
<html>
<head>
<title>标签</title>
<meta charset="UTF-8">
</head>
<body>
<p>这是一段文字</p>
<b>加粗啦</b><br>
<strong>我也加粗哦</strong><br>
<i>被风吹歪了</i><br>
<em>我是着重部分</em><br>
<u>我有底唉</u><br>
<del>被淘汰</del><br>
<big>大号字</big>
<small>小号字</small>
<p>sin<sub>x</sub></p>
<p>2<sup>8</sup></p>
<ins>我是内嵌</ins>
<center>我在中心</center>
</body>
</html>
- 属性：
<!DOCTYPE html>
<html>
<head>
<title>属性</title>
<meta charset="UTF-8">
</head>
<body>
<p align="left">left居左</p>
<p align="center">center居中</p>
<p align="right">right居右</p>
</body>
</html>
3.表单标签
1）.form:
- 用于为用户输入创建 HTML 表单
- 表单能够包含 input、textarea、select标签，比如文本字段、复选框、单选框、提交按钮等等,用于向服务器传输数据
- 包涵了action属性---取值：文件路径
- name---取值：字符串（表单名称）
- method---取值：请求方式--get、post（用来表明表单提交的方式）
get和post区别：
get：不安全，会将用户名和密码暴露在地址栏上，后台接收数据
post：相对安全，后台接收数据
| 属性 | 值 | 描述 |
|---|---|---|
| action | URL | 规定当提交表单时向何处发送表单数据。 |
| enctyp | 见说明 | 规定在发送表单数据之前如何对其进行编码。 |
| method | get、post | 规定用于发送 form-data 的 HTTP 方法。 |
| name | form_name | 规定表单的名称。 |
| novalidate | novalidate | 如果使用该属性，则提交表单时不进行验证。 |
2）.input：
- 根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
- 语法格式：
<input type = "元素类型" id = "客户唯一标识符">
- <lable>标签：
<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
- type属性的取值：
| type = "text" | 文本框(单行) |
| type = "password" | 密码框 |
| type = "radio" | 单选按钮 |
| type = "chexbox" | 多选按钮 |
| type = "submit" | 提交按钮 |
| type = "reset" | 复位按钮、重置按钮 |
| type = "button" | 普通的按钮 |
| type = "file" | 上传文件 文件域 |
| type = "hidden" | 隐藏域 用户在页面上不可见的内容 提交用户不可以看见的一些信息 |
| type = "email" | 邮箱 |
| type = "image" | 图像按钮 |
| type = "date" | 日期 |
| type="datetime-local" | 日期+时间 |
| type="time" | 时间 |
| type="range" | 进度条 |
- input的其他属性：
| name = "元素名称" | 定义 input 元素的名称 |
| checked | 默认选择 |
| readonly | 字段只读不能修改 |
| disabled | 表示input禁用 不可点击 |
| autofocus | 默认光标的位置 |
| required | input不能为空白提交 |
| size | 定义输入字段的宽度 |
| maxlength | 规定输入字段中的字符的最大长度 |
| value | 规定 input 元素的值 |
- 示例：
<body align="center">
<form action="demo01.txt">
文本框:<input type="text" name="firstname" value="姓名"><br>
密码:<input type="password" name="lpassword" value="password"><br>
单选:<input type="radio" value="男" name="gender" checked>男
<input type="radio" value="女" name="gender">女<br>
多选:
<input type="checkbox" value="subject" name="subject">物理
<input type="checkbox" value="subject" name="subject">历史
<input type="checkbox" value="subject" name="subject">地理
<input type="checkbox" value="subject" name="subject">生物<br>
邮箱:<input type="email"><br>
时间:<input type="datetime-local"><br>
<br>
<input type="reset" value="复位">
<input type="submit" value="提交">
</form>
<p>如果您点击提交，表单数据会被发送到名为 demo01.txt 的页面。</p>
</body>
3）.select：
- select 元素表示下拉选择框,可创建单选或多选菜单。
- <select> 元素中的 <option> 标签用于定义列表中的可用选项。
<select multiple="multiple" size="可见列表项的数目"> <option value...> ？？？</option> </select>
- select属性：
| 属性 | 值 | 描述 |
|---|---|---|
| autofocus | autofocus | 规定在页面加载后文本区域自动获得焦点。 |
| disabled | disabled | 规定禁用该下拉列表。 |
| form | form_id | 规定文本区域所属的一个或多个表单。 |
| multiple | multiple | 规定可选择多个选项。 |
| name | name | 规定下拉列表的名称。 |
| required | required | 规定文本区域是必填的。 |
| size | number | 规定下拉列表中可见选项的数目。 |
- option属性：
| 属性 | 值 | 描述 |
|---|---|---|
| disabled | disabled | 规定此选项应在首次加载时被禁用（不可选）。 |
| label | text | 定义当使用 <optgroup> 时所使用的标注。 |
| selected | selected | 规定选项（在首次显示在列表中时）表现为选中状态。 |
| value | text | 定义送往服务器的选项值。 |
- 示例：
<body>
<form>
请选择您所在的城市：
<select >
<option selected="selected" disabled>请选择</option>
<option>北京</option>
<option>重庆</option>
<option>上海</option>
<option>广州</option>
</select>
</form>
</body> 
4）.textarea：
- <textarea> 标签定义多行的文本输入控件。
- 文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
- 可以通过 cols（文本域的宽度） 和 rows （文本域的高度）属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。
- 注释：在文本输入区内的文本行间，用 "%OD%OA" （回车/换行）进行分隔。
<textarea name = " " cols = " " rows = " ">内容</textarea>
- 示例：
<textarea cols="30" rows="8">hello world ！！！</textarea>
4.链接
1）.超链接使用a标签：
格式：<a href="链接地址" target="目标窗口的打开方式"> </a>
- <a>标签target属性
target属性值 说明 _self 默认方式，即在当前窗口打开链接 _blank 在一个全新的空白窗口中打开链接 _top 在顶层框架中打开链接 _parent 在当前框架的上一层里打开链接 farmename 在指定的框架中打开被链接文档
- 在<body>中对超链接的修饰：
| 属性： | 作用： |
| Text | 文本颜色 |
| link | 超链接文本的颜色 |
| vlink | 访问过后的超链接的文本颜色 |
| Alink | 激活超链接文本的颜色 |
| bgcolor | 背景颜色 |
| background | 背景图片 一般不建议背景使用图片 |
在所有浏览器中，链接的默认外观是：
- 未被访问的链接带有下划线而且是蓝色的
- 已被访问的链接带有下划线而且是紫色的
- 活动链接带有下划线而且是红色的
- 示例：
<body>
<a href="https://www.baidu.com/">
<form>
<input type="button" value="点击我">
</form>
</a>
</body> 
- 锚点：
- 锚点：网页制作中超级链接的一种，又叫命名锚记。
- 使用命名锚记可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。
- 示例：
<body>
<h3>儒林外史</h3>
<a href="#01"><h5>第一章</h5></a>
<a href="#02"><h5>第二章</h5></a>
<a href="#03"><h5>第三章</h5></a>
<a href="#04"><h5>第四章</h5></a>
<a href="#05"><h5>第五章</h5></a>
<a href="#06"><h5>第六章</h5></a>
<p>
<a id=“01”>第一章</a><br>
<a id=“02”>第二章</a><br>
<a id=“03”>第三章</a><br>
<a id=“04”>第四章</a><br>
<a id=“05”>第五章</a><br>
<a id=“06”>第六章</a><br>
.........
</p>
</body> 
5.图像
1）.img：
- img 元素向网页中嵌入一幅图像。
- 请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。
- <img> 标签有两个必需的属性：src 属性 和 alt 属性。
格式：<img src="图像的文件地址" alt="图片显示不出来时的提示文字" >
其他属性：
| title | 鼠标移到图片上悬停时的的提示文字 |
| width 和 height | 控制图片的大小 单位可以使用px、 % |
| border | 边框 默认边框的取值0 没有边框 >=1 数字越大边框就越大 （大小指的是边框的粗细） |
| align | 位置 指的是文字和图片的位置 取值 center left right bottom middle top,默认的下对齐 |
常见的图片格式：
.jpg、.png和.gif：
- JPG可以很好处理大面积色调的图像，如相片、网页一般的图片。
- PNG格式图片体积小，而且无损压缩，能保证网页的打开速度。最重要的是PNG格式图片支持透明信息。PNG格式图片可以称为“网页设计专用格式”。
- GIF格式图片图像效果很差，但是可以制作动画
路径：
相对路径：指的是同一个网站下，不同文件之间的的位置定位。引用的文件位置是相对当前文件的位置而言，从而得到相对路径。
绝对路径：指的是文件的完整路径。
- 示例：
<body>
<img src="../mexp92.jpg" alt="古楼" title="古楼" width="150px" height="168px"border="1"><br>
</body>
2）.图位：
即带有可点击区域的图像映射
<map id="">
<area coords="坐标值和大小" href="链接路径" alt=""> </area>
</map>
其他属性shape：
- 用于定义图像映射中对鼠标敏感的区域的形状
| default | 规定全部区域。 |
| rect或 rectangle | 定义矩形区域。 |
| circ或 circle | 定义圆形。 |
| poly或 polygon | 定义多边形区域。 |
- 示例：
<body>
<p>找猫咪</p>
<img src="../PHOTO/mexp92.jpg" alt="古楼" title="古楼" width="326px" height="486px"border="1" usemap="#building"><br>
<map name="building">
<area shape="circle" coords="327,296,100" href="../PHOTO/mexp46.jpg">
</area>
</map>
</body> 
——> 
3）.多媒体：
audio音频标签：
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放。 |
| muted | muted | 规定视频输出应该被静音。 |
| preload | preload | 如果出现该属性，则音频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。 |
video视频标签：
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| height | pixels | 设置视频播放器的高度。 |
| width | pixels | 设置视频播放器的宽度。 |
| loop | loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放。 |
| muted | muted | 规定视频的音频输出应该被静音。 |
| poster | URL | 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。 |
| preload | preload | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。 |
| src | url | 要播放的视频的 URL。 |
- 示例：
<body>
<audio src="../play/刘大壮 - 信仰 [mqms2].mp3" controls autoplay></audio>
<video src="..\play\Hw19.mp4" controls autoplay height="180" width="156"></video>
</body>
6.表格
1）.布局：
- 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> <th>标签定义）。tbody --- 主干，tfoot----- 尾、页脚
- 表头单元格 - 包含表头信息（由 th 元素创建）
- 标准单元格 - 包含数据（由 td 元素创建）
- 可以包含文本、图片、列表、段落、表单、水平线、表格等等。
table的属性：
| 属性 | 值 | 描述 |
|---|---|---|
| border | pixels | 规定表格边框的宽度。 |
| width、height |
| 规定表格宽度、高度。 |
| align | left、center、right | 规定表格位置。 |
| bgcolor、background | 规定表格背景颜色、图像。 | |
| cellpadding |
| （边距）规定单元边沿与其内容之间的空白。 |
| cellspacing |
| （间距）规定单元格之间的空白距离。 |
| frame |
| 规定外侧边框的哪个部分是可见的。 |
| 规定内侧边框的哪个部分是可见的。 | |
| summary | text | 规定表格的摘要。 |
- 示例：
<body>
<table border="1" width="300" height="100" cellpadding="10" cellspacing="10">
<tr bgcolor="#999999">
<th>衬衫</th>
<th>大衣</th>
<th>皮带</th>
</tr>
<tr bgcolor="#cccccc">
<td>$9.15</td>
<td>$100</td>
<td>$10</td>
</tr>
</table>
</body>
2）.表格嵌套：
<body>
<table width="300" border="1">
<tr>
<td width="100"> </td>
<td width="200">
<table width="200" border="1" align="center">
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100"> </td>
<td width="100"> </td>
</tr>
</table>
</body>
3）.表格合并：
- 单元格跨行---- 合并的是行
在单元格元素<td>中添加属性rowspan="n"，表示该单元格垂直方向对应位置合并
<body>
<table width="300" border="1">
<tr>
<td rowspan="2"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
- 单元格跨列-----合并的是列
在单元格元素<td>中添加属性colspan="n"，表示该单元格在水平方对应位置合并
<body>
<table width="400" border="1">
<tr>
<td> </td>
<td colspan="2" align="center"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
7.列表
1）.有序列表：
- <ol> </ol> 标签定义有序列表。
- <ol>与<li> 标签搭配使用（定义列表项目）
属性：
| 属性 | 值 | 描述 |
|---|---|---|
| reversed | reversed | 规定列表顺序为 降序。(9,8,7...) |
| start | number | 规定有序列表的 起始值。 |
| type | 1、A、a、I、i | 规定在列表中使用的标记类型。 |
- 示例：
正序：
<body>
<ol type="1" start="1" >
<li>数学</li>
<li>物理</li>
<li>化学</li>
<li>生物</li>
<li>地理</li>
<li>政治</li>
<li>历史</li>
<li>五年高考三年模拟</li>
</ol>
</body>
倒序：
<body>
<ol type="1" start="9" reversed>
<li>数学</li>
<li>物理</li>
<li>化学</li>
<li>生物</li>
<li>地理</li>
<li>政治</li>
<li>历史</li>
<li>五年高考三年模拟</li>
</ol>
</body>
2）.无序列表：
<ul> </ul> 标签定义无序列表。
<ul>的属性--type：
- 示例：
<body>
<ul type="circle">
<li>数学</li>
<li>物理</li>
<li>化学</li>
<li>生物</li>
<li>地理</li>
<li>政治</li>
<li>历史</li>
<li>五年高考三年模拟</li>
</ol>
</body>
3）.数据列表：
<dl></dl> 标签定义了定义列表（definition list）。
<dl> 标签用于结合 <dt>（定义列表中的项目）和<dd>（描述列表中的项目）。
- 示例：
<body>
<dl> <!--数据列表标签 主要显示的是有标题的数据-->
<dt>这是标题</dt> <!--dt是标题-->
<dd>这是内容1</dd> <!--dd是数据标签-->
<dd>这是内容2</dd>
<dd>这是内容3</dd>
<dd>这是内容4</dd>
<dd>这是内容5</dd>
<dd>这是内容6</dd>
<dd>这是内容7</dd>
</dl>
</body>
8.多窗口框架
- <frameset> 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。
- 在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。
- <frame> 标签定义 frameset 中的一个特定的窗口（框架）。
注意：如果要使用frameset标签，就不能和body标签连用
<frameset cols=" , , "> <frame src="" /> </frameset>
| 属性 | 值 | 描述 |
|---|---|---|
| cols | pixels、%、* | 定义框架集中列的数目和尺寸。 |
| rows | pixels、%、* | 定义框架集中行的数目和尺寸。 |
- 示例：
<!DOCTYPE html>
<html>
<head>
<meta cherset="utf-8">
<title></title>
</head>
<frameset rows="15%,*,20%">
<frame src="../PHOTO/mexp08.jpg">
</frame>
<frameset cols="25%,*">
<frame src="../PHOTO/mexp08.jpg"></frame>
<frame src="../PHOTO/mexp08.jpg"></frame>
</frameset>
<frame src="../PHOTO/mexp08.jpg"></frame>
</frameset>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
