课程地址：https://www.51zxw.net/List.aspx?cid=781

文章目录

  • 第二章：创建html文档
    • 2-1 创建标准html文档
    • 2-2 文档基本结构
    • 2-3 单标签和双标签
    • 2-4 代码注释
    • 2-5 元素，元素内容，元素属性
    • 2-6 代码书写规范
    • 2-7 学习技巧和方法
  • 第三章：文档头部
    • 3-1 文档头部浅解
    • 3-2 标题栏图标1
    • 3-3 标题栏图标2
    • 3-4 关键字和描述
    • 3-5 页面跳转
    • 3-6 定义样式和引入样式
  • 第四章：链接(a标签)
    • 4-1 超链接
    • 4-2 超链接四种状态
    • 4-3 绝对路径
    • 4-4 相对路径1
    • 4-5 相对路径2
    • 4-6 ID属性
    • 4-7 class属性
    • 4-8 title和style属性
    • 4-9 自定义属性
    • 4-10 文件下载
    • 4-11 锚链接和空链接1
    • 4-12 锚链接和空链接2
  • 第五章：图像，音频，视频
    • 5-1 图片引入1
    • 5-2 图片引入2
    • 5-3 像素单位
    • 5-4 常用图片格式
    • 5-5 音频引入1
    • 5-6 音频引入2
    • 5-7 视频引入
    • 5-8 定义媒介资源
  • 第六章：文本元素
    • 6-1 标题元素
    • 6-2 段落元素
    • 6-3 斜体标签
    • 6-4 粗体标签
    • 6-5 换行标签
    • 6-6 水平分隔线
    • 6-7 span标签和字符实体
    • 6-8 其它文本标签
  • 第七章：列表与表格
    • 7-1 无序列表
    • 7-2 有序列表
    • 7-3 自定义列表
    • 7-4 创建表格1 table tr th td
    • 7-5 创建表格2
    • 7-6 单元格合并 colspan rowspan
    • 7-7 制作课程表
  • 第八章：布局元素
    • 8-1 元素类型
    • 8-2 div标签
    • 8-3 header和footer标签
    • 8-4 nav和aside标签
    • 8-5 section和article标签
    • 8-6 布局我要自学网首页
  • 第九章：表单元素
    • 9-1 创建表单
    • 9-2 form元素属性
    • 9-3 get和post区别
    • 9-4 本地安装服务器环境
    • 9-5 表单发送
    • 9-6 type和name属性
    • 9-7 value和placeholder属性
    • 9-8 maxlength和disabled属性
    • 9-9 autofocus和autocomplete属性
    • 9-10 单行文本框和密码输入框
    • 9-11 提交按钮和重置按钮
    • 9-12 普通按钮和隐藏域
    • 9-13 数字输入框和活动条
    • 9-14 时间输入框,颜色选择器和文件域
    • 9-15 单选框
    • 9-16 复选框
    • 9-17 电子邮箱和网址输入框
    • 9-18 表单验证属性
    • 9-19 多行文本输入框
    • 9-20 下拉列表
    • 9-21 下拉列表分组
    • 9-22 button按钮
    • 9-23 表单实战1
    • 9-24 表单实战2
  • 第十章：补充内容
    • 10-1 内联框架
    • 10-2 标签嵌套
    • 10-3 网页编码及乱码处理
    • 10-4 图像地图
    • 10-5 代码快捷输入方式

第二章：创建html文档

2-1 创建标准html文档

<!DOCTYPE html> <!--申明文档类型,告诉浏览器用html5规范进行解析，必须在第1行--><html><!--html文档从这里开始--><head><meta charset="UTF-8"><title></title></head><body></body></html><!--html文档到这里结束-->

2-2 文档基本结构

<!DOCTYPE html> <!--申明文档类型,告诉浏览器用html5规范进行解析，必须在第1行--><html><!--html文档从这里开始--><head><!--文档的头部，相当于人的思想--><!--在浏览器窗口中不可见--><meta charset="UTF-8"><!--申明网页编码--><title>我要自学网</title><!--在浏览器标题档显示的标题--></head><body>文档主体部分，相当于人的肉体在浏览器窗口中可以显示的部分</body></html><!--html文档到这里结束-->

2-3 单标签和双标签

 标签：也叫标记由一对尖括号包含单词构成:<html></html>标签形态：1.双标签（对标签）：a:成双成对出现，可以包含内容；b:有开始标签，有结束标签，结束标签在单词前有“/”；2.单标签：a:只有开始标签，没有结束标签b:单标签在开始标签中结束，通常应该在单标签的大于号前加“/”表示结束。c:单标签的功能需要使用属性来实现

2-4 代码注释

 <!--<a href="">我要自学网</a>-->注释：1：不用浏览器解析的内容，可以使用注释2：对代码进行说明，方便修改查看3：养成良好的注释习惯4：注释是给人看的，不是给浏览器看。浏览器会自动忽视注释5：注释书写：             <!--注释的内容-->注释中不能再有注释<!--注释--><!--的--><!--内容-->

2-5 元素，元素内容，元素属性

 元素：1.从开始标签到结束标签中的所有代码（内容）2.单标签中的所有代码元素内容：1.从开始标签到结束标签中的内容（不包括标签）2.单标签没有元素内容元素属性：1.属性是帮助标签完善功能2.写在开始标签中，和标签名之间有空格。3.属性名="属性值"，引号要使用英文状态的符号4.标准属性：通用于几乎所有标签的属性5.特殊属性：不通用于所有标签的属性

2-6 代码书写规范

 代码书写规范：1.html5非常宽松的代码规范2.html5标签，属性可以大写也可以小写,还可以混合大小写3.在html5中，你可以不用关闭标签。要求：1.所有代码全部使用小写2.所有标签都要正常关闭3.所有代码必须在英文半角状态输入(很重要)4.<!DOCTYPE html>必须要写在最前面

2-7 学习技巧和方法

第三章：文档头部

3-1 文档头部浅解

 head:1.文档头部中的内容看不见2.标题,图标,元信息，文档样式，定义脚本...3.文档头部作用于整篇文档title:定义浏览器标题栏里显示的文档标题

3-2 标题栏图标1

3-3 标题栏图标2

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>我要自学网</title><!--<link rel="icon" type="image/x-icon" href="img/favicon.ico"/>--><!--<link rel="icon" type="image/jpeg" href="img/favicon.jpg"/>--><!--<link rel="icon" type="image/png" href="img/favicon.png"/>--><link rel="icon" type="image/gif" href="img/favicon.gif"/></head><body></body>
</html>
 link:引入外部文件rel ：定义当前文档与被链接文档间的关系type：定义被链接文档的mime类型href：定义被链接文档的路径标题栏图标设置：16X16像素1.网站根目录下放一个名称：favicon.ico图片文件。浏览器会自动显示在标题栏中。2.使用ico图标作为标题栏图标可以用工具生成ico图标<!--<link rel="icon" type="image/x-icon" href="img/favicon.ico"/>-->3.使用jpg格式的图片作为标题栏图标<!--<link rel="icon" type="image/jpeg" href="img/favicon.jpg"/>-->4.使用png格式的图片作为标题栏图标<link rel="icon" type="image/png" href="img/favicon.png"/>5.使用gif格式的图片作为标题栏图标

