一、HTML
超文本标记语言
标签---标记
<标签名>
标签体(内容)
//其它标签
</标签名>
二、基本结构：
<html>
<head>
内容摘要
(字符集设置、搜索关键字、题目)
</head>
<body>
标签
</body>
</html>
body存储的是主体：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>三、基本标签
1、块级标签---前后自动换行---block
h1--->h6标题标签，字体从大到小
p---段落标签
hr---水平线----不需要结束标签
- 设置水平线宽度与高度属性——width、size
- 设置水平线的颜色——color
- 设置水平线的对齐方式——align 默认是center，left，right
2、行级标签---不自动换行
px---网页尺寸单位----相对
图片
<img src="img/138-375.png" width="200px" alt="不存在" title="作业" >
title---鼠标悬浮，显示的提示
alt----图片替代文字
超链接
<a href="geren.html">编辑/张丽</a>
浏览器不识别空格和换行，连续的空格只能识别一个
如何打开新标签页？
target---------链接打开的位置，默认_self在当前窗口(选项卡)，新的选项卡打开_blank
br---换行标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>武侠小说</title>
</head>
<body>
<!-- 标题标签 -->
<h2>天龙八部</h2>
<!-- 水平线 -->
<hr width="500px" size="10px" color="gray" align="left"/>
<p>
作者：金庸
</p>
<p>
人物：乔峰、段誉、虚竹
</p>
<!-- 超链接 -->
<p>
<a href="geren.html" target="_blank">编辑/张丽</a>
</p>
<!-- 插入图片 -->
<img src="img/wallhaven-4ldjop.jpg" width="200px" height="150px" title="1"/>
<img src="img/wallhaven-y8lqo7.jpg" width="200px" height="150px" title="2"/>
<!-- 换行标签 -->
<br>
<img src="img/1660269760252.jpg" width="200px" height="150px" title="3"/>
<img src="img/16602688470290.jpg" alt="图片加载失败" width="200px" height="150px"/>
</body>
</html>3、其他标签
pre---保留格式
center---居中
strong---加粗
i---斜体
em---倾斜,
sub--下角标,
sup---上角标
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习</title>
</head>
<body>
<!-- 保留格式标签 -->
<pre>
一
二
三
四
</pre>
<!-- 居中标签 -->
<center>hello world</center><br>
<!-- 加粗 -->
<strong>hello world</strong><br>
<!-- 倾斜 -->
<em>hello world</em><br>
<!-- 上角标 -->
温度： 27<sup>o</sup><br>
<!-- 下角标 -->
长度：10<sub>cm</sub><br>
H<sub>2</sub>O <br>
2<sup>3</sup>=8
</body>
</html>
4、转义字符
版权说明：©
空格：
小于号 < : <
大于号 >: >
引号 “ : "
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习</title>
</head>
<body >
©奕辰Long
<p>将来的你 "会感谢现在奋斗的你"</p>
<p>将来的你 "会感谢现在奋斗的你"</p>
<p>5<3 5>3 </p>
<p>5>3 5<3 </p>
</body>
</html>5、相对路径和绝对路径
（1）相对路径：所谓相对路径，就是相对于自己的目标文件位置。
（2）绝对路径：绝对路径是指文件在硬盘上真正存在的路径
<img src=" E:\book\网页布\代码\第2章\bg.jpg">
6、列表--组合标签
（1）无需列表 ul-li
（2）有序列表 ol-li
（3）定义类表 dl-dt-dd
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表展示</title>
</head>
<body>
<!-- 无序列表 -->
<h2>无序列表</h2>
<ul type="square">
<li>家电</li>
<li>服装</li>
<li>日用品</li>
<li>食品</li>
</ul>
<!-- 嵌套列表(子列表)-->
<h2>嵌套列表</h2>
<ul >
<li>管理员
<ul>
<li>查询</li>
<li>添加</li>
</ul>
</li>
<li>学校
<ul>
<li>查询</li>
<li>添加</li>
</ul>
</li>
<li>班级</li>
<li>团队</li>
</ul>
<!-- 有序列表 -->
<h2>有序列表</h2>
<ol type="A">
<li>问题1</li>
<li>问题2</li>
<li>问题3</li>
</ol>
<!-- 组合标签——定义列表 -->
<h2>定义列表——组合标签</h2>
<dl>
<dt>标题/图片/超链接</dt>
<dd>描述的内容1</dd>
<dd>描述的内容2</dd>
</dl>
<dl>
<dt>手机</dt>
<dt><img src="img/11.jpg" width="200px" height="150px"/></dt>
<dd>华为mate xs2</dd>
<dd>原价：15000</dd>
<dd>原价：13000</dd>
</dl>
</body>
</html>7、h5标签
音频和视频
autoplay---布尔型属性，不用赋值，直接写该属性即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>音频视频</title>
</head>
<body>
<!-- 音频 autoplay controls loop循环播放-->
<h2>音频</h2>
<audio src="img/薛之谦 - 天外来物.mp3" autoplay controls loop>
当前浏览器不支持audio
</audio>
<!-- 视频 -->
<video width="800" height="">
<source src ="" type="video/mp4"> <source />
<a href="myvideo.webm">下载视频</a>
</video>
</body>
</html>8、表格
caption 标题 thead 表头 tr 行 th 标题列 加粗
tbody 表体 tr、td单元格 tfoot 表尾 跨行跨列---合并单元格
td的属性： colspan---跨列column span范围 rowspan---跨行 row span范围
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格练习</title>
</head>
<body>
<!-- 书籍表 -->
<table border="" cellspacing="" cellpadding="">
<caption>书籍信息</caption>
<!-- 头 -->
<thead>
<tr>
<th>*********</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<tr>
<th>一</th>
<th>内容</th>
</tr>
<tr>
<th>二</th>
<th>内容</th>
</tr>
</tbody>
<!-- 尾 -->
<tfoot>
<tr>
<th>尾部</th>
<th>统计</th>
</tr>
</tfoot>
</table>
</body>
</html>（1）表格属性
- width属性：指定表格或某一个表格单元格的宽度。单位可以是%或者像素。
- height属性：指定表格或某一个表格单元格的高度。单位可以是%或者像素。
- align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式。 align参数可以取值为left（左对齐）、center（居中）或 right（右对齐）
- border属性：表格边线粗细。
- bordercolor属性：指定边框的颜色，设置边框颜色的前提是边框的宽度不能为0。
- Cellspacing属性：指定表格内部各个单元格之间的宽度。
- Cellpadding属性：指定表格内文字与边框间距。
- 设置表格背景颜色——bgcolor
- 设置表格的背景图像——backgroun
（2）tr属性
- height属性：指定行的高度。
- bordercolor属性：为单独的行设置其外框颜色。
- bgcolor、background属性：为行设置单独的背景颜色和背景图片
- align属性：行文字的水平对齐方式，包括3种：left、center和right
- width、height属性：指定单元格的高度和宽度，单元格高度和宽度的单位是像素 。
- colspan属性：指定单元格水平跨度 ，单元格跨越几列。
- rowspan属性：指定单元格垂直方向上跨行
- valign 属性：行文字的垂直对齐方式。指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。属性值如下：
-
-
- top：顶端对齐；
- middle：居中对齐；
- bottom：底端对齐；
- Baseline：相对于基线对齐；
-
- 单元格td属性
-
- align属性：指定某一个单元格里的内容（文本、图片等）水平对齐方式的取值可以是left、center或right 。
- bgcolor属性：指定单元格背景颜色。
- background属性：指定单元格的背景图像
-
- 合并单元格
-
- colspan属性：指所要合并单元格的列数，横向合并。
- rowspan属性：指所要合并单元格的行数，纵向合并。
-
制作课程表：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格练习</title>
</head>
<body>
<table bgcolor="antiquewhite" border="10" bordercolor="gray" cellspacing="15" cellpadding="10">
<!-- 标题 -->
<caption >学生课程表</caption>
<!-- align指定对齐方式 -->
<tr align="center">
<!-- 合并的列数 横向合并 -->
<td colspan="7">学生课程表</td>
</tr>
<tr>
<td>时间</td>
<td>周一</td>
<td>周二</td>
<td>周三</td>
<td>周四</td>
<td>周五</td>
<td>周六</td>
</tr>
<tr>
<!-- 合并的行数 列项合并 -->
<td rowspan="4">上午</td>
<td>体育</td>
<td>体育</td>
<td>体育</td>
<td>体育</td>
<td>体育</td>
<td>体育</td>
</tr>
<tr>
<td>体育</td>
<td>体育</td>
<td>体育</td>
<td>体育</td>
<td>体育</td>
<td>体育</td>
</tr>
<tr>
<td>体育</td>
<!-- 合并2*2个单元格 -->
<td colspan="2" rowspan="2"></td>
<td>体育</td>
<td>体育</td>
<td>体育</td
</tr>
<tr>
<td>体育</td>
<td>体育</td>
<td>体育</td>
<td>体育</td>
</tr>
<tr>
<td rowspan="4">上午</td>
<td>体育</td>
<td>体育</td>
<td rowspan="4"></td>
<td>体育</td>
<td>体育</td>
<td rowspan="4"></td>
</tr>
<tr>
<td>体育</td>
<td>体育</td>
<td>体育</td>
<td>体育</td>
</tr>
<tr>
<td>体育</td>
<td>体育</td>
<td>体育</td>
<td>体育</td>
</tr>
<tr>
<td>体育</td>
<td>体育</td>
<td>体育</td>
<td>体育</td>
</tr>
</table>
</body>
</html>四、表单——form
form标签----块级：包装箱----地址action
注意：form要包裹住所有的发送数据(表单元素)
表单元素---行级
input：输入控件
所有输入控件都要设置 属性 name, 服务器要用这个属性来区分不同的值。
（1）文本框 <input type=”text”>
| <!-- 文本框 placeholder: 文本框的提示信息 value: 文本框的值--> 用户名：<input type="text" name="username" value="admin" placeholder="请输入6~8位字符"><br> |
（2）密码框<input type=”password”>
| <!-- 密码框--> 密码： <input type="password" name="pwd"><br> |
（3）单选框 <input type=”radio”>
| <!-- 1. 一组单选框, name值必须相同 2. value值必须设置 3. 设置单选框的选中状态 checked , checked="checked" checked="true"--> 性别：<input type="radio" name="sex" value="1" >男 <input type="radio" name="sex" value="2" checked>女<br> |
（4）复选框： checkbox
后台接收复选框的值，通过数组接收
| 爱好：<input type="checkbox" name="hobbies" value="睡觉">睡觉 <input type="checkbox" name="hobbies" value="写代码" checked>写代码 <input type="checkbox" name="hobbies" value="吃">吃 <input type="checkbox" name="hobbies" value="劈叉"/>劈叉 <input type="checkbox" name="hobbies" value="打游戏"> 打游戏<br /><br> |
（5）下拉框 select
| <!-- 下拉框 select option: 下拉选项 value属性传给后台的值--> 家庭住址：<select name="address"> <option value="001">辽宁</option> <option value="002">广西</option> <option value="003" selected>贵州</option> <option value ="004">山西</option> </select><br> |
预选: checked, checket="checked" , checked="true" ， 应用在radio, checkbox
Selected, Selected =" Selected " , Selected ="true" , 应用在 select
（6）文本域 textarea
内容要写在开始标签和结束标签中间，没有value.
Cols: 每一行可以输入多少字符。
Rows: 行，
| 个人介绍：<textarea name="detail" cols="10" rows="3"></textarea> |
（7） 文件上传
表单设置为支持多媒体的上传,如果form表单中要提交file，必须写红色部分
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="pic"/>
（8） 按钮
提交按钮： input type = “submit”
普通按钮： input type=”button”, 一般会绑定一个方法使用。
重置按钮： input type=”reset” ----让页面回复到初始化的状态
| <input type="button" value="点击我啊" οnclick="alert(1)"/> <input type="reset" value="重置"/> <input type="submit" value="submit"/> |
（9）隐藏域--hidden
主要用在修改页面， id不想展示给用户，同时又需要把值提交到后台。
<input type="hidden" name="id" value="456123"/><br>
（10）Disabled, readonly--都是只读无法输入，
Readonly: 只读的，不可以修改，数据可以提交到后台的，文本框使用。
Disabled: 不可用的，数据不可以提交到后台
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册</title>
</head>
<body>
<h2>用户注册</h2>
<form action="index.html" method="">
<!-- --h4版本-- -->
编号: <input type="text" name="usid" id="usid" /><br>
姓名: <input type="text" name="uname" id="uname"/><br>
密码: <input type="password" name="upwd" id="upwd"/><br>
<!-- 隐藏 -->
<input type="hidden" name="money" id="money" value="2000" />
<hr>
<!-- value提交给服务器的值 -->
<!-- 单选框 -->
性别: <input type="radio" name="sex" id="sex1" value="男" />男
<input type="radio" name="sex" id="sex2" value="女" />女<br>
<!-- 复选框 -->
爱好: <input type="checkbox" name="hobby" id="hobby" value="小说" />小说
<input type="checkbox" name="hobby" id="hobby" value="旅游" />旅游
<input type="checkbox" name="hobby" id="hobby" value="学习" />学习<br>
<!-- 文件上传-->
头像: <input type="file" name="pic" id="pic"/><br>
<hr>
<!-- --h5版本-- -->
<!-- number类型 -->
年龄: <input type="number" name="age" id="age" min="10"/><br>
<!-- 日期类型 -->
出生日期: <input type="date" name="birthday" id="birthday"/><br>
<!-- 颜色框 -->
颜色: <input type="color" />
<!-- 滑块 -->
<input type="range" name="wen" id="wen" value="30" /><br>
<hr>
<!-- 下拉框 -->
学历: <select name="学历" id="">
<option value="">请选择</option>
<option value="0">高中</option>
<option value="1">大专</option>
<!-- selected默认选择 -->
<option value="2" selected>本科</option>
<option value="3">硕士研究生</option>
</select><br>
<!-- 文本域 -->
<!-- readonly 只读 -->
<center>个人优势：</center><textarea readonly name="retroduce" id="retroduce"" cols="30" rows="10"></textarea><br>
<hr>
<!-- 提交按钮 -->
<input type="submit" value="注册" />
<!-- 恢复表单原样--重置按钮 -->
<input type="reset" value="重置" />
<!-- h5版本 -->
<!-- disabled 禁用，不上传给服务器 -->
<button disabled type="reset">重置</button>
<!-- 普通按钮--不提交表单，没有提交的动作 -->
<input type="button" value="普通" />
</form>
</body>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
