HTML
HTML介绍
1、什么是HTML
超文本标记语言
超文本：比普通文本功能更加强大，页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
标记语言：使用一组标签对内容进行描述的一门语言，它不是编程语言。
2、HTML使用
1、所有的html文件后缀名都是以.html或.htm结尾的，建议使用.html结尾。
2、整个html文件分别由头部分<head></head>和体部分<body></body>组成。
3、html标签都是由开始标签和结束标签组成（<br /）
4、html标签忽略大小写，建议大家使用小写
3、HTML相关标签的学习
3-1、标题标签
标题标签<hn></hn>n从1-6逐渐变小。
特点：加粗加黑显示，单独占用一行，与其他行有一定的行间距。
3-2、水平线标签
<hr/>标签在html页面中创建一条水平分隔线，用于定义内容中的主题变化。
size属性：水平线的高度，单位像素
3-3、段落标签
<p></p>
3-4、字体标签
<font></font>
color属性:颜色
size属性：字体大小1-7逐渐变大
face属性：更改字体
<b></b>：加粗
<i></i>:斜体
<u><u>:下划线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>公司简介</title>
</head>
<body>
<!-- 标题标签 -->
<h1>公司简介</h1>
<!-- 添加水平线 -->
<hr />
<!-- 段落 -->
<p>
<font color="red" size="5" face="楷体">阿里巴巴集团的使命是让天下没有难做的生意。</font>
我们旨在赋能企业，帮助其变革<i>营销、销售和经营的方式，提升其效率</i>。<u>我们为商家、品牌及其他企业提供技术基础设施以及营销平台，帮助其借助新技术的力量与用户和客户进行互动，并更高效地进行经营</u>。
</p>
<p>
我们的业务包括<b>核心商业、云计算、数字媒体及娱乐以及创新业务</b>。除此之外，
我们的非并表关联方蚂蚁金服为我们平台上的消费者和商家提供支付和金融服务。围绕着我们的平台与业务，一个涵盖了消费者、商家、品牌、零售商、第三方服务提供商、战略合作伙伴及其他企业的数字经济体已经建立起来。
</p>
</body>
</html>
3-5、图片标签
<img />
src属性：路径
width属性：宽
height属性：高
alt属性：提示信息
border属性：图片框体
3-6、列表标签
无序列表
<ul>
<li></li>
</ul>
有序列表
<ol>
<li></li>
</ol>
3-7、超链接标签
<a></a>
href属性：超链接地址
target属性：更改是否覆盖原标签页选项卡
<!DOCTYPE html>
<html>
<head>
<!-- 定义字符集 -->
<meta charset="utf-8">
<!-- 定义适应手机 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>图片&列表&超链接</title>
</head>
<body>
<ul>
<li>阿里巴巴</li>
<a href="https://www.alibabagroup.com/cn/global/home"><img src="阿里.png" alt="阿里巴巴" width="230px" height="80px"
border="0px" /></a>
<li>腾讯</li>
<a href="https://www.tencent.com/zh-cn/index.html"><img src="腾讯.png" alt="腾讯" width="230px" height="80px"
border="0px" /></a>
<li>华为</li>
<a href="https://www.huawei.com/cn/"><img src="华为.png" alt="华为" width="230px" height="80px" border="0px" /></a>
<!-- <br/> -->
</ul>
<ol>
<li>
<a href="https://www.alibabagroup.com/cn/global/home">阿里巴巴</a>
</li>
<br />
<li>
<a href="https://www.tencent.com/zh-cn/index.html">腾讯</a>
</li>
<br />
<li>
<a href="https://www.huawei.com/cn/">华为</a>
</li>
</ol>
</body>
</html>
3-8、表格标签
<table> (表格)
<tr> （行）
<td></td> （列）
</tr>
</table>
border属性：表格框体
align属性：设置位置（center居中）
bgcolor属性：背景颜色
cellspacing属性：单元格间间隙属性（设施边框与边框的间距）
cellpadding属性：设置的边框与内容的间距
width：宽
height：高
colspan：跨行属性
rowspan：跨列属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表格标签</title>
</head>
<body>
<table border="1px" width="500px" align="center" cellspacing="0px" height="400px">
<tr>
<td colspan="2" align="center"><img src="腾讯.png" alt="腾讯" width="90px" height="50px" border="0px" /></td>
<td>13</td>
<td>14</td>>
</tr>
<tr>
<td>21</td>
<td colspan="2" rowspan="2" align="center">
<table border="1px" width="100%" height="100%" align="center" cellspacing="0px" bgcolor="greed">
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td rowspan="2" align="center">34</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
</tr>
</table>
</body>
</html>
3-9、框架结构标签
<frameset cols="25%,75%">
<frame src="left.html"/>
<frame src="right.html"/>
</frameset>
注意：框架标签不能放到<body></body>标签中
cols属性：左右划分
rows属性：上下划分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>网站后台系统显示页面</title>
</head>
<frameset rows="20%,*">
<frame src="top.html"/>
<frameset cols="20%,*">
<frame src="left.html"/>
<frame name="right" />
</frameset>
</frameset>
</html>top.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<font size="7">欢迎XXX进入后台管理系统</font>
</body>
</html>left.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<a href="right.html" target="right">会员管理</a>
<br/><br/>
<a href="#">品牌管理</a>
<br/><br/>
<a href="#">商品管理</a>
<br/><br/>
<a href="#">分类管理</a>
</body>
</html>right.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p>
所有用户信息
</p>
</body>
</html>
表单标签
表单标签：所有需要提交到服务器端的表单必须使用<form></form>括起来
form标签属性：
action，整个表单提交的位置（可以是一个页面，也可以是一个后台java代码）
method,表单提交的方式（get/post/delete_等7种）
文本输入项
<input type="text" name="" size="" maxlenght="" readonly="" placehoder=""/>
name属性：名字
size属性：定义文本框宽度
maxlenght属性：可以输入的最大长度
readonly属性：值为readonly为只读状态
placehoder属性：提示信息
value属性：赋值
required属性：值required设定为必填字段
密码输入项
<input type="password" name="" />
单选按钮
<input type="radio" name="" value="" checked="" />
checked属性：值checked默认选中
多选按钮
<input type="checkbox" name="" value="" checked="" />
下拉列表
<select name="">
<option value="" selected="">北京</option>
<option>上海</option>
</select>
selected属性：值selected默认选择
文件上传项
<input type="file" name="" />
文本输入域
<textarea name=""></textarea>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表单（一）</title>
</head>
<body>
<form action="/my-handling-form-page" method="POST">
<div>
<label for="name">姓名：</label>
<input type="text" id="name" name="user_name" placeholder="请输入姓名"/>
</div>
<div>
<label for="mail">E-mail：</label>
<input type="email" id="mail"/>
</div>
<div>
<label for="msg">留言：</label>
<textarea id="msg"></textarea>
</div>
<div class="button">
<button type="submit">发送留言</button>
</div>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表单（二）</title>
</head>
<body>
<form name="forml" method="GET" action="#" enctype="multipart/form-data">
<p>
文本框<input type="text" name="username" value="小明" size="20">
<br/>
</p>
<p>
密码框<input type="password" name="pwd" value="2018" size="20" required="required">
<br/>
</p>
<p>
单选按钮<input type="radio" name="sex" value="男" checked="checked">男
<input type="radio" name="sex" value="女">女
<br/>
</p>
<p>
复选框 <input type="checkbox" name="ch1" value="baketball">篮球
<input type="checkbox" name="ch1" value="football">足球
<input type="checkbox" name="ch1" value="volleyball">排球
<input type="checkbox" name="ch1" value="pingpangball">乒乓球
<br/>
</p>
<p>
按钮<input type="submit" name="s1" value="提交">
<input type="reset" name="r1" value="重置">
<input type="button" name="b1" value="按钮">
<br/>
</p>
<p>
列表框<select name="seasons">
<option value="" selected="select">选择</option>
<option value="1">春季</option>
<option value="1">夏季</option>
<option value="1">秋季</option>
<option value="1">冬季</option>
</select>
</p>
<p>
文件浏览<input type="file" name="files">
</p>
</form>
</body>
</html>
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