3-4 关键字和描述

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>我要自学网</title><meta name="keywords" content="我要自学网,自学HTML,自学CSS"/><meta name="description" content="要设置的描述内容，建议不超过100字"/></head><body></body>
</html>
 关键字和描述：1.关键字和描述不是给人看，是用于供搜索引擎使用2.关键字和描述是网页优化很重要的部分关键字设置：meta标签name="keywords"content="要设置的关键字，可以使用多个，建议不超过5个。多个关键字用英文状态的“,”分隔。"描述设置：meta标签name="description"content="要设置的描述内容，建议不超过100字"

3-5 页面跳转

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>页面跳转</title><meta http-equiv="refresh" content="5;url=https://www.51zxw.net"/><!--<meta http-equiv="refresh" content="2"/>--></head><body>5秒后执行跳转</body>
</html>
 页面自动跳转语法：<meta http-equiv="refresh" content="多少秒后执行跳转;url=要跳转的地址"/>页面自动刷新语法：<meta http-equiv="refresh" content="多少秒后执行跳转"/>

3-6 定义样式和引入样式

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>定义样式和引入样式</title><style type="text/css">body{font-size: 40px;}</style><link rel="stylesheet" type="text/css" href="3-6.css"/></head><body>我要自学网</body>
</html>

3-6.css

body{color: red;
}
 设置样式语法：<style type="text/css">css样式内容</style>引入样式文件语法（用得最多）：<link rel="stylesheet" type="text/css" href="文件路径"/>

第四章：链接(a标签)

4-1 超链接

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>超链接</title></head><body> <a href="https://www.51zxw.net" target="_blank">我要自学网</a>       </body>
</html>
 超链接:从一个网页链接到另一个网页语法：<a href="要链接的地址">我要自学网</a>href:要链接的地址target:指定在哪里打开目标页面_blank：在新窗口中打开目标页面_self:  在当前窗口中打开目标页面（默认值）_parent   把文档载入父窗口或包含了超链接引用的框架的框架集_top        把文档载入包含该超链接的窗口,取代任何当前正在窗口中显示的框架

4-2 超链接四种状态

 超链接的4种状态:未被访问的链接，link状态：文字为蓝色，有下划线已被访问的链接，visited状态：文字为紫色，有下划线鼠标移动到链接上的状态，hover状态：有下划线,鼠标变手形正在点击的状态，activer状态：文字红色，有下划线默认的4种状态啥用都没有。通我们要通过css对这4种状态进行重置。

4-3 绝对路径

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><a href="https://www.51zxw.net" target="_blank">我要自学网</a></body>
</html>

 绝对路径：浙江省余杭区文一路969号，这就是用绝对的方式来描述一个地址。带有域名的完整路径，比如：https://www.51zxw.net主要用来链接外部资源

4-4 相对路径1

4-5 相对路径2

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><a href="fj1/b.html" target="_blank">链接到b</a>   <a href="../../fj1/fj2/c.html" target="_blank">链接到c</a> </body>
</html>
 相对路径：1.以当文档所在的目录作为参考2.在本目录中<a href="a.html" target="_blank">链接到a</a><a href="fj1/b.html" target="_blank">链接到b</a>3.当前文档和目标文档不在同一个目录-->一个"../"表示返回一层目录,要返回多级使用多个"../"组合

4-6 ID属性

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>ID属性</title><style type="text/css">#zxw3{color: red;}</style></head><body><!--<a href="http://www.51zxw.net">我要自学网</a>--><a id="zxw1">我要自学网1</a><br /><a id="zxw2">我要自学网2</a><p id="zxw3">我要自学网3</p><p id="zxw4">我要自学网4</p></body>
</html>

 特殊属性：元素特有的属性标准属性：几乎所有元素都可以拥有的属性ID属性：1.是元素唯一标识2.同一个页面中不能有相同的id3.同一页面中，不同元素有相同id也不行

4-7 class属性

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>标准属性</title><style type="text/css">.dyz{font-size: 50px;color: red;}.ntx{font-weight: 600;}</style></head><body><a class="dyz" href="https://www.51zxw.net" target="_blank">张三</a><a class="dyz" href="https://www.51zxw.net" target="_blank">李四</a><p class="dyz ntx">王小花</p><p class="dyz ntx">赵小美</p></body>
</html>
 标准属性：几乎所有标签都可以有的属性class属性(类)：1.相同的元素，不同的元素可以有相同的类名（）class值2.同一个元素可以有多个类名，用空格隔开3.主要用来选择一堆元素，定义样式4.规定类名时，类名不能以数字开头

4-8 title和style属性

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>标准属性</title><style type="text/css">a{color: red;   }</style></head><body><a href="https://www.51zxw.net" title="51zxw">我要自学网</a><a href="https://www.51zxw.net"style="color: blue;font-weight: 600;">我要自学网</a></body>
</html>
 标准属性：几乎所有标签都可以有的属性title属性：1.规定元素的额外信息2.鼠标移到元素上时显示提示文字style属性：1.规定元素的行内样式2.style设置的样式会覆盖其它方式设置的样式3.可以设置多个属性值，用";"隔开

4-9 自定义属性

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>自定义属性</title></head><body><a href="https://www.51zxw.net" zxw="51zxw">我要自学网</a><a href="https://www.51zxw.net" data-zxw="51zxw">我要自学网</a></body>
</html>
 自定义属性：几乎所有标签都可以有的属性自定义属性：1.自己定义属性名，属性值2.定义属性用得不多自定义数据属性：1.用于存储页面或应用程序的私有自定义数据2.data-*属性包括两部分：a."*"表示自定义的属性名，在data-之后必须包含至少一个字符b.属性值可以是任何字符串3.在微信小程序中用得多

4-10 文件下载

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>文件下载</title></head><body><!--<a href="xz/51zxw.rar">文件下载</a>--><a href="xz/51zxw.png" download="51zxw图片">图片下载</a>       </body>
</html>

 文件下载：<a href="文件路径" download="设置文件名称">文件下载</a>href属性：指定文件下载路径download属性：指定下载文件名称不添加download属性时：浏览器不能识别文件，可以直接下载。如果浏览器能识别文件，会直接显示添加download属性时：不管浏览器是否可以识别文件，都会直接下载

4-11 锚链接和空链接1

1.当网页内容太长，需要跳转到具体位置时，可以使用锚链接

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>当前页面锚链接</title></head><body><a href="#one">第一章</a><a href="#two">第二章</a><a href="#three">第三章</a><p id="one">胡家祖上是十里八乡有名的大地主，最辉煌的时期在城里买了三条胡同相连的四十多间宅子...的匠人。</p><p id="two">山里的...，但是由于没有路，翻山越岭走了半日才到。这片林子极大，村里的人曾警告过我们不要进去，说里面有人熊出没。</p><p id="three">从远处看，就...蜂被烟一熏就丧失了方向感，到处乱飞，我和胖子又用泥土在燃烧的枯草周围堆了一道防火墙，以防形成烧山大火。   </p><a href="#">返回顶部（空链接）</a></body>
</html>

