静态网页-HTML
1.HTML介绍及基本结构(了解)
2.HTML中的常用标签(熟练运用)
3.CSS的引入方式(重点)
1.HTML介绍
1.1 HTML概念
HTML的英文全称是 Hyper Text Markup Language,即超文本标记语言;即除了文字之外还可以有视频、音频等内容
1.2 静态页面概念
常说的浏览器中的视觉效果,不需要与用户进行交互(浏览器对用户操作的操作做出的回应)动作,例如:用户点击登录,弹出登录框、订单点击支付会弹出支付框、搜索手表出现手表的列表等
1.3 浏览器内核(了解)
浏览器内核原名叫渲染引擎,用于根据指定的标准解析网页结构,将结构的文本、图片、链接、音频、视频等内容渲染到页面中。
浏览器名称 | 渲染引擎 |
---|---|
Chrome/Safari * | WebKit |
Firfox | Gecko |
IE | Trident |
Opera | Presto(最新的是Blink) |
本章课程中推荐使用Chrome或Firfox浏览器,减少兼容性问题的处理(Java课程中暂不考虑兼容性)
1.4 网页结构
通过F12或在页面中右键-审查元素等方式查看页面的HTML构建结构
<html>
<!--head中指定网页标题及要用到的样式、js或其他需要进行引入的内容-->
<head>
<!-- charset用于设置网页的统一字符编码 -->
<meta charset='utf-8'/>
<!-- 网页的标题(名称) -->
<title>第一个网页</title>
</head>
<body>
<!--body中写的都是要在网页中展示的内容-->
hello html!!
</body>
</html>
网页结构想要在浏览器上打开并被浏览器解析,需要文件的后缀为.html
1.5 开发工具
工具名称 | 工具logo | 下载地址 |
---|---|---|
Sublime Text | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZxBpLqO1-1688729842265)(./assets/st-logo.png)] | http://www.sublimetext.com/3 |
HBuilder | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4svb1m8n-1688729842266)(./assets/hbuilder-logo.png)] | https://www.dcloud.io/hbuilderx.html |
VS code | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CWCswUG3-1688729842266)(./assets/vscode-logo.png)] | https://code.visualstudio.com/Download |
WebStorm | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WfPmCUX1-1688729842267)(./assets/ws-logo.png)] | https://www.jetbrains.com/webstorm/download/ |
本课堂使用的是Hbuilder X/Visual Studio,因为在学习前端的网页框架的时候需要使用本地服务器,但是还没有学到JavaWeb课程,而HbuilderX/Visual Studio自带了服务器
2. HTML常用标签
前端页面中只有指定的标签才能被浏览器的内核解析,对于未知或自定义的标签浏览器会当成常规的文本识别
2.1 基础标签
2.1.1 标题标签
标题标签默认具有加粗效果,最小字体是16像素,最大是42像素
this is a normal text!
<!-- 注意点:在网页中默认字体大小最小为16px/1em,1em=16px -->
<!-- 标题标签 -->
<h1>一级标题标签,有加粗效果,字体比较大</h1>
<h2>二级标题标签,有加粗效果,字体比一级的小</h2>
<h3>三级标题标签,有加粗效果,字体比二级的再小点</h3>
<h4>四级标题标签,有加粗效果,字体比三级的再小点</h4>
<h5>五级标题标签,有加粗效果,字体比四级的再小点</h5>
<h6>六级标题标签,有加粗效果,字体比五级的再小点</h6>
<h7>没有该标签,但是浏览器依然可以解析,因为其符合标签的格式。所以不会报错,只是没有任何的效果</h7>
2.1.2 段落标签
段落标签包裹的内容代表是一个段落,但是呢,该段落没有任何的形式上的效果和语文中段落不一样,它仅仅只是有这么一个段落的含义而已
<p>
我是一个段落,但是没有任何的特点,只具备段落的含义而已
</p>
2.1.3 列表标签
将内容以列表的形式按从上往下进行排列,开发需要自定义样式,此处只针对标签演示学习
<!-- 无序列表,没有顺序,ul只是语义上表示其是一个列表标签,但是里面是没有内容的,内容要通过li标签来书写-->
<ul type="disc">
<li>马克杯</li>
<li>笔记本</li>
<li>麦克风</li>
</ul>
<!-- 有序列表,带有顺序,type指定排序类型,start指定开始的位置 -->
<h5>热搜排行榜</h5>
<ol type="A" start="3">
<li>新冠疫情</li>
<li>外交部发言回击</li>
<li>中国台湾出现5.8级地震</li>
</ol>
<!-- 自定义列表 dt相当于标题 dd相当于是描述 -->
<dl>
<dt>新冠疫情</dt>
<dd>1、成都出现新冠疫情</dd>
<dd>2、出现疫情后所有相关人员已经进行了隔离及检测</dd>
<dt>中国台湾</dt>
<dd>1、台湾是中国的宝岛</dd>
<dd>2、想台独想了很多年,也只能想想</dd>
</dl>
2.2 图片标签
用于引入图片在网页中进行显示,开发常用,重点注意其相对路径的使用方式
<!--
src:用于指定图片所在的路径
相对路径:图片相对于HTML文件所在的位置
./表示在当前目录下
../表示返回上一级目录
绝对路径:指的是图片在电脑上的存储路径(包含到了盘符路径)
alt:用于作为图片加载失败时的文字提示
title:当鼠标在图片上悬浮时显示的提示(title属性是所有的标签都具备的一个属性)
width:设置图片的宽度
当仅设置宽或者高时 另外一个属性会等比进行设置
height:设置图片的高度
-->
<img src="./assets/image.jpg" alt="加载中..." title="大鱼海棠" width="100px" height="100px"/>
2.3 超链接标签
超链接就是网页中常用的用于页面跳转的标签,还可以用于锚点,例如:网页中常见的返回顶部效果
2.3.1 超链接跳转
<!--
href:指定要跳转的网页链接 如果没有href属性将会失效
target:指定新窗口的打开方式
_blank:代表打开一个新窗口
_top:在当前窗口中打开
-->
<a href="http://www.baidu.com" target="_top" title="http://www.baidu.com">点击访问百度</a>
<hr>
<!-- 以图片作为跳转的方式 -->
<a href="http://www.baidu.com"><img src="./assets/image.jpg" alt=""></a>
<hr>
<!-- 当在设置超链接时,此时还不确定要跳转的链接地址,使用#作为占位符,代表当前页面 -->
<a href="#">跳转到指定服务器地址</a>
2.3.2 锚点
锚点的使用需要满足两个点:一是要有跳转的标记点,二是可以进行跳转
常见举例
1.网页中常见的返回顶部功能
2.火影中四代火影的瞬雷术
<!--页面A中指定位置-->
<!-- 做个标记 -->
<a id="position"></a>
<!--页面B中进行跳转-->
<a href="./超链接-跳转.html#position">回到超链接-跳转的页面</a>
2.4 table表格
2.4.1 表格语法
和办公软件Excel表格是类似的,都有行(tr)和列(td),行及列都可以进行合并操作
<!-- 简易的简历表 -->
<table border="1px" rules="all" cellspacing="0" align="center" width="50%">
<tr>
<td width="20%">姓名</td>
<td width="20%"></td>
<td width="20%">专业</td>
<td width="20%"></td>
<!-- rowspan表示跨行操作,值也包含了本身所在的行 -->
<td width="20%" rowspan="2"></td>
</tr>
<tr>
<td>出生日期</td>
<td></td>
<td>联系方式</td>
<td></td>
</tr>
<tr>
<td>籍贯</td>
<td colspan="4"></td>
</tr>
<tr>
<td colspan="5" align="center">工作经历</td>
</tr>
<tr>
<td colspan="5" height="100px"></td>
</tr>
<tr>
<td colspan="5" align="center">教育经历</td>
</tr>
<tr>
<td>起止时间</td>
<td colspan="2">学校名称</td>
<td colspan="2">证明人</td>
</tr>
<tr>
<td height="40px"></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td height="40px"></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="5" height="120px">备注</td>
</tr>
</table>
表格通常会有对应的头部信息、具体的内容信息、还有一些底部的备注,此时就需要考虑一个问题
如果不同区域中的位置因为跨行或跨列被占据了,那么整个表格都会发生错乱;为了避免出现跨行或跨列超出区域的问题,提供了区域划分的标签:thead、tbody、tfooter,内容默认都在tbody中
<!-- 表格中默认会将所有的内容都放在一个tbody中 -->
<table border="1px" cellpadding="0" cellspacing="0" align="center" width="50%">
<thead>
<tr>
<th rowspan="2">编号</th>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>福欧文</td>
<td>男</td>
</tr>
<tr>
<td>1</td>
<td>福欧文</td>
<td>男</td>
</tr>
</table>
2.4.2 表格优缺点
优点
1.布局简单(因为就是纯表格的区域划分)
2.样式统一(只要确认好第一行的样式,后面的都会跟着变)
缺点
维护的时候超级麻烦(表格中有跨行和跨列的操作,一旦需要添加或者删除某一行或某一列的时候,相关联的所有的合并操作都需要重来)
2.4.3 表格应用场景
布局简单,变动的可能性比较小的情况下考虑使用表格
例如:登录、注册页,百度新闻的热搜新闻词模块
2.5 form表单 *
2.5.1 表单中的基础标签
表单通常用于让用户能够进行输入操作使用的,例如常见的登录、搜索、注册、图片上传等等
表单是让用户进行信息输入的,将输入的数据提交到服务器上,服务器再根据提交的数据进行分析验证反馈结果
action:指定服务器地址
method:指定表单数据的提交方式
get:默认的提交方式,get方式提交的数据会在地址栏中显示出来,很不安全,所能提交的数据量比较小,效率高
post:效率低,安全,携带大量的数据,不会在地址栏中显示
开发的过程中post方式使用的较多,考虑安全问题注意:表单中的数据想要提交,一定要有name属性存在
表单中所有的内容都是通过以下三个标签组成的:
input、textarea、select
<h1 align="center">注册页面</h1>
<table align="center">
<!--
定义这是表单,表单是用于数据提交
action:提交到后台的请求路径(自己写的后台)
method:提交到后台的请求方式
post: 不会把提交的内容在浏览器地址栏中显示,安全,提交的内容理论上来是无限
get:xxx/?username11=jack&passwrold22=123
把提交的内容在浏览器地址栏中显示,不安全,对内容有限制一般为1kb,提交的内容有限
type:表示当前输入框是什么类型
name:表示给这个输入框起的名字(也是用于后台提交的名字)
placeholder:输入框中提示
title:鼠标悬浮时显示提示
autocomplete:关闭输入框中已提交历史记录
maxlength:设置当前输入框的最大长度(仅仅表示长度)
value:当前输入框中的默认值
readonly:设置当前输入框为 只读状态,但不影响数据提交
disabled:设置当前输入框为 不可用状态,不能数据提交
-->
<form action="xxx" method="get">
<tr>
<td>用户名:<font color="red">*</font></td>
<td><input type="text"
name="username11"
placeholder="请输入用户名"
title="请输入用户名"
autocomplete="off"
maxlength="3"
value="小江"
readonly="readonly"
disabled="disabled"/></td>
</tr>
<tr>
<td>密 码:<font color="red">*</font></td>
<td><input type="password" name="passwrold22" placeholder="请输入密码" /></td>
</tr>
<tr>
<td><input type="submit" value="注册"></td>
<td><input type="reset"></td>
</tr>
</form>
</table>
2.5.2 表单中的扩展标签
<form action="" method="">
文本输入框:<input type="text" name="username" /><br>
密码输入框:<input type="password" name="pwd" /><br>
日期:<input type="date" name="date" /><br>
月:<input type="month" name="month"/><br>
日期日分秒:<input type="datetime-local" name="local" /><br>
数据:<input type="number" name="number"/> <br>
多选框:
<input type="checkbox" name="box" value="吃饭"/>吃饭
<input type="checkbox" name="box" value="睡觉"/>睡觉
<input type="checkbox" name="box" value="打豆豆"/>打豆豆
<input type="checkbox" name="box" value="敲代码" checked="checked"/>敲代码<br>
单选框:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女
<input type="radio" name="sex" value="人妖" />人妖<br>
文件上传:<input type="file" name="file"/><br>
提交按钮:<input type="submit" value="登录"/><br>
重置按钮:<input type="reset" /><br>
按钮:<input type="button" id="button" value="点我啊"/>
<button>我是一个button</button><br>
隐藏域:<input type="hidden" name="hidden" /><br>
下拉框:
<select>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="郑州" selected="selected">郑州</option>
<option value="杭州">杭州</option>
</select><br>
文本域:<textarea rows="10" cols="30"></textarea>
</form>
Label标签
<input type="checkbox" name="box" value="吃饭" id="a"/> <label for="a">吃饭</label>
<input type="checkbox" name="box" value="睡觉" id="b"/> <label for="b">睡觉</label>
<input type="checkbox" name="box" value="打豆豆"/>打豆豆
<input type="checkbox" name="box" value="敲代码" checked="checked"/>敲代码<br>
2.6 iframe标签
后台管理的前台门户通常都是以单页面为主实现的,此时需要进行页面内容的嵌套,iframe标签可以在一个页面中嵌套其他页面的内容
<!-- 引入其他页面
frameborder:控制是否显示边框线 1显示 0不显示
scrolling:控制是否显示滚动条 yes显示 no不显示 auto根据页面大小浏览器自动控制
-->
<iframe src="../day01/常用标签01.html" width="100%" height="800px" frameborder="0" scrolling="auto"></iframe>
<a href="aa.html" target="myiframe">教职员工</a>
<a href="bb.html" target="myiframe">在校学生</a>
<a href="cc.html" target="myiframe">毕业校友</a>
<iframe frameborder="0" scrolling="auto" src="aa.html" name="myiframe" width="1000px" height="600px"></iframe>
3. 标签划分及嵌套规则
3.1 标签划分
从行业的官方规范来讲,对标签的划分分两种
块元素:单独占整行(自带换行符),可以设置宽高属性的
行元素:可以在同一行显示,设置宽高不生效
目前行业中的程序员喜欢的划分,分三种
块元素:单独占整行(自带换行符),可以设置宽高属性的
行元素:可以在同一行显示,内容撑开元素宽高,设置宽高不生效
行内块元素:既可以设置宽高,也可以在同一行显示(img-本身自带了宽高属性,display属性控制)
3.2 嵌套规则
a.行元素之间可以互相嵌套,行元素中不能嵌套块元素(html中是可以的,但是理论上来讲是不允许的)
b.块元素中可以嵌套任意的行元素,块元素之间也可以互相嵌套,但是有两种标签需要注意
p标签中是不允许嵌套其他任意的块元素
h系列的标签是不能互相嵌套(因为每个h标签都有默认的字体大小)
<span>价格:<strong style="color: red;">998</strong>元</span>
<hr>
<p>
<a href="http://news.baidu.com">百度新闻</a>
<a href="http://www.baidu.com">百度首页</a>
</p>
<hr>
<div>
<p>在div中嵌套任意的块元素是很常见的</p>
</div>
<p>
<div>在p标签中嵌套任意的块元素都会发生页面结构的变化</div>
</p>
<h3>
<h2>在一个小的字体中嵌套了一个大的字体</h2>
</h3>
本章小结
1.网页基本结构的组成需要了解,方便后期JavaScript中对DOM结构进行操作
2.图片标签的相对路径使用及超链接的跳转使用要熟练
3.表单的action及method属性要掌握,input标签注意其name属性一定要存在
4.标签的嵌套规则没有明确的要求,只是根据其特征从理论上进行划分从而规范开发
n>价格:998元
在div中嵌套任意的块元素是很常见的
在一个小的字体中嵌套了一个大的字体
```本章小结
1.网页基本结构的组成需要了解,方便后期JavaScript中对DOM结构进行操作
2.图片标签的相对路径使用及超链接的跳转使用要熟练
3.表单的action及method属性要掌握,input标签注意其name属性一定要存在
4.标签的嵌套规则没有明确的要求,只是根据其特征从理论上进行划分从而规范开发