<!DOCTYPE html>
<!--声明类型为超文本标记语言-->
<html lang="en">
<head>
<!--页面头部,里面内容不显示-->
<meta charset="UTF-8">
<!--设置页面编码 字符集，防止页面乱码 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--设置页面自动缩放-->
<title>案例</title>
<!--页面标题-->
<link rel="stylesheet" href="./css/style.css" type="text/css" />
<!--引入外部样式 -->
<style type="text/css" media="all">
</style>
</head>
<body onload="window.scrollTo(0,document.body.scrollHeight)">
<!--身体部分，能看到-->
<div class="text">
网页设计与制作
</div>
<hr />
<h3>H1 - H6标题</h3>
<!-- <h1>h1-梁云辉<h1>
<h2>h2-梁云辉<h2>
<h3>h3-梁云辉<h3>
<h4>h4-梁云辉<h4>
<h5>h5-梁云辉<h5>
<h6>h6-梁云辉<h6> -->
<hr />
<div class="">
导数：已知吃的什么，问拉出来的（💩）<br />
积分：已知拉出来的是💩，问吃了什么( )
</div>
<p>
段落
</p>
<hr>
<i>i- 斜体文本</i><br />
<em>em-斜体文本</em><br />
<cite>cite-斜体文本</cite><br />
<strong>strong-加粗</strong><br />
2<sup>上标</sup>+2<sub>下标</sub><br />
<u>u-下划线</u>
<s>s-删除线</s>
<hr />
<p>
hr-横线
</p>
<hr>
<p>
静态网页后缀：.htm .html .shtml .xml等
</p>
<hr />
<p>
动态网页后缀：.asp .aspx .jsp .php等
</p>
<hr />
<p>
以下四种情况不一定是动态页面：
</p>
<p>
带有视频 音频 flash动画 css动画 JavaScript特效的不一定是动态页面
</p>
<hr>
<p>
在HTML中，根据元素表现形式，一般可分为2类，块元素、行内元素<br>
块元素：独占一行，排斥其他元素（包括块元素和行内元素）与其位于同一行<br>
行内元素：
<hr>
<p>
特殊符号：空格： 小于号：<大于号：> 版权：© 注册商标：®<br>
</p>
</p>
<div>
<div>是块元素
</div>
<hr />
<h3 id="youxu">有序列表 ol li</h3>
<ol type="1" start="3">
<li>html</li>
<li>css</li>
<li>js</li>
</ol>
<hr />
<h3>无序列表 ul li</h3>
<ul type="circle">
<!-- circle:圆圈 -->
<li>html</li>
<li>css</li>
<li>js</li>
</ul>
<ul type="dict">
<!-- dict:实心圆 -->
<li>html</li>
<li>css</li>
<li>js</li>
</ul>
<ul type="square">
<!-- square:方块 -->
<li>html</li>
<li>css</li>
<li>js</li>
</ul>
<hr />
<h3>描述列表 dl dt dd</h3>
<dl>
<dt>HTML</dt>
<dd>描述</dd>
<dt>CSS</dt>
<dd>描述</dd>
<dt>JavaScript</dt>
<dd>描述</dd>
</dl>
<hr />
<h3>图片标签</h3>
<p>
<img src="图片路径" alt="描述图片" srcset="" title="描述图片"/><br />
src：指定图片路径（可选）<br />
alt：描述图片，给搜索引擎看（必选）<br />
title：用于描述图片，提供给用户看（可选）
</p>
<h4>绝对路径：</h4>
(1)指的是电脑中的完整路径。<br />
(2)带域名的图片的完整路径<br />
<img src="C:/Users/imCYL/Desktop/HTML网页设计/4.代码/HTML网页设计/img/img.jpg"/><br />
<img src="/img/img.jpg" alt="找不到图片" srcset="" style="width: 200px;" /><br />
<h4>相对路径：</h4>
(1)指的是图片<span style="color: red;">相对</span>当前页面的路径。<br />
<img src="/img/img.jpg"/><br />
<h4>相对路径有<span style="color: red;">三种</span>情况</h4>
<img src="./img/lujin.png" alt="找不到图片" srcset="" style="width: 300px;" /><br />
i.上一层路径：<img src="../img.jpg"/><br />
<img src="./img/img.jpg" alt="找不到图片" srcset="" style="width: 200px;" /><br />
ii.当前层路径：<img src="img.jpg"/><br />
<img src="./img/img.jpg" alt="找不到图片" srcset="" style="width: 200px;" /><br />
iii.下一层路径：<img src="/img/img.jpg"/><br />
<img src="./img/img/img.jpg" alt="找不到图片" srcset="" style="width: 200px;" /><br />
<hr />
<h3>图片格式</h3>
<h3>视频标签</h3>
<hr />
<!-- <video src="./img/video.mp4" style="width: 100%;" controls></video> -->
<h3 id="排版标签">排版标签</h3>
<pre>
<font size="16px" face="楷体" color="#80FF00">白日依山尽</font>
黄河入海流
欲穷千里路
更上一层楼
</pre>
<hr />
<h3 id="超链接">超链接</h3>
<a href="链接地址" target="打开方式"></a><br>
新窗口打开：target="_blank"<br>
当前窗口打开：target="_self"<br>
<ul>
<li>外部链接：<a href="https://dyf.imcyl.top">德育分网站</a></li>
<li>锚点链接：<a href="#youxu">有序列表</a></li>
<li>邮箱链接：<a href="mailto:2298582929@qq.com">点击发送邮件</a></li>
<li>空链接：<a href="#">空链接</a></li>
<li>文件链接：<a href="index.html">文件链接</a></li>
</ul>
<hr />
<h3 id="表格">表格</h3>
<ul>
<li>表格布局已经被舍弃，用来表示数据</li>
</ul>
<table border="1" cellspacing="0" width="200px" height="200px">
<!---->
<caption align="bottom">成绩表</caption>
<tr>
<th>班级</th>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr>
<td align="center">一班</td>
<td>张三</td>
<td>90</td>
</tr>
</table>
<!--表格合并-->
<table border="1" cellspacing="0" width="200px" align="center">
<caption>rowspan水平合并，colspan垂直合并</caption>
<tr align="center">
<td>A</td>
<td rowspan="2">B</td>
<td>C</td>
</tr>
<tr align="center">
<td rowspan="2">E</td>
<td>D</td>
</tr>
<tr align="center">
<th colspan="2">F</th>
</tr>
</table>
<p>
如果一个表格包括有1行4列，表格的总宽度为“69.9”，间距为”5”， 填充为“0”，边框为“3”，每列的宽度相同，那么应将单元格定制为多少像素宽。
</p>
<table border="3" cellspacing="5" cesslpading="0" width="69.9">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
<hr />
<h3 id="框架">框架</h3>
<ul>
<li>用<iframe>设置嵌入式框架资源</li>
</ul>
<iframe src="" frameborder="0" width="100%" height="100px"></iframe>
<hr />
<h3 id="表单">表单</h3>
<p>
<form action="提交到哪" method="get|post">表单内容</form>
</p>
<ul>
<li>常见标签</li>
<li>表单：<form></li>
<li>输入框：<input></li>
<li>文本框：<textarea></li>
<li>下拉列表：<select></li>
<li>下拉列表选项：<option></li>
</ul>
<form action="" method="get" accept-charset="utf-8">
<h5 id="输入框">input输入框</h5>
<ul>
<li>value：设置文本框的默认值</li>
<li>size：设置文本框的长度</li>
<li>maxlength：设置最多可输入多少字符</li>
<li>minlength：设置最少输入多少字符</li>
</ul>
输入框：<input type="text" name="username" id="username" value="" placeholder="input输入框" /><br />
<h5 id="单选框">单选框<input type="radio" name="组名" value="值" checked="checked"/></h5>
<ul>
<li>name：表示多选框所在组名</li>
<li>value：表示单选框的取值</li>
<li>checked：表示默认选项</li>
</ul>
<input type="radio" name="1" id="" value="" />单选框
<input type="radio" name="1" id="" value="" checked="checked" />单选框
<input type="radio" name="1" id="" value="" />单选框
<h5 id="复选框">复选框（多选框）<input type="checkbox" /></h5>
<ul>
<li>name：表示多选框所在组名</li>
<li>value：表示单选框的取值</li>
<li>checked：表示默认选项</li>
</ul>
<input type="checkbox" name="2" id="" value="" checked="checked" />复选框
<input type="checkbox" name="2" id="" value="" />复选框
<input type="checkbox" name="2" id="" value="" />复选框
<h5 id="文本框">textarea文本框<textarea></textarea></h5>
<textarea name="" id=rows="8" cols="40" placeholder="textarea文本框"></textarea>
<h5 id="下拉列表">select选择框<select></select></h5>
<ul>
<li>multiple：设置下拉列表可以选择多项</li>
<li>设置显示几个选项</li>
<li>selected：默认选中</li>
<li>value：选项值</li>
</ul>
<select name="" id="">
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
<h5 id="按钮">按钮</h5>
<ul>
<li>submit：提交按钮</li>
<li>reset：重置按钮</li>
</ul>
<input type="submit" name="" id="" value="提交" />
<input type="reset" name="" id="" value="重置" />
<button type="submit">提交</button>
</form>
<h5>案例</h5>
<form action="" method="post" accept-charset="utf-8">
姓名： <input type="text" name="" id="" value="" class="input" /> <br />
密码： <input type="password" name="" id="" value="" class="input" /><br />
性别： <input type="radio" name="1" id="" value="" />男
<input type="radio" name="" id="" value="" />女 <br />
爱好：<input type="checkbox" name="1" id="" value="" />唱
<input type="checkbox" name="1" id="" value="" />跳
<input type="checkbox" name="1" id="" value="" />Rap <br />
年级：<select name="" id="">
<option>大一</option>
<option>大二</option>
<option selected="selected">大三</option>
</select><br />
上传照片：<input type="file" name="" id="" value="上传照片" /><br />
个人简介： <textarea name="" id="" rows="5" cols="30">请介绍一下你自己</textarea><br />
<input type="reset" name="" id="" value="重置" class="btn" />
<input type="submit" name="" id="" value="提交" class="btn" />
</form>
<h5>表单作业</h5>
<form action="" method="post" accept-charset="utf-8">
昵称： <input type="text" name="" id="" value="" /> <br />
密码： <input type="password" name="" id="" value="" /><br />
邮箱： <input type="email" name="" id="" value="" />
<select name="" id="">
<option>@qq.com</option>
<option>@163.com</option>
<option selected="selected">@gmail.com</option>
</select><br />
<br />
性别： <input type="radio" name="1" id="" value="" />男
<input type="radio" name="" id="" value="" />女 <br />
爱好：<input type="checkbox" name="1" id="" value="" />唱
<input type="checkbox" name="1" id="" value="" />跳
<input type="checkbox" name="1" id="" value="" />Rap <br />
上传照片：<input type="file" name="" id="" value="上传照片" /><br />
个人简介： <br /><textarea name="" id="" rows="5" cols="30">请介绍一下你自己</textarea><br />
上传个人照片： <br />
<input type="file" name="" id="" value="" /> <br />
<div style="width:100px; text-align:center">
<input type="submit" name="" id="" value="立即注册" class="btn1" />
</div>
<hr />
</form>
<h3>多媒体</h3>
<ul>
<li>flash动画</li>
<li>视频文件</li>
<li>图片文件</li>
</ul>
<h5>视频 <video src="路径" controls loop="loop"></vidoe></h5>
<ul>
<li>controls：是否显示控制条</li>
<li>autoplay：自动播放</li>
<li>preload：自动加载</li>
<li>loop：循环播放</li>
</ul>
<video src="./video/video.mp4" height="216px" width="90%" autoplay="autoplay" controls="controls"></video>
<h5>音频<audio src="路径" controls loop="loop"></audio></h5>
<ul>
<li>controls：是否显示控制条</li>
<li>autoplay：自动播放</li>
<li>loop：循环播放</li>
</ul>
<audio src="./audio/music.mp3" controls loop="loop">浏览器不支持</audio>
<hr />
<h3 style="">CSS（层叠样式表）</h3>
<ol>
<p>
四种引入方式
</p>
<li>内部样式<style></style></li>
<li>外部样式<link rel="stylesheet" type="text/css" href="css路径"</li>
<li>行内样式 style=""</li>
<li>@import（很少使用）</li>
</ol>
<div class="face">
<div class="box-div">
<div class="box">
<div class="bla"></div>
</div>
<div class="box">
<div class="bla"></div>
</div>
</div>
<div class="bizi-box">
<div class="bizi"></div>
<div class="bizi"></div>
</div>
<div class="zui-box">
<div class="zui"></div>
</div>
<div class="zui-box">
<p class="qz">
小小欠子
</p>
</div>
</div>
<hr style="margin-top:100px" />
<h3>CSS选择器</h3>
<ol>
<p>
常见6种选择器
</p>
<li>元素选择器：</li>
<li>id选择器</li>
<li>class选择器</li>
<li>后代选择器</li>
<li>群组选择器</li>
<li>通用选择器</li>
</ol>
<hr />
<p>
HTML5新增文档标签结构
</p>
<ul>
<li>头部标签：<header></li>
<li>导航标签：<nav></li>
<li>节标签：<section></li>
<li>文章标签：<article></li>
<li>侧栏标签：<aside></li>
<li>页脚标签：<footer></li>
<li>记号标签：<mark></li>
今天是<mark>9月11日</mark>星期三
<li>进度标签：<progress></li>
<progress value="30" max="100"></progress>
<li>度量标签：<meter></li>
</ul>
<hr />
<p>
HTML5新增API
</p>
<ul>
<li>音频</li>
.mp3 .mp4 .wav .ogg
<audio src="./audio/music.mp3" controls loop="loop">浏览器不支持</audio>
<li>视频</li>
.mp4 .ogg .wepm
<video src="./video/video.mp4" height="216px" width="90%" autoplay="autoplay" controls="controls"></video>
</ul>
<hr />
<p>
CSS3变形过渡与动画效果
</p>
<ul>
<li>Transform 变形</li>
移动，缩放，旋转，倾斜
<div class="bx"></div>
<li>Transition 过渡</li>
<div class="gd"></div>
<li>Animation 动画</li>
<div class="dh"></div>
</ul>
<div class="face">
<div class="box-div">
<div class="box">
<div class="bla"></div>
</div>
<div class="box">
<div class="bla"></div>
</div>
</div>
<div class="bizi-box">
<div class="bizi"></div>
<div class="bizi"></div>
</div>
<div class="zui-box">
<div class="zui"></div>
</div>
<div class="zui-box">
</div>
</div>
<hr />
<h3>CSS放新闻排版</h3>
<div class="news" style="columns:3">
<p>不悟部屋↓下呵呼呼7还得月供海鲜U过渡一下还搁荣耀</p>
<p>hwhsuduejdjdjje还是对不对嗯好嗯好滴，和黑的呵呵额呵</p>
<p>呵呵U会Eud鹅鹅鹅，曲项向天歌曳光弹7呃呃呃呃呃呃呃呃\ue108定</p>
</div>
<div style="height:50px;"></div>
</body>
</html>
研表究明，汉字的序顺并不定一能影阅响读。