4-12 锚链接和空链接2

 跳转到其它页面具体位置锚链接1.目标页面具体位置要设置锚点2.用a标签中的href属性指定目标页面的路径+指定位置的id

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>其它页面锚链接</title></head><body><a href="4-11锚链接和空链接1.html/#one">第一章</a><a href="4-11锚链接和空链接1.html/#two">第二章</a><a href="4-11锚链接和空链接1.html/#three">第三章</a></body>
</html>

第五章：图像，音频，视频

5-1 图片引入1

5-2 图片引入2

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>图片的引入</title></head><body>           <!--<img src="img/logo.png"/>--><!--<img src="https://www.51zxw.net/Contents/Images/logo.png"/>-->        <!--<img src="img/logo.png" alt="我要自学网logo图片" width="400"  height="200"/>--><img src="img/logo.png" alt="我要自学网logo图片" width="30%"  /></body>
</html>

 网页中引入图片：使用img标签，<img src="图片路径"/>-->src属性：1.用来指定图片文件所在的路径，必须要有2.图片路径可以是相对路径，也可以是绝对路径alt属性：1.图片无法正常显示时替换文本，可以使用中文，也可以使用英文2.路径不对，网速过慢，浏览器版本过低，图片格式不对...3.<img src="图片路径" alt="替换文本" />width属性和height属性：1.width属性：设置图片宽度，height属性：设置图片高度2.不设置，图片会按原始尺寸显示3.如果只设置1个属性，另一个会根据已设置的属性等比例缩放4.如果2个属性都设置，可能会变形5.默认单位为像素，也可以使用百分比

5-3 像素单位

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>像素</title></head><body><img src="img/logo.png" width="300"/><br /><img src="img/logo.png" width="23.4%"/></body>
</html>

 像素：1.指设备屏幕上的一个点，单位px2.当屏幕分辨率固定时，像素就是一个固定的值，精确的值3.同样大小的屏幕，像素点越多，图像越清晰，画面越细腻。4.像素是网页开发中使用最多的尺寸单位

5-4 常用图片格式

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>图片格式</title></head><body><img src="img/logo.png"/><br /><img src="img/logo.jpg"/><br /><img src="img/logo.gif"/>       </body>
</html>
 jpg/jpeg 格式:1.色彩丰富，压缩比高，画质损失小，体积小2.不支持透明度，不支持动画3.适用于色彩丰富,要求体积小的场景png格式:1.色彩丰富，压缩比高，体积小，比jpg大2.支持任意透明度，不支持动画3.适用于色彩丰富,需要透明度的场景   gif格式:1.仅支持256种颜色，画质损失大，体积最小2.支持完全透明度，支持动画3.适用于要求动画，有透明，图片颜色少的场景

5-5 音频引入1

5-6 音频引入2

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>音频引入</title></head><body>    <!--<audio src="m/wdzg.mp3" controls autoplay loop muted preload></audio>--><audio src="m/wdzg.mp3" controls loop muted preload>您的浏览器不支持audio</audio></body>
</html>

 audio:在网页中引入音频IE8以及之前版本不支持属性名和属性值一样，可以只写属性名src属性:指定音频文件路径，必须要有controls属性：显示播放控件,autoplay属性：音频在就绪后马上播放loop属性：音频播放结束后重新开始muted属性：音频输出应该被静音preload属性：页面加载时就开始加载音频，并预备播放.如果使用了“autoplay”属性，preload属性不会生效

5-7 视频引入

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>视频引入</title></head><body>    <!--<audio src="m/wdzg.mp3" controls autoplay loop muted preload></audio>--><video src="v/wdzg.mp4" poster="img/logo.png" width="600" height="400" controls loop muted preload>您的浏览器不支持video</video></body>
</html>

 video:在网页中引入音频IE8以及之前版本不支持属性名和属性值一样，可以只写属性名src属性:指定视频文件路径，必须要有controls属性：显示播放控件,autoplay属性：视频在就绪后马上播放loop属性：视频播放结束后重新开始muted属性：视频输出应该被静音preload属性：页面加载时就开始加载视频，并预备播放.如果使用了“autoplay”属性，preload属性不会生效width属性和height属性：1.width属性：设置视频窗口宽度，height属性：设置视频窗口高度2.不设置，视频窗口会按原始尺寸显示3.如果只设置1个属性，另一个会根据已设置的属性等比例缩放4.如果2个属性都设置，可能会变形5.默认单位为像素，也可以使用百分比poster属性：用于在视频加载时或用户在点击播放前显示的图片,属性值是图片路径

5-8 定义媒介资源

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>定义媒介资源</title></head><body>          <video width="400" controls><source src="v/movie.ogg" type="video/ogg"></source><source src="v/wdzg.mp4" type="video/mp4"></source>          当前浏览器不支持 video直接播放</video></body>
</html>
 source标签用来为<video>和<audio>定义媒介资源src属性：定义资源路径type属性：规定媒介资源的类型浏览器会自动从上往下找能识别的资源类型

第六章：文本元素

6-1 标题元素

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>标题元素</title></head><body>        <h1>桃花源记</h1><h2>桃花源记</h2><h3>桃花源记</h3><h4>桃花源记</h4><h5>桃花源记</h5><h6>桃花源记</h6></body>
</html>
 h1-h6标签可以用来定义标题标题标签有强调作用，有确切的语言义，h1-h6重要性递减h1定义最大的标题，h6定义最小的标题h1标签在同一个页面只能使用一次,h2-h6可以多次使用标题标签会独占一行不要利用h标签来改变文字大小，使用css更方便，更美观

6-2 段落元素

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>段落元素</title><style type="text/css">h1{text-align: center;}p{text-indent: 2em;}</style></head><body><h1>桃花源记</h1><p>晋太元中，武陵人捕鱼为业。缘溪行，忘路之远近。忽逢桃花林，夹岸数百步，中无杂树，芳草鲜美，落英缤纷，渔人甚异之，复前行，欲穷其林。</p><p>林尽水源，便得一山，山有小口，仿佛若有光。便舍船，从口入。初极狭，才通人。复行数十步，豁然开朗。土地平旷，屋舍俨然，有良田美池桑竹之属。阡陌交通，鸡犬相闻。其中往来种作，男女衣着，悉如外人。黄发垂髫，并怡然自乐。</p><p>见渔人，乃大惊，问所从来。具答之。便要还家，设酒杀鸡作食。村中闻有此人，咸来问讯。自云先世避秦时乱，率妻子邑人来此绝境，不复出焉，遂与外人间隔。问今是何世，乃不知有汉，无论魏晋。此人一一为具言所闻，皆叹惋。余人各复延至其家，皆出酒食。停数日，辞去。此中人语云：“不足为外人道也。”</p><p>既出，得其船，便扶向路，处处志之。及郡下，诣太守，说如此。太守即遣人随其往，寻向所志，遂迷，不复得路。</p><p>南阳刘子骥，高尚士也，闻之，欣然规往。未果，寻病终，后遂无问津者。</p></body>
</html>
 浏览器会忽略代码中的格式，多个空格符，回车符，制表符，会解析成一个空格（非常重要）p标签用来标记一个段落，是常见的一个标记p标签会独占一行

