前端初学大纲02~（第一篇 Web页面制作基础）
时间：2023-10-06 01:00:02 | 来源：网站运营
时间：2023-10-06 01:00:02 来源：网站运营
前端初学大纲02~（第一篇 Web页面制作基础）：
第一章 HTML标签介绍
• HTML 标签是由<>包围的关键词，例：<html>
• HTML 标签通常成对出现，分为标签开头和标签结尾，例：<html> </html>
• 有部分标签是没有结束标签，成为单标签，单标签内必须用 / 结尾，例：<br/>
• 页面中所有的内容，都要放在HTML标签中
• HTML标签主题分为三个部分
– 标签名称
– 标签内容
– 标签属性
• HTML 标签具有语义化
– 语义化：就是仅通过标签名就能判断出该标签的内容。
– 语义化的作用
• 网页结构层次更清晰。
• 更容易被搜索引擎收录。
• 更容易让屏幕阅读器读出网页内容。
• 标签的内容就是在一对标签内部的内容
• 标签的内容可以是其他标签
第二节 标签（元素）全局标准属性
在HTML规范中，规定了8个全局标准属性：
class属性
• 用于定义元素的类名。
id属性
• 用于指定元素的唯一id
• 要注意该属性的值在整个HTML文档中要具有唯一性
style属性
• 用于指定元素的行内样式
• 使用该属性后将会覆盖任何全局的样式设定
title属性
• 用于指定元素的额外信息
accesskey属性
• 用于指定激活元素（获得焦点）的快捷键。
tabindex属性
• 用于指定元素在tab键下的次序
dir属性
• 用于指定元素中内容的文本方向
• 属性值只有ltr或rtl两种，含义分别是left to right和right to left。
lang属性
• 用于指定元素内容的语言
第三节 HTML的全局事件属性
Window窗口事件
• onload：在页面加载结束之后触发。
• onunload：在用户从页面离开时发生，例如点击跳转，页面重载，关闭浏览器窗口等。
Form表单事件
• onblur：当元素失去焦点时触发。
• onchange：在元素的元素值被改变时触发。
• onfocus：当元素获得焦点时触发。
• onreset：当表单中的重置按钮被点击时触发。
• onselest：在元素中文本被选中后触发。
• onsubmit：在提交表单时触发。
• oninput：改变表单内容的时候触发
Keyboard键盘事件
• onkeydown：在用户按下按键时触发。
• onkeypress：在用户按下按键后，按着按键时触发。该属性不会对所有按键生效，不生效的有：ALT、CTRL、SHIFT、ESC
• onkeyup：当用户释放按键时触发。
Mouse鼠标事件
• onclick：当在元素上发生鼠标点击时触发。
• onblclick：当在元素上发生鼠标双击时触发。
• onmousedown：当在元素上按下鼠标按钮时触发。
• onmousemove：当鼠标指针移动到元素上时触发。
• onmouseout：当鼠标指针移出元素时触发。
• onmouseover：当鼠标指针移动到元素上时触发。
• onmouseup：当在元素上释放鼠标按钮时触发。
• Media媒体事件
• onabort：当退出时触发。
onwaiting：当媒体已停止播放但打算继续播放时触发。
第二章 HTML的标签（元素）
第一节 文本标签
段落标签 <p></p>
段落标签用来描述一段文字
标题标签 <hx></hx>
• 标题标签用来描述一个标题
• 标题标签总共有六个级别，由高到低分别是h1,h2,h3,h4,h5,h6
• <h1></h1>标签在每个页面中通常只出现一次
强调语句标签<em></em>
用于强调某些文字的重要性
更加强调标签<strong></strong>
和 <em>标签一样，用于强调文本，但它强调的程度更强一些
无语义标签<span></span>
<span>标签是没有语义。
短文本引用标签<q></q>
简短文字的引用。
长文本引用标签<blockquote></blockquote>
定义长的文本引用
换行标签<br/>
<br/>标签作用相当于word文档中的回车,起到文字换行的作用
第二节 多媒体标签
链接标签 <a></a>
图片标签 <img/>
视频标签<video></video>
• <video src="mov.mp4" controls="controls">
• Controls:是否有控制面板
• 目前video支持三种视频格式
– Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
– MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
– WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
音频标签<audio></audio>
<audio src="a01.mp3"></audio>
第三节 列表
无序列表标签<ul><li><li/></ul>
• ul-li是没有前后顺序的信息列表
• <ul><ul/>列表定义一个无序列表
• <li><li/>代表无需列表中的每一个元素
<ul>
<li>HTML<li/>
<li>CSS<li/>
<li>JavaScript<li/>
</ul>
有序列表<ol><li><li/></ol>
ol-li列表默认情况下，每个li在浏览器中都会显示一个数字，代表自己的序号
定义列表<dl></dl>
• 定义列表通常和<dt></dt>和<dd></dd>标签一起使用
• <dt></dt>定义列表中的项目
• <dd></dd>描述列表中的项目
<dl>
<dt>学习WEB前段需要掌握哪三种语言</dt>
<dd>需要掌握HTML，搭建网页结构</dd>
<dd>需要掌握CSS，用于修改网页结构的样式</dd>
<dd>需要掌握JavaScript，用于用户和计算机交互</dd>
</dl>
第四节 表格
表格标签<table></table>
表格的一行<tr></tr>
有几对tr, 表格就有几行。
表格的表头<th></th>
表格的头部的一个单元格，表格表头。
单元格<td></td>
• 表格的一个单元格，一行中包含几对<td><td/>，说明一行中就有几列。
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>25</td>
</tr>
<tr>
<td>小花</td>
<td>女</td>
<td>23</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>28</td>
</tr>
</table>
表格合并
• 同一行内，合并几列colspan=“2”
• 同一列内，合并几行rowspan="3"
•
第五节 表单标签系列
表单标签<form>
• <form></form>表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
• <form method="传送方式" action="服务器文件">
• action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)
• method ： 数据传送的方式（get/post）
输入标签<input/>
input是最重要的表单标签，重要属性包括：
• name：为文本框命名，用于提交表单，后台接收数据用。
• value：为文本输入框设置默认值。(一般起到提示作用)
• type：通过定义不同的type类型，input的功能有所不同（见下表）
•
type
功能说明
text
单行文本输入框
password
密码输入框（密码显示为***)
radio
单选框 （checked属性用于显示选中状态）
checkbox
复选框（checked属性用于显示选中状态）
file
上传文件
button
普通按钮
reset
重置按钮（点击按钮，会触发form表单的reset事件）
submit
提交按钮（点击按钮，会吃饭form表单的submit事件）
email
专门用于输入 e-mail
url
专门用于输入 url
number
专门用于number
range
显示为滑动条，用于输入一定范围内的值
date
选取日期和时间（还包含：month、week、time、datetime、datetime-local）
color
选取颜色
<button>按钮
button标签的功能与<input>按钮功能相同，button是双标签，内部可以嵌套其他行内元素。
下拉选择框<select></select>
<select>
<option value="看书">看书</option>
<option value="旅游" selected="selected">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
• <option value="提交值">选项</option>是下拉选择框里面的每一个选项
• selected：当某个option选项有这个属性时候，select默认选中这个选项
文本域 <textarea></textarea>
• 当用户想输入大量文字的时候，使用文本域
• cols ：多行输入域的列数。
• rows ：多行输入域的行数
第六节 其他语义化标签
盒子<div></div>
• 俗称为盒子，division（分割）
• 在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。
• 什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。
网页头部<header></header>
• HTML5新增语义化标签，定义网页的头部
• 主要用于布局，分割页面的结构
底部信息<footer></footer>
• HTML5新增语义化标签，定义网页的底部
• 主要用于布局，分割页面的结构
导航<nav></nav>
• HTML5新增语义化标签，定义一个导航
• 主要用于布局，分割页面的结构
文章<article></article>
• HTML5新增语义化标签，定义一篇文章
• 主要用于布局，分割页面的结构
侧边栏<aside></aside>
• 语义化标签，定义主题内容外的信息
• 主要用于布局，分割页面的结构
时间标签<time></time>
• 语义化标签，定义一个时间
第三章 页面结构与模块划分
第一节 网页结构
• 一个HTML文件是有自己固定的结构的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
• <!DOCTYPE html> 定义文档类型，告知浏览器用哪一种标准解释HTML
• <html></html>可告知浏览器其自身是一个 HTML 文档。
• <head></head>标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、<style>、<link>、<meta>等标签.
• <body></body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。
• <title></title>元素可定义文档的标题。
• <link>标签将css样式文件链接到HTML文件内
• <meta>定义文档的元数据，网页的元信息（charset=“utf-8” 国际编码类型）
第二节 模块划分
• 每个网页都是由不同的功能模块组成的，因此在将制作网页的时候，我们要将网页的每个功能模块分开
– 常见的企业网站，多由头部区，展示图片区域，主题区域，底部信息区域组成
• 网页拆分原则
– 由上到下
– 由内到外
• div header footer nav article aside等标签多用于模块划分
在线咨询
