1、HTML概述
- HTML指的是超文本标记语言 (HyperText Markup Language)。
超文本:是指页面内可以包含图片、链接、声音,视频等内容。
标记:标签(通过标记符号来告诉浏览器网页内容该如何显示)。 - 声明
html4的文档声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
html5的文档声明：
<!DOCTYPE html>
<!-- <!DOCTYPE html>是声明html语言的版本，html5 -->
<!DOCTYPE html>
<!-- 根标签，所有内容写在根标签内 -->
<html>
<!-- 头标签，写对网页的设置 -->
<head>
<meta charset="utf-8">
<title>百度一下，你就知道</title>
<!-- 改变图标 -->
<link rel="icon" href="img/color.png">
</head>
<!-- 标签可以有属性，通过属性可以对标签修饰，设置属性在开始的标签中，属性名="属性值"-->
<body text="red" bgcolor="yellow">
<a href="https://www.baidu.com">百度</a>
<!-- 结构为：闭合标签（双标签）：<开始标签> 标签体内容</结束标签>
自闭合：完成某个特定的功能，没有标签体-->
<b>文字加粗</b><br>
<!-- br是换行 -->
<b>文字加粗</b>
</body>
</html>
2、HTML基本语法
- Head标签(标签)包含了所有的头部标签标签。
- 头部区域的标签标签为:
<title>, <style>, <meta>, <link>,<script>, <base>
<title>标签可定义网页的标题
<meta>标签可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部。
标题处添加图标：<link rel="icon" href="ico地址"> - HTML注释：<!—注释内容–> 注释后的内容不会显示在网页上。
- 标签：HTML中的标记指的就是标签。HTML使用标记标签来描述网页。
结构：
<标签名>标签内容</标签名> 闭合标签(有标签内容)
<标签名/> 自闭合标签 (无标签内容) - 标签属性：标签可以拥有属性。属性进一步说明了该标签的显示或使用特性。
如：<body text=”red”>
1、属性的格式：属性名 = “属性值”
2、属性的位置：<标签名 属性名 = “属性值“ >xxx</标签名>
3、添加多个属性：<标签名 属性名 = “属性值“ 属性名 = “属性值“ >xxx </标签名>
3、基本常用标签
- 标题标签
<h1></h1>…..<h6></h6> - 段落标签
<p></p> - 换行标签
<br/> - 列表
无序列表<ul><li></li></ul>
有序列表<ol><li></li></ol> - 超链接
<a></a> - 图像标签
<img/> - 特殊符号转义
• 在HTML中预留了一些字符。 这些预留字符是不能在网页中直接使用的。 比如< 和 >,我们不能直接在页面中使用< 和 >号，因为浏览器会将它解析为html签。
例如：<b>会被解析为b标签，空格,再多的空格都会当一个空格处理。 为了可以使用这些预留字符，我们必须在html中使用字符转义。
小于号<：<
大于号>：>
版权©：©
商标™：™
空格：
注册商标®：®
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用标题</title>
</head>
<body>
<!-- 1.标题标签，独占一行，块标签 -->
<h1>一级标题标签</h1>
<h6>标签标题一共六级</h6>
<!-- 2.段落标签，分段 -->
<p>2021年6月份，全国居民消费价格同比上涨1.1%。其中，城市上涨1.2%，农村上涨0.7%；
食品价格下降1.7%，非食品价格上涨1.7%；消费品价格上涨1.1%，服务价格上涨1.0%。
上半年，全国居民消费价格比去年同期上涨0.5%。</p>
<p>2021年6月份，全国居民消费价格同比上涨1.1%。其中，城市上涨1.2%，农村上涨0.7%；
食品价格下降1.7%，非食品价格上涨1.7%；消费品价格上涨1.1%，服务价格上涨1.0%。
上半年，全国居民消费价格比去年同期上涨0.5%。</p>
<!-- 3.换行标签 -->
abcd <br> efg
<!-- 4.有序列表<ol> <li></li><li></li> </ol>
无序列表<ul> <li></li><li></li> </ul> -->
<ol type="I">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<ul type="square" </ty>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<!-- 5.超链接 -->
<a href="http://www.baidu.com">打开百度</a><br>
<a href="http://www.baidu.com" target="_blank">在新窗口中打开百度</a><br>
<!-- 6.图片链接 alt是图片加载的时候，图片加载不出来的话就显示文字-->
<img src="../img/people.jpg" width="50" height="75" alt="图片加载中,你看不到" />
</body>
</html>
1、请用锚点及<a></a>标签实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>瞄点</title>
</head>
<body>
<a top></a>
<a href="#p1">Nike1</a>
<a href="#p2">Nike2</a>
<a href="#p3">Nike3</a>
<a href="#p4">Nike4</a>
<a href="#p5">Nike5</a>
<hr>
<p>
<a name="p1">产品1</a>
</p>
<img src="img/1.png" />
<hr />
<p>
<a name="p2">产品2</a>
</p>
<img src="img/2.png" />
<hr />
<p>
<a name="p3">产品3</a>
</p>
<img src="img/3.png" />
<hr />
<p>
<a name="p4">产品4</a>
</p>
<img src="img/4.png" />
<hr />
<p>
<a name="p5">产品5</a>
</p>
<img src="img/5.png" />
<hr />
<a href="#top" style="position: fixed;right: 20px;bottom: 20px;">点击返回顶部</a>
</body>
</html>
4、表格
- 表格的基本构成标签
table标签：表格标签
tr标签：表格中的行
th标签:表格的表头
td标签：表格单元格
1、请用html语言输出如下表格：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是表格</title>
</head>
<body>
<!-- table:表格；tr:表行，可以设置高；td：表格，单元格，可以设置宽
td和th都是对于单元格设置的，th:表头，和td不同的是，th会加宽居中表格的内容
-->
<table border="1" width="400" height="400" bgcolor="antiquewhite" background="img/people.jpg">
<tr height="50">
<th width="50">序号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>19</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>20</td>
</tr>
</table>
</body>
</html>
2、请用html语言输出如下表格：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
cellspacing="单元格与单元格之间的距离"
cellpadding="表格内容与边框的距离"
-->
<table border="1" width="400" height="400" cellspacing="0" cellpadding="10">
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr align="left">
<td>1</td>
<td>张三</td>
<td>18</td>
</tr>
<tr valign="top">
<td valign="bottom">2</td>
<td>李四</td>
<td>19</td>
</tr>
<tr align="right">
<td>3</td>
<td>王五</td>
<td>20</td>
</tr>
</table>
</body>
</html>
3、请用html语言输出如下表格：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div align="center" style="width: 600px;font-size: large;">财务报表</div>
<table border="1" width="600" height="200" cellspacing="0">
<tr>
<th colspan="3">品牌</th>
<th colspan="3">春装</th>
<th colspan="3">夏装</th>
</tr>
<tr align="center">
<td colspan="3"></td>
<td>男装</td>
<td>女装</td>
<td>童装</td>
<td>男装</td>
<td>女装</td>
<td>童装</td>
</tr>
<tr align="center">
<td rowspan="2">JC</td>
<td colspan="2">牛仔系列</td>
<td>116</td>
<td>98</td>
<td>68</td>
<td>88</td>
<td>86</td>
<td>46</td>
</tr>
<tr align="center">
<td colspan="2">休闲系列</td>
<td>120</td>
<td>100</td>
<td>80</td>
<td>98</td>
<td>88</td>
<td>50</td>
</tr>
</table>
</body>
</html>
5、表单
- form标签：表单
网页表单中有许多可以输入或选择的组件,用户可以在表单中填写信息,最终提交表单,把客户端数据提交至服务器。
<form action=“http://www.sohu.com”method=“post”>
……
</form>
- action：指定提交后，由服务器 上那个处理程序处理 (java程序)。
action= “url” - method：指定向服务器提交的方法: 一般为post或get方法, post方法比较安全。
method =“post或get”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是表单</title>
</head>
<body>
<!--
form标签
表单是提供可选择或者输入的组件，用户可以在表单中输入信息，最终将信息提交至服务器
<form action="提交至服务器的地址" method="post/get"></form>
input：输入框
type="text":输入框
id的值是唯一的，可以自定义
name的值是可重复的，可以自定义，向服务器提交数据的键
value：输出的内容最终向服务器提交
readonly="readonly"是只读的
disable="disable"是禁用的
placeholder="请输入提示信息："
type="radio"单选按钮
type="checkbox"复选框
type="file"文件复选框
accept=“.文件后缀名,.文件后缀名… “ 限制文件类型
<input type="submit"/>是提交按钮
在单选框的时候，name相同的为一组，选择性组件必须给定value
-->
<form action="" method=""></form>
<label for="userid">用户名：</label>
<input type="text" id="userid" name="username" placeholder="请输入用户名:" /><br>
密码：<input type="password" id="password" name="password" placeholder="请输入密码:" /><br>
<!--
单选框通过name属性来分组，name相同是一组才可实现单选。
单选和复选不能输入内容，所以必须指定value的值。
-->
性别：<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女<br>
课程：<input type="checkbox" name="course" value="java" />java
<input type="checkbox" name="course" value="sql" />sql
<input type="checkbox" name="course" value="python" />python <br>
<!-- selected = "selected" 默认选中 -->
籍贯：<select name="area">
<option value="陕西">陕西</option>
<option value="浙江">浙江</option>
<option value="江苏">江苏</option>
</select> <br>
附件：<input type="file" name="userImg" accept=".jpg" /> <br>
备注：<textarea rows="5" cols="30" name="textarea">标签体就是textarea中value的值</textarea> <br>
<!-- 按钮-->
<input type="submit" /><!-- 提交按钮 -->
<input type="reset" /><!-- 重置表单为初始状态 -->
<input type="button" value="普通按钮" />
</body>
</html>
6、内联框架
内联框架可以在一个窗口内嵌入一个子窗口,从而在子窗口中引入一个外部的页面。
<iframe src=# name=# width=# height=# frameborder=#> ... </iframe>
实例：
内联窗口测试demo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 内联窗口测试demo.html -->
<a href="www.baidu.com">百度</a>
</body>
</html>
内联窗口实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
<iframe src=# name=# width=# height=# frameborder=#> ... </iframe>
target="rightWindow"在指定的内联窗口打开
target="_self"在当前窗口打开
target="_blank"在新的窗口中打开
target="_parent"在父级窗口打开
target="_top"在顶级窗口打开
-->
<a href="http://www.baidu.com">打开百度</a>
<a href="http://www.baidu.com" target="rightWindow">百度</a>
<a href="http://www.sina.com.cn" target="rightWindow">新浪</a>
<a href="demo.html" target="rightWindow">demo</a>
<iframe name="rightWindow" src="http://www.qq.com" width="800" height="600" frameborder="0"></iframe>
</body>
</html>
670
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