6-3 斜体标签

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>斜体标签</title><style type="text/css">h1{text-align: center;}p{text-indent: 2em;}</style></head><body>    <h1>桃花源记</h1><p><i>晋太元中</i>，<em>武陵人捕鱼为业</em>。缘溪行，忘路之远近。忽逢桃花林，夹岸数百步，中无杂树，芳草鲜美，落英缤纷，渔人甚异之，复前行，欲穷其林。</p></body>
</html>

 i标签：单纯显示斜体文本效果em标签：           1.显示斜体文本效果2.有强调作用强调需要技巧，强调太多，有些重要语句会被漏掉，不要滥用强调如果仅需要单纯的斜体，请使用i标签，而不要使用em标签

6-4 粗体标签

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>粗体标签</title><style type="text/css">h1{text-align: center;}p{text-indent: 2em;}</style></head><body>        <h1>桃花源记</h1><p><b>晋太元中</b>，<strong>武陵人捕鱼为业</strong>。缘溪行，忘路之远近。忽逢桃花林，夹岸数百步，中无杂树，芳草鲜美，落英缤纷，渔人甚异之，复前行，欲穷其林。</p>        </body>
</html>

 b标签：单纯显示加粗文本效果strong标签：           1.显示加粗文本效果2.有强调作用,比em标签的强调作用更强强调需要技巧，强调太多，有些重要语句会被漏掉，不要滥用强调如果仅需要单纯的粗体，请使用b标签，而不要使用strong标签

6-5 换行标签

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>换行</title><style type="text/css">h1{text-align: center;}p{text-indent: 2em;}</style></head><body>      <h1>桃花源记</h1><p><b>晋太元中,武陵人捕鱼为业。</b><br /><i>缘溪行，忘路之远近。忽逢桃花林，夹岸数百步，中无杂树，芳草鲜美，落英缤纷，渔人甚异之，复前行，欲穷其林。</i></p>     </body>
</html>
 换行标签br，单标签1.在不另起一段的情况下进行强制换行。2.一个br标签表示1次换行 ，连续多个标签可以实现多次换行。3.br标签不仅可以对文本换行，其它元素也可以使用br标签进行强制换行

6-6 水平分隔线

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>水平分隔线</title><style type="text/css">h1{text-align: center;}p{text-indent: 2em;}</style></head><body><h1>桃花源记</h1><p>晋太元中,武陵人捕鱼为业。缘溪行，忘路之远近。忽逢桃花林，夹岸数百步，中无杂树，芳草鲜美，落英缤纷，渔人甚异之，复前行，欲穷其林。</p><hr /><p>林尽水源，便得一山，山有小口，仿佛若有光。便舍船，从口入。初极狭，才通人。复行数十步，豁然开朗。土地平旷，屋舍俨然，有良田美池桑竹之属。阡陌交通，鸡犬相闻。其中往来种作，男女衣着，悉如外人。黄发垂髫，并怡然自乐。</p><hr /><p>见渔人，乃大惊，问所从来。具答之。便要还家，设酒杀鸡作食。村中闻有此人，咸来问讯。自云先世避秦时乱，率妻子邑人来此绝境，不复出焉，遂与外人间隔。问今是何世，乃不知有汉，无论魏晋。此人一一为具言所闻，皆叹惋。余人各复延至其家，皆出酒食。停数日，辞去。此中人语云：“不足为外人道也。”</p><hr /><p>既出，得其船，便扶向路，处处志之。及郡下，诣太守，说如此。太守即遣人随其往，寻向所志，遂迷，不复得路。</p><hr /><p>南阳刘子骥，高尚士也，闻之，欣然规往。未果，寻病终，后遂无问津者。</p></body>
</html>
 水平分隔线标签hr,单标签1.在视觉上将文档分隔成几个部分，使得文档结构清晰，层次分明2.hr标签可以在网页上画出一条水平分隔线3.hr标签的所有属性都不赞成使用，不要试图使用属性改变标签的样式4.应该使用css来修改hr标签的样式

6-7 span标签和字符实体

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>span标签和字符实体</title><style type="text/css">h1{text-align: center;}p{text-indent: 2em;}span{color: red;}</style></head><body>            <h1>桃花源记</h1><p><b>晋太元中,武陵人捕鱼为业。</b>溪行，忘路之远近。忽逢桃花林，夹岸数百步，中无杂树，芳草鲜美，落英缤纷，渔人甚异之，复前行，欲穷其林。</p><p><span>林尽水源，便得一山，山有小口，仿佛若有光。</span>便舍船，从口入。初极狭，才通人。复行数十步，豁然开朗。土地平旷，屋舍俨然，有良田美池桑竹之属。阡陌交通，鸡犬相闻。其中往来种作，男女衣着，悉如外人。黄发垂髫，并怡然自乐。</p>       </body>
</html>
 span标签：1.没有任何样式，是为了给文本增加额外的结构2.使用css给span元素中的内容添加丰富的样式3.span标签是使用最多的文本标签字符实体：html中预留字符必须替换成字符实体，才能被浏览器正常识别常见的字符实体：小于号：&lt;大于号：&gt;空格：&nbsp;&lt;h1&gt;标签&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;是标题标签

6-8 其它文本标签

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>其它文本标签</title></head><body><ins>我要自学网,网址：www.51zxw.net</ins><br /><del>我要自学网,网址：www.51zxw.net</del><br />5<sup>2</sup><br />O<sub>2</sub><br /><mark>我要自学网,网址：www.51zxw.net</mark></body>
</html>
 ins标签：定义下划线del标签：定义删除线sup标签：定义上标文本，高度为当前文本的一半sub标签：定义下标文本，高度为当前文本的一半mark标签：为文本添加黄色背景，突出显示文本以上标签仅作了解，基本不用，css可以很好实行相应的功能

第七章：列表与表格

7-1 无序列表

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>无序列表</title></head><body>                <ul><li>辽宁</li><li>吉林</li><li>辽黑龙江</li></ul>                    </body>
</html>
 样式相同的一组元素，可以称为列表无序列表：1.列表中各个元素在逻辑上没有先后顺序，没有级别之分2.无序列表中，列表项之间属于并列关系无序列表语法：<ul>无序列表开始<li></li>每一个列表项</ul>无序列表结束4.浏览器会要每个列表项前加上小圆点，不能修改其样式，并不实用5.通常会对无序列表进行样式重置。6.每个列表项独占一行7.无序列表是使用最广泛的列表

7-2 有序列表

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>有序列表</title></head><body><ol type="I"><li>辽宁</li><li>吉林</li><li>黑龙江</li></ol><olstyle="list-style-type: upper-alpha;"><li>辽宁</li><li>吉林</li><li>黑龙江</li></ol>    </body>
</html>
 有序列表：1.列表中各个元素在逻辑上有先后顺序2.有序列表中，列表项之间属于并列关系有序列表语法：<ol>有序列表开始<li></li>每一个列表项</ol>有序列表结束4.有序列表中的列表项默认以数字开头，可以用"type"属性修改5.type属性：数字：1  小写英文：a  大写英文：A  小写罗马：i  大写罗马：I6.不赞成使用type属性修改，可以使用css代替7.有序列表基本用不上

