前端html基础
学习目标
1.熟练掌握web开发标准
2.熟练编写html页面
3.熟练掌握html常见标签
第一章 html 概述
1.1 节 html 定义
html：超文本标记语言 (Hyper Text Markup Language) ；它的作用是控制页面的结构，页面的内容。
如下页面都内容是html开发的
1.2 节 web开发标准
为什么要指定web开发标准?
市场上有那么多浏览器，如果不规范一下前端开发标准的话会造出同一个页面不同浏览器渲染出的结果不一致
Web标准是由W3C和其他标准化组织制定的一系列标准的集合。主要包括结构、表现和行为三个方面。
- 结构标准：结构用于对网页元素进行整理和分类，咱们主要学的是HTML。
- 表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
- 行为标准：行为是指网页模型的定义及交互的编写，咱们主要学的是 Javascript
第二章、编写第一个html页面
2.1 节 编写第一个页面
【1】建立一个文件index.html
【2】使用记事本打开文件，并编写html页面
<HTML>
<head>
<title>第一个页面</title>
<meta charset="utf-8">
</head>
<body>
页面的内容
</body>
</HTML>
解释:
- HTML标签：作用所有HTML中标签的一个根节点。
- head标签： 文档的头部，可以处理页面的头部信息，如标题，编码，引入文件。
- title标签： 文档的标题
- meta标签: 指定浏览器以指定的编码解析该文件
- body标签：页面的内容 以后我们的页面内容 基本都是放到body里面的（比如文本、超链接、图像、表格和列表等等。）
【4】用浏览器打开该文件，查看效果
2.2 节 标签的语法
编写HTML页面中，带有“< >”符号的元素被称为HTML标签，html页面的结构标准由标签构成。常见的html标签如下：
- 围堵标签（双标签）<标签名> 内容 </标签名>，比如
<body>我是文字 </body> - 空标签（单标签）<标签名 />，比如
<br />,html5 可以省略
第三章 VS Code 软件
3.1节 VS Code介绍
Visual Studio Code（简称“VS Code” ） 是微软公司推出的一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补充，Git等特性，支持插件扩展等。
3.2 节 VS Code 安装
【1】下载VS Code ， 官网下载地址 https://code.visualstudio.com/
【2】安装，VS Code 安装和常规软件安装过程一样，只需要双击安装包，根据提示安装即可
3.3节 VS Code 使用
3.3.1 目录管理
VS Code 可以更高效的管理前端文件目录；为了更好的管理代码，我们建立一个web-workspace ，然后在web-workspace下存放每天的工程代码，如下所示：
接下来，我们使用VS Code 管理day01-html 目录，操作如下：
文件和目录操作如下：
3.3.2 主题设置
设置主题过程如下：
3.4 节 VS Code 插件
接下来我们安装一些常用的插件，常用功能插件如下：
安装过程如下：
注意：安装完插件一定要重启VS Code
第四章 html常见标签
html的标签非常多，我们只需要记住常用的就可以了，其他的可以查看帮助文档
4.1节 排版标签
排版标签有标题，段落，横线，换行等标签，可以对页面的文字标题段落进行合理的排版。
-
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>标题标签 -
<p> 文本内容 </p> -
<hr/>横线标签 -
<br/>换行标签
示例1：通过排版标签实现如下效果
参考代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>排版标签</title>
</head>
<body>
<h1>双11“剁手党”速度加倍，天猫769秒破500亿！看卸任后的马云，在台下笑呢</h1>
<!--span 没有具体语义的行内标签-->
<span>2019年11月11日 01:02:42来源：每日经济新闻</span>
<p>双11“剁手党”速度加倍，天猫769秒破500亿！看卸任后的马云，在台下笑呢</p>
<p>“双11”又来了，不知道你是否已经坐在电脑前摩拳擦掌，准备榨干自己的钱包呢？</p>
<p>零点一到，平日里天天喊着“剁手”的“败家”男女们就出动扫货，马云那边则忙着破纪录：</p>
<p>1分36秒，100亿 ，要知道，去年达到这个数字，用了2分05秒，前年用了3分01秒，2016年用了6分58秒……</p>
</body>
</html>
4.2 节 字体修饰标签
编写网页时，经常需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的字体的修饰标签，使文字以特殊的方式显示。
不建议用 b i s u标签修饰 字体 文本。一般 b i s u 用于字体图标修饰。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<strong>加粗</strong>
<em>斜体</em>
<del>过时</del>
<ins>下划线</ins>
</body>
</html>
4.3 节 图像标签
html中的任何内容都是通过标签实现的，图片也不例外，具体语法：<img src="图像URL" />；请分别用相对路径和绝对路径在页面引入一张图片。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片标签</title>
</head>
<body>
<!-- 相对路径 -->
<img src="../imgs/1.jpg" />
<!-- 绝对路径 -->
<img src="D:\java\web-workspace\day01-html\imgs\1.jpg" />
</body>
</html>
代码目录结构如下
4.4 节 超链接标签
在页面中通过点击一个按钮链接到另一个面叶的过程叫超链接。超链接标签语法如下:
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。
target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--本地相对路径-->
<a href="./1.排版标签.html" target="_self">html入门</a>
<!--网络路径-->
<a href="http://www.baidu.com" target="_blank">百度</a>
</body>
</html>
4.5 节 列表标签
什么是列表？把文字或图片按照一列一列有结构的显示出来就是列表，以下页面选中的内容都是用列表做的
列表标签分为
- 有序列表
- 无序列表
- 自定义列表
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--无序列表-->
<ul>
<li>洗衣机</li>
<li>电视</li>
<li>空调</li>
<li>冰箱</li>
</ul>
<!--有序列表-->
<ol type="a">
<li>洗衣机</li>
<li>电视</li>
<li>空调</li>
<li>冰箱</li>
</ol>
<!--自定义列表-->
<dl> 标签定义了定义列表（definition list）
<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
</dl>
<dl>
<dt>服务支持</dt>
<dd>售后政策</dd>
<dd>自助服务</dd>
<dd>相关下载</dd>
</dl>
</body>
</html>
4.6 节 表格标签
合并是表格特有的属性
表格，开发中有很多场景都需要使用表格，主要用于数据展示，示例如下：
表格标签是个比较复杂的标签，分为三层嵌套结构table表示一个表格，tr代表行，td代表列
创建表格的时候，必须先指定table标签，再在table标签中指定tr表示一个表格的行数，然后在每个tr标签中嵌套td表示每行的列数。 th是标题列
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格标签</title>
</head>
<body>
<!--table入门-->
<table border="1px">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>爱丽丝</td>
<td>女</td>
<td>30</td>
</tr>
<tr>
<td>路西法</td>
<td>男</td>
<td>29</td>
</tr>
<tr>
<td>莱恩</td>
<td>男</td>
<td>29</td>
</tr>
</table>
<hr />
<!--table加入样式-->
<table border="1px" cellspacing="0" width="800px" align="center" cellpadding="7px">
cellspacing 属性规定单元格之间的空间。
注释：请勿将该属性与 cellpadding 属性相混淆，cellpadding 属性规定的是单元边沿与单元内容之间的空间。
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>爱丽丝</td>
<td>女</td>
<td>30</td>
</tr>
<tr>
<td>路西法</td>
<td>男</td>
<td>29</td>
</tr>
<tr>
<td>莱恩</td>
<td>男</td>
<td>29</td>
</tr>
</table>
<hr />
<table border="1px" cellspacing="0" width="800px" align="center" cellpadding="7px">
HTML 表单中有两种类型的单元格：
表头单元格 - 包含表头信息（由 th 元素创建）
标准单元格 - 包含数据（由 td 元素创建）
th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>爱丽丝</td>
<td>女</td>
<td>30</td>
</tr>
<tr>
<td>路西法</td>
<td>男</td>
<td>29</td>
</tr>
<tr>
<td>莱恩</td>
<td>男</td>
<td>29</td>
</tr>
<tr>
<td colspan="3" align="center">首页 上一页 下一页 末页 当前2/5页，总共123条记录</td>
</tr>
</table>
</body>
</html>
效果：
综合案例：完成下图页面制作（提示：表格的嵌套）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人信息登记表</title>
<style>
</style>
</head>
<body>
<table align="center" border="1px" cellspacing="0" width="630px">
<tr>
<td>
<table border="1px" cellspacing="0">
<tr>
<td>
<table border="1px" cellspacing="0">
<tr height="40px">
<td width="65px">姓名</td>
<td width="75px"></td>
<td width="65px">性别</td>
<td width="105px"></td>
<td width="100px">出生年月日</td>
<td width="100px"></td>
</tr>
<tr height="40px">
<td>民族</td>
<td></td>
<td>籍贯</td>
<td></td>
<td>政治面貌</td>
<td></td>
</tr>
<tr height="40px">
<td>学历</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table border="1px" cellspacing="0">
<tr height="40px">
<td width="105px">所在单位</td>
<td width="212px"></td>
<td width="100px">职务</td>
<td width="100px"></td>
</tr>
</table>
</td>
<td>
<table border="1px" cellspacing="0">
<!--照片-->
<tr height="160px">
<td width="120px"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1px" cellspacing="0">
<tr height="70px">
<td width="105px">现居住地址</td>
<td width="312px"></td>
<td width="75px">联系电话</td>
<td width="150px"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1px" cellspacing="0">
<tr height="40px">
<td width="90px">资质证书</td>
<td width="540px"></td>
</tr>
<tr height="100px">
<td>家庭主要成员及工作单位</td>
<td></td>
</tr>
<tr height="385px">
<td>个人工作简历</td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
4.7 节 表单标签
网站在运行过程中，客户端浏览器需要和服务器进行数据交互，首先浏览器需要收集用户的提交数据。这个时候我们就要用到表单。如下所示
表单由三部分组成，表单域、表单控件、表单提示信息三部分组成。
- 表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
- 提示信息： 一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
- 表单域： 他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="http://www.baidu.com" method="get">
姓名<input type="text" name="username" value=""><br/>
手机号<input type="text" name="mobile" value=""><br/>
密码<input type="password" name="password" value=""><br/>
性别 男
<input type="radio" name="sex" value="nan"> 女
<input type="radio" name="sex" value="nv">
<br/> 爱好： 抽烟 <input type="checkbox" name="hobby" value="抽烟"> 喝酒 <input type="checkbox" name="hobby" value="喝酒"> 烫头 <input type="checkbox" name="hobby" value="烫头">
<br/> 个人描述：
<textarea name="description"></textarea><br/> 地址:
<select name="address">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
</select>
<br>
<input type="button" value="普通按钮">
<input type="submit" value="提交">
</form>
</body>
</html>
4.8 节 浮动框架
html 提供<iframe></iframe> 浮动框架标签,该标签的作用是提供一个局部的窗口，该局部窗口可以显示一个完整的页面;一般通过a标签链接一个页面，并通过target属性指定在局部窗口打开；
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动框架</title>
</head>
<body>
<a href="1.排版标签.html" target="myframe">在下方窗口打开</a>
<hr/>
<iframe name="myframe" width="800px" height="400px" src="2.字体修饰标签.html"></iframe>
</body>
</html>
效果：
4.9 节 特殊字符
在html中，有很多特殊字符表示着特殊的含义，常见特殊字符如下：
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>特殊字符</title>
</head>
<body>
<<br/> >
<br> &
<br> ©
<br> ™
<br> a b
<br>
</body>
</html>
效果：
第五章 总结
- web三要素是什么？
- 常见排版标签有哪些？
- 字体修饰标签有哪些？
- 如何表示一个图像？
- 如何表示一个超链接？
- 列表标签有哪些？
- 表格标签应用注意什么？
- 表单标签应用注意什么？
- 表单项类型有哪些？
- 什么是浮动框架？
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