7-3 自定义列表

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>自定义列表</title></head><body><dl><dt>东北三省</dt>        <dd>辽宁</dd><dd>吉林</dd><dd>黑龙江</dd><dt>西南三省</dt>     <dd>云南</dd><dd>贵州</dd><dd>四川</dd></dl>    </body>
</html>
 自定义列表：1.自定义列表是两个层次的列表，由三种标签构成2.基本语法：<dl></dl>标签表示自定义列表的开始和结束<dt></dt>标签表示列表标题的开始和结束<dd></dd>标签表示每个列表项3.<dd>标记定义的列表项会向右缩进 4.自定义列表可以实现在一个列表中进行多个分组自定义列表用得不多

7-4 创建表格1 table tr th td

7-5 创建表格2

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>表格</title></head><body>      <table border="1" cellspacing="0"><tr><th>表头第1格</th><th>表头第2格</th><th>表头第3格</th><th>表头第4格</th><th>表头第5格</th></tr>         <tr><td><img src="logo.gif"/></td><td>第2行第2格</td><td>第2行第3格第2行第3格</td><td>第2行第4格</td><td>第2行第5格</td></tr><tr><td>第3行第1格</td><td>第3行第2格</td><td>第3行第3格</td><td>第3行第4格</td><td>第3行第5格</td></tr></table></body>
</html>

 table标签用来定义表格tr标签表示表格中的一行th标签表示表头单元格th中的文本会加粗，文本会居中td标签表示一个单元格td中的文本是左对齐的普通文本表格注意事项：1.table  tr  th  td  标签之间不能有任何内容，所有的内容都要写到th或td中2.不要试图通过属性来改变表格的样式，应该使用css对表格样式进行设置3.表格的单元格中可以放入任何元素，不仅是文字

7-6 单元格合并 colspan rowspan

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>表格</title></head><body><table border="1" cellspacing="0"><tr><th>表头第1格</th><th>表头第2格</th><th>表头第3格</th><th>表头第4格</th><th>表头第5格</th></tr>           <tr><td colspan="2">第2行第1格</td><td>第2行第3格</td><td rowspan="2">第2行第4格</td><td>第2行第5格</td></tr><tr><td>第3行第1格</td><td>第3行第2格</td><td>第3行第3格</td><td>第3行第5格</td></tr><tr><td>第4行第1格</td><td rowspan="2" colspan="2">第4行第2格</td><td>第4行第4格</td><td>第4行第5格</td></tr><tr><td>第5行第1格</td><td>第5行第4格</td><td>第5行第5格</td></tr>           </table></body>
</html>
 合并单元格：1.在代码中找到要合并的单元格2.保留要合并的第一个单元格，删除其它的单元格3.给保留的单元格指定横跨的行数或列数a.合并左右单元格（合并列）用：colspan="横跨的列数";b.合并上下单元格（合并行）用：rowspan="横跨的行数";

7-7 制作课程表

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>课程表</title></head><body><h3>课程表</h3><table border="1" cellspacing="0"><tr><th colspan="2"></th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr><!--tr*8>td*7--><tr><td rowspan="4">上<br />午</td><td>1</td><td>数学</td><td>语文</td><td>数学</td><td>语文</td><td>数学</td></tr><tr><td>2</td><td>语文</td><td>数学</td><td>语文</td><td>数学</td><td>语文</td></tr><tr><td>3</td><td>外语</td><td>政治</td><td>外语</td><td>政治</td><td>外语</td></tr><tr><td>4</td><td>地理</td><td>外语</td><td>地理</td><td>外语</td><td>地理</td></tr><tr><td rowspan="4">下<br />午</td><td>5</td><td>体育</td><td>历史</td><td>体育</td><td>历史</td><td>体育</td></tr><tr><td>6</td><td>生物</td><td>美术</td><td>生物</td><td>美术</td><td>生物</td></tr><tr><td>7</td><td>自习</td><td>班会</td><td>自习</td><td>班会</td><td>自习</td></tr><tr><td>8</td><td>音乐</td><td>劳技</td><td>音乐</td><td>劳技</td><td>音乐</td></tr></table></body>
</html>

第八章：布局元素

8-1 元素类型

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>元素的类型</title></head><body><h1style="width: 200px;height: 50px; background: aqua;">我要自学网</h1><bstyle="width: 200px;height: 50px; background: aqua;">我要自学网</b><span>我要自学网</span><pstyle="width: 200px;height: 50px; background: aqua;">我要自学网</p><img src="logo.jpg"style="width: 400px;"/><img src="logo.jpg"/>       </body>
</html>
 块级元素：1.独占一行，不和其它元素呆在一起2.可以设置宽高3.用来网页进行布局，承载内容行级元素1.不会独占一行，可以和其它元素呆在一行2.不可以设置宽高,宽高由里面的内容决定行内块级元素 1.不会独占一行，可以和其它元素呆在一行2.可以设置宽高元素类型可以相互转换，css中学习

8-2 div标签

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>div标签</title></head><body>       <divstyle="width: 1100px; background: antiquewhite; margin: 0 auto;"><img src="51zxw.png" width="100%"/></div></body>
</html>

 div标签定义文档中的区块，可以把文档分割为独立的，不同的部分div标签可以嵌套任何元素，包括div自己div是用来承载内容，相当于一个容器。没有其它任何样式是使用最广泛的布局元素，所有浏览器都支持div标签

8-3 header和footer标签

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>header和footer标签</title></head><body><header></header><div class="content"></div><footer></footer></body>
</html>
 header和footer标签:是html5中新标签header:定义文档的页眉，通常用来定义可见内容的头部footer:定义文档的页脚，通常用来定义可见内容的尾部header和footer标签只是div标签的变种，功能和div标签一样header和footer标签有很强的语义,使得网页结构更清晰IE8以及更早的版本不支持header和footer标签

8-4 nav和aside标签

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>nav和aside标签</title></head><body><header></header><div class="content"><nav></nav><aside></aside></div><footer></footer></body>
</html>
 nav和aside标签:是html5中新标签nav:定义导航栏aside:定义侧边栏nav和aside标签只是div标签的变种，功能和div标签一样nav和aside标签有很强的语义,使得网页结构更清晰IE8以及更早的版本不支持nav和aside标签

8-5 section和article标签

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>section和article标签</title></head><body><header></header><div class="content"><section></section><article></article></div><footer></footer></body>
</html>
 section和article标签:是html5中新标签section:对页面上的内容进行分块，通常由内容及其标题组成article:定义独立的，完整的，可以独自被外部引用的内容section和article标签只是div标签的变种，功能和div标签一样section和article标签有很强的语义section和article标签对于初学者不建议使用IE8以及更早的版本不支持section和article

8-6 布局我要自学网首页

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>图片布局我要自学网首页</title></head><body><headerstyle="width: 1000px; margin: 0 auto;"><div><img src="images/zxw_01.gif"/></div><nav><img src="images/zxw_02.gif"/></nav></header><div class="content"style="width: 1000px; margin: 0 auto;"><img src="images/zxw_03.gif"/><img src="images/zxw_04.gif"/><img src="images/zxw_05.gif"/><img src="images/zxw_06.gif"/><img src="images/zxw_07.gif"/><img src="images/zxw_08.gif"/><img src="images/zxw_09.gif"/></div><footerstyle="width: 1000px; margin: 0 auto;"><img src="images/zxw_10.jpg"/></footer></body>
</html>

第九章：表单元素

9-1 创建表单

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>创建表单</title></head><body><form action="服务器地址" method="get"></form></body>
</html>
 form标签用于创建一个表单，会将里面的内容一起发送服务器，结构类似于表格表单中的其它元素都要包含在form标签中form元素属性：1.必须，action指定表单发送的地址（服务器地址）2.method:表单数据发送至服务器的方法，常用的有两种：get/post,默认：get

9-2 form元素属性

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>form元素属性</title></head><body><form action="https://www.51zxw.net" method="get" name="51zxw" ><input type="text" name="myname" id="uname" value="请输入..." /><input type="submit" value="发送" />           </form></body>
</html>
 form标签用于创建一个表单，会将里面的内容一起发送服务器，结构类似于表格表单中的其它元素都要包含在form标签中form元素属性：1.必须，action指定表单发送的地址（服务器地址）2.method:表单数据发送至服务器的方法，常用的有两种：get/post,默认：get3.name:用来为当前表单定义一个独一无二的名称，控制表单与后台程序之间的关系4.novalidate:设置数据提交时不进行验证,通常不会用到5.target:设置目标窗口打开方式,通常不会用到

9-3 get和post区别

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>get/post区别</title></head><body><form action="https://www.51zxw.net" method="post" name="51zxw" ><input type="text" name="myname" id="uname" value="请输入..." /><input type="submit" value="发送" />            </form></body>
</html>
     get/post区别get方法提交：数据会附在网址之后提交给服务器，不安全.数据量很小post方法提交：数据不会附在网址之后，会将表单中的所有数据进行打包发送服务器，等待服务器读取。安全过程。数据量不受限制。 是使用最多的提交方法.

9-4 本地安装服务器环境

 本地安装服务器环境：1.下载phpstudy软件，点击安装2.打开软件，启动"套件"中的前三项3.打开浏览器，地址栏输入“127.0.0.1”,回车4.看到“站点创建成功”，表示本地安装服务器环境成功5.把程序目录中的“www文件夹”发送到桌面

9-5 表单发送

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>表单发送</title></head><body><form action="http://127.0.0.1/51zxw.php" method="post"><input type="text" name="uname"/><input type="submit" /></form></body>
</html>

<?php$username = $_POST['uname'];echo "用户名：".$username;
?>

 注意：1.表单接收程序，放在服务器环境中2.表单发送地址，一定要填写完整，加上http://

9-6 type和name属性

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>type和name属性</title></head><body><form action="http://127.0.0.1/51zxw.php" method="post"><input type="text" name="abc"/><input type="submit" /></form></body>
</html>
 1.input元素是最常用的表单控件2.input元素可以在表单之外使用input元素的type属性：(必须要有)1.指定输入内容的类型2.默认为text,单行文本框input元素的name属性：(必须要有)1.传递参数时的参数名称2.表单接收找的就是name属性值

9-7 value和placeholder属性

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>value和placeholder属性</title></head><body><form action="http://127.0.0.1/51zxw.php" method="post"><!--<input type="text" name="abc" value="请输入..."/><br />--><input type="text" name="abc" placeholder="请输入..."/><input type="submit"  value="确定"/></form></body>
</html>
 input元素的value属性：1.输入框中的默认值2.value值会发送到服务器input元素的placeholder属性：1.输入框中的默认值,当文本框获得焦点时被清空2.placeholder中的值不会发送到服务器

9-8 maxlength和disabled属性

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>maxlength和disabled属性</title></head><body>        <form action="http://127.0.0.1/51zxw.php" method="post"><!--<input type="text" name="abc" placeholder="请输入电话号码" maxlength="11"/>-->格式提示：<input type="text"  placeholder="XX省XX市XX区XX号"  disabled="disabled"/><br />输入地址：<input type="text" name="abc" placeholder="请输入地址" /><input type="submit"  value="确定"/></form></body>
</html>
 input元素的maxlength属性:1.控制输入的最大字数2.包括英文，数字，汉字等input元素的disabled属性:1.设置为不可用，不可操作，不能修改，不提交到服务器2.用于格式提示

9-9 autofocus和autocomplete属性

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>autofocus和autocomplete属性</title></head><body><form action="http://127.0.0.1/51zxw.php" method="post"><!--<input type="text" name="abc" placeholder="请输入..." autofocus="autofocus"/>--><input type="text" name="abc" placeholder="请输入..." autocomplete="off"/><input type="submit"  value="确定"/></form></body>
</html>
 input元素的autofocus属性:1.让输入框自动获得焦点。2.打开页面以后，光标自动处于编辑状态input元素的autocomplete属性:1.属性值：on/off.2.定义是否开启浏览器自动记忆功能

9-10 单行文本框和密码输入框

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>单行文本框和密码输入框</title></head><body><form action="http://127.0.0.1/51zxw.php" method="post">用户名：<input type="text" name="uname"/><br />密码：<input type="password" name="password"/><input type="submit" /></form></body>
</html>
<?php   $username = $_POST['uname'];$pwd = $_POST['password'];echo "用户名：".$username;echo "<br>";echo "密码：".$pwd;
?>

 input元素的type属性：(必须要有)-->  单行文本框:1.type="text"2.可以输入任何类型的文本，数字，汉字，字母。3.输入的内容以单行显示密码输入框:1.type="password"2.输入的字符会以圆点或星号显示3.输入的内容会被隐藏

9-11 提交按钮和重置按钮

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>提交按钮和重置按钮</title></head><body><form action="http://127.0.0.1/51zxw.php" method="post">用户名：<input type="text" name="uname"/><br />密码：<input type="password" name="password"/><br /><input type="submit" value="发送"/><input type="reset"  value="重写"/></form></body>
</html>
 input元素的type属性：(必须要有)提交按钮:1.type="submit"2.点击后将数据发送到服务器3.可以用value改变按钮的名称重置按钮:1.type="reset"2.清空输入框中的内容3.可以用value改变按钮的名称

9-12 普通按钮和隐藏域

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>普通按钮和隐藏域</title></head><body><form action="http://127.0.0.1/51zxw.php" method="post">用户名：<input type="text" name="uname"/><br />密码：<input type="password" name="password"/><br /><input type="hidden" name="xjd" value="小家电"/><br /><input type="submit" /><input type="reset" /><input type="button"  value="普通按钮"/></form></body>
</html>
<?php   $username = $_POST['uname'];$pwd = $_POST['password'];$xjd = $_POST['xjd'];echo "用户名：".$username;echo "<br>";echo "密码：".$pwd;echo "<br>";echo "隐藏域：".$xjd;
?>

 input元素的type属性：(必须要有)普通按钮:1.type="button"2.定义的是一个可以点击的按钮，但是没有任何的行为。没有任何的样式3.可以用value改变按钮的名称4.常用于点击按钮时来启动js程序隐藏域:1.type="hidden"2.隐藏域不会显示在页面中。一般是网页设计者设置好的数据3.表单提交时，隐藏域中的value会提交到服务器

9-13 数字输入框和活动条

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>数字输入框和活动条</title></head><body><form action="https://www.51zxw.net" method="get"><input type="number" name="abc"  value="10" min="5" max="20" step="5"/><br /><input type="range" name="bcd"  value="10" min="10" max="80" step="5"/><br /><input type="submit" />            </form>       </body>
</html>
 input元素的type属性：(必须要有)数字输入框:1.type="number"2.专门用来输入数字，其它类型不能输入3.min:允许输入的最小值4.max:允许输入的最大值5.step:步长活动条:1.type="hidden"2.专门用来输入数字，其它类型不能输入3.min:允许输入的最小值4.max:允许输入的最大值5.step:步长

9-14 时间输入框,颜色选择器和文件域

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>时间输入框,颜色选择器和文件域</title></head><body><form action="https://www.51zxw.net" method="get"><input type="datetime-local" name="abc" /><br /><input type="color" name="bcd"  /><br /><input type="file" name=""  accept="image/jpeg" multiple="multiple"/><br /><input type="submit" /></form></body>
</html>
 input元素的type属性：(必须要有)时间输入框:1.type="time/datetime/datetime-local/date/month/week"颜色选择器:1.type="color"文件域:1.type="file"2.用于文件上传3.accept：规定选取文件类型4.multiple：规定一次允许选择多个文件

9-15 单选框

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>单选框</title></head><body><form action="https://www.51zxw.net" method="get">姓别：<input type="text" name="uname" /><br />性别：<input type="radio" name="sex" value="1" />男<input type="radio" name="sex" value="0" checked/>女<input type="radio" name="sex" value="10" />人妖<br /><input type="submit" /></form></body>
</html>
 input元素的type属性：(必须要有)单选框:1.type="radio"2.name属性值必须设置成相同属性值(很关键)3.向服务器发送的是value值4.可以通过checked设置默认选取状态，再次单击取消选取

9-16 复选框

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>复选框</title></head><body><form action="http://127.0.0.1/51zxw2.php" method="post">姓别：<input type="text" name="uname" /><br />喜欢的水果：<input type="checkbox" name="sg[]" value="pg" />苹果<input type="checkbox" name="sg[]" value="xj" />香蕉<input type="checkbox" name="sg[]" value="pt" />葡萄<br /><input type="submit" /></form></body>
</html>
<?php$r = "";foreach($_POST['sg'] as $i){$r .=$i.",";};echo $r;
?>

 input元素的type属性：(必须要有)复选框:1.type="checkbox"2.name属性值必须设置成相同属性值,在属性值后加上中括号(很关键)3.向服务器发送的是value值4.可以通过checked设置默认选取状态，再次单击取消选取

9-17 电子邮箱和网址输入框

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>网址输入框</title></head><body><form action="https://www.51zxw.net" method="get">单行输入：<input type="text" name="abc" /><br />电子邮箱：<input type="email" name="email"/><br />网址：<input type="url" name="url"/><br /><input type="submit" /></form></body>
</html>
 input元素的type属性：(必须要有)电子邮箱输入框:1.type="email"2.会对输入的内容进行验证，符合可以发送，不符合弹出提示框网址输入框:1.type="url"2.会对输入的内容进行验证，符合可以发送，不符合弹出提示框3.输入的网址一定要包含协议（http://或者https://）

9-18 表单验证属性

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>表单验证属性</title></head><body><form action="https://www.51zxw.net" method="get"><!--单行输入：<input type="text" name="abc" pattern="[a-z]{5}"/>--><br />单行输入：<input type="text" name="abc" placeholder="必须填写" required/><input type="submit" /></form></body>
</html>
 input元素的type属性：(必须要有)pattern属性:1.规定输入字符的模式2.模式指的是：正则表达式           required属性:1.规定必须在提交前填写输入字段，不填写不能提交

9-19 多行文本输入框

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>多行文本输入框</title></head><body><!--<input type="text"  />-->     <textarea name=""style="width: 200px;height: 150px;"></textarea></body>
</html>
 多行文本输入框:1.textarea标签2.文本输入区域可以容纳无限数量的文本3.多行文本输入框和单行文本输入框的属性差不多4.不要使用rows和cols设置多行文本输入框的行数和列数。应使用css设置宽高5.多行文本输入框可以在表单之外使用

9-20 下拉列表

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>下拉列表</title></head><body><form action="https://www.51zxw.net" method="get"><select name="abc" size="3" ><option value="a">辽宁</option><option value="b">吉林</option><option value="c">黑龙江</option> <option value="d">四川</option><option value="e">云南</option><option value="f">贵州</option> </select><input type="submit" value="提交"/></form></body>
</html>
 select:1.表示创建下拉列表2.size属性设置列表中显示多少个列表项option：1.表示每一个下拉列表项2.往服务器中发送的是value值

9-21 下拉列表分组

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>下拉列表分组</title></head><body><form action="http://127.0.0.1/51zxw3.php" method="post">到过的省市：<br /><select name="abc[]" size="5" multiple><optgroup label="东北"><option value="a">辽宁</option><option value="b">吉林</option><option value="c">黑龙江</option> </optgroup><optgroup label="西南"><option value="d">四川</option><option value="e">云南</option><option value="f">贵州</option> </optgroup></select><input type="submit" value="提交"/></form></body>
</html>
 select:1.表示创建下拉列表2.size属性设置列表中显示多少个列表项3.multiple属性可以定义多选4.多选时，name属性值后应加上"[]".option：1.表示每一个下拉列表项2.往服务器中发送的是value值optgroup：1.用来对option进行分组2.label属性设置分组名称

9-22 button按钮

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>button按钮</title></head><body><form action="https://www.51zxw.net" method="get"><input type="text" name="abc" /><br /><input type="submit" value="提交"/><input type="reset" value="重置"/><input type="button" value="普通"/><br /><br /><button type="submit">提交</button><button type="reset">重置</button><button type="submit"style="border-radius:50% ; overflow: hidden; border: none; width: 50px;height: 50px;padding: 0;"><img src="btn.jpg" width="50" height="50"/></button></form></body>
</html>
 button按钮：1.type属性：可以设置三个值，submit/reset/button,含义和input按钮一样2.name/vlue/disable属性，与input的用法一样3.button标签是双标签，进行更加复杂的样式设计4.注意：表单中请使用input按钮，表单外使用button按钮。

9-23 表单实战1

9-24 表单实战2

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>表单实战</title></head><body><form action="" method="post">姓名*：<input type="text" name="user" required/><br /><br />密码*：<input type="password" name="pwd" required/><br /><br />性别*：<input type="radio" name="sex" value="1" required/>男<input type="radio" name="sex" value="0" required/>女<br /><br />年龄*：<input type="number" name="age" min="0" max="100" required/><br /><br />课程*：<input type="checkbox" name="kc[]" value="k1"/>课程1<input type="checkbox" name="kc[]" value="k2"/>课程2<input type="checkbox" name="kc[]" value="k3"/>课程3<br /><br />手机*：<input type="text" name="tel" pattern="[0-9]{11}" required/><br /><br />城市*：<select name="city1" required><option value="bj">北京</option><option value="sh">上海</option></select><select name="city2" ><option value="xx">XX区</option><option value="yy">YY区</option></select>           <br /><br />住址：<input type="text" name="add"/><br /><br />备注：<textarea name="bz"style="width: 200px;height: 80px;">请输入...</textarea><br /><br /><input type="submit"/><input type="reset"  /></form></body>
</html>

第十章：补充内容

10-1 内联框架

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>内联框架</title><style type="text/css">iframe{width: 100%;height: 500px;}</style></head><body><h1>我要自学网</h1><iframe src="http://www.jd.com" frameborder="1">你的浏览器不支持</iframe></body>
</html>
 iframe元素会创建包含另外一个文档的内联框架。属性：1.src：指定在框架中显示的文档的URL2.frameborder:规定是否显示框架周围的边框  1/0 在<iframe></iframe>中写入文字，来应对无法解析iframe标签的浏览器

10-2 标签嵌套

 1.块级元素常见有：div,所有的布局元素，h1-h6,p,ul,li..2.行级元素常见有：a,span,strong,b,i,sub,sup.....3.行内块级元素常见有：img,input,video,audio...嵌套关系：1.块级元素：块级元素可以嵌套块级元素，行级元素，行内块级元素<div><div></div><h1></h1><p></p></div><div><span></span><a ></a><b></b></div><div><img /><input /></div>2.行级元素:<a > <span></span> <img src="" alt="" /></a>行级元素不能嵌套块级元素，如要嵌套，需要把行级元素转成块级元素再嵌套3.行内块级元素:<video > <span></span></video>只能嵌套行级元素注意：h1-h6,p不能嵌套块级元素

10-3 网页编码及乱码处理

 网页编码：指网页中特定的字符编码常用的字符编码：1.UTF-8:万国码，几乎支持所有的语言。推荐使用的编码2.GBK(GB2312):汉字内码扩展，兼容gb2312.中文编码网页需正确设置编码，才能在浏览器中正常显示网页编码分成两部分1.头部设置的编码2.网页本身的编码将两部分的编码设置成一致，就可以解决网页乱码

10-4 图像地图

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>图像地图</title></head><body><img src="map.jpg" usemap="#Map"/><map name="Map"><area shape="rect" coords="498,367,524,411" href="https://www.51zxw.net"><area shape="circle" coords="301,331,85" href="http://www.jd.com"><area shape="poly" coords="464,7,478,22,497,28,505,45,490,70,489,96,491,124,504,128,475,148,457,148,460,186,505,197,558,144,575,114,591,66,591,34,512,12,468,2" href="http://www.baidu.com"></map></body>
</html>
 图像地图：把图像分成很多区块，其中每个区块都是一个超链接使用dreamware做图像地图最方便

10-5 代码快捷输入方式

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>代码快捷输入方式</title></head><body><!--1.父子关系：--><!--div>p--><div><p></p></div><!--2.兄弟关系--><!--div+p--><div></div><p></p><!--3.乘法关系--> <!--ul>li*4--><ul><li></li><li></li><li></li><li></li></ul><!--4.id及class属性--><!--div#one--><div id="one"></div><!--div.two--><div class="two"></div><!--5.元素内容-->  <!--div.two{我是div元素}--><div class="two">我是div元素</div><!--6.自增符号$--><!--p.a${我是第$个段落}*3--><p class="a1">我是第1个段落</p><p class="a2">我是第2个段落</p><p class="a3">我是第3个段落</p></body>
</html>

【html】基础极速笔记相关推荐

  1. 尚硅谷Java零基础极速入门七天版笔记

    Java零基础极速入门 文章目录 Java零基础极速入门 1 Java快速入门 1.1计算机语言 1.2 Java语言 1.3 JVM 1.4 环境配置 2 基础语法 2.1 变量 2.2 标识符 2 ...

  2. access2013数据库实验笔记_医学科研实验基础知识笔记（十）：甲基化

    往期回顾 医学科研实验基础知识笔记(一):细胞增殖 医学科研实验基础知识笔记(二):细胞凋亡检测 医学科研实验基础知识笔记(三):细胞周期检测 医学科研实验基础知识笔记(四):细胞自噬研究策略 医学科 ...

  3. guido正式发布python年份_Python 基础学习笔记.docx

    Python 基础学习笔记 基于<Python语言程序设计基础(第2版)> 第一部分 初识Python语言 第1章 程序设计基本方法 1.1 计算机的概念 计算机是根据指令操作数据的设备, ...

  4. Java基础复习笔记系列 九 网络编程

    Java基础复习笔记系列之 网络编程 学习资料参考: 1.http://www.icoolxue.com/ 2. 1.网络编程的基础概念. TCP/IP协议:Socket编程:IP地址. 中国和美国之 ...

  5. ASP.Net MVC开发基础学习笔记（5）：区域、模板页与WebAPI初步

    http://blog.jobbole.com/85008/ ASP.Net MVC开发基础学习笔记(5):区域.模板页与WebAPI初步 2015/03/17 · IT技术 · .Net, Asp. ...

  6. Python基础入门笔记（二）

    前言 本文主要为 Python基础入门笔记(一)内容的补充. 一.迭代器和生成器 1.1 Python迭代器 迭代器是一个可以记住遍历的位置的对象. 迭代器对象从集合的第一个元素开始访问,直到所有的元 ...

  7. 11岁过python1级_11岁表弟写的Python零基础入门笔记！

    一.Python输入与输出输出:使用print()函数. print()函数的基本语法格式如下:print(输出内容). 输出内容可以是数字和字符串(字符串需要用引号括起来),也可以是包含运算符的表达 ...

  8. Object-C基础入门笔记(一)

    OC基础入门笔记之一 // // main.m // oc // // Created by lujun on 2020/9/20. // Copyright © 2020 lujun. All ri ...

  9. java基础巩固笔记(6)-注解

    2019独角兽企业重金招聘Python工程师标准>>> java基础巩固笔记(6)-注解 标签: java [TOC] 注解(Annotation),也叫元数据.一种代码级别的说明. ...

最新文章

  1. 分布式id 实现方式
  2. linux find命令使用示例
  3. 简单实现仿某宝地址选择三级联动样式
  4. 设备的分配与调度简单方案_连铸生产调度与动态重调度的优化与研究-3，炼钢技术（3）原创...
  5. linux c之解决array subscript is not integer和AF_NET not undeclared
  6. 夫学须静也freeeim
  7. 【ES6(2015)】Module模块
  8. 51nod 1686 第K大区间 二分瞎搞
  9. C++ – 第一次作业
  10. 针对递归函数的优化与Python修饰器实现
  11. finfoopen需要什么扩展 php_php获取文件mime类型的几种方法
  12. 鼠标onfocus或onblur效果
  13. 实用的才是最好的，教你如何以MATLAB的方式实现高等应用数学问题（一）
  14. 软件工程--螺旋模型详解
  15. Abaqus帮助文档翻译——Abaqus/CAE主窗口介绍
  16. Python技术pip的使用命令总结
  17. 猫哥说创业：发布软文赚钱术（1）
  18. IDV软件相关中英文对照
  19. 未来是机器人还是人类的天下？
  20. 任正非最新讲话：最好的防御就是进攻

热门文章

  1. 一种有手就行的物联网平台的多终端接入方法
  2. python3 cookbook中常遇问题的解答记录
  3. npm与cnpm详解
  4. 开发 HTML5 小游戏
  5. H5 App开发技术如何进行选型 ？
  6. Pandas项目实战1——好莱坞百万级电影评论数据分析
  7. android listview 导航条,Android侧边导航栏+ListView基础实践
  8. 使用IBM SPSS快速对数据进行分组
  9. 佟刚老师最全的SpringmVC博客网址
  10. 如何用VBA从身份证号码中提取性别