HTML5开发教程—day32（笔记）

最新推荐文章于 2022-04-15 19:27:59 发布

lifetruth123

最新推荐文章于 2022-04-15 19:27:59 发布

阅读量198

点赞数

分类专栏： html5 文章标签： html5

本文链接：https://blog.csdn.net/weixin_43497769/article/details/112393382

版权

html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

主要内容：

主要内容：

1.html基本结构

（1）html基本结构：

DTD(Document Type Definition)   -------文档定义类型
<html>              -----------------文档根标记
    <head>           -----------------文档头部标记
        <meta>        -----------------主要用于文档字符集、使用语言、作者等基本信息
        <title>标题</title>      -----------------标题标记
    </head>
    <body>              -----------------网页主体
        网页主体部分
    </body>
</html>

（2）html标记及其属性
语法：
单标记：<标记名称属性名称=“属性值”/>
双标记：<标记名称属性名称=“属性值”></标记名称>
注意：
标记中的属性是以名值对的形式出现的
属性的值必须写在引号内
双引号或者单引号必须是英文符号
标记与标记之间可以顺序嵌套，双标记必须死封
html:xt再按Tab键—可以将html基本结构补充完整

<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Translational//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-translational.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
    123
</body>
</html>

（3）html中的一些常用标记
文字加粗 
文字倾斜 
文字下划线 
文字删除线 < s>< /s>
文字下标 
文字上标 
修改字体形式

<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Translational//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-translational.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
    <b>1233</b>    //加粗
    <i>sasdf</i>   //字体倾斜
    <u>knowlege</u>   // 下划线
    <s>1233</s>     //删除线
    x<sup>2</sup>   //上标
    <br />          //换行
    y<sub>1</sub>   //下标
    <br />
    <font size="7" color="red" face="黑体">大家好！</font>    //修改字体形式
    <font size="5" color="rgb('255,200,255')" face="楷体">前端开发</font>    //修改字体形式
    <font size="5" color="#333333" face="宋体">哈哈哈哈哈</font>    //修改字体形式
</body>
</html>

2.HTML常用标签&注释

（1）常用标签：

    段落  <p>  </p>
    属性名称    属性值       说明
    align     left        向左靠
              center      居中
              right       向右靠
    示例：<p align="left">段落中的内容</p>
    标题：<h1>……</h1>
         <h2>……</h2>
         <h3>……</h3>
         <h4>……</h4>
         <h5>……</h5>
    属性名称    属性值       说明
    align     left        向左靠
              center      居中
              right       向右靠
    示例：<h1 align="left">标题内容</h1>
    水平线  <hr />
    属性名称     属性值      说明
    size       像素（数字）  数字越大，水平线越粗
               百分比（%）  百分比越大，水平线越粗
    width      像素（数字）  水平线长度会随数字大小变化
               百分比（%）  水平线长度会随百分比大小变化，并且会随着浏览器窗口大小变化
    noshade    noshade    水平线实心
    实例：<hr size="20" width="50%" noshade="noshade"/>

<p>第一段</p>
    <p align="left">第二段</p>
    <p align="center">第三段</p>
    <p align="right">第四段</p>
    <hr size="4" width="1000" noshade="noshade"/>
    <h1>我是标题1</h1>
    <h2 align="center">我是标题2</h2>
    <h3 align="right">我是标题3</h3>
    <h4>我是标题4</h4>
    <h5>我是标题5</h5>

（2）注释：
注释的作用：程序员在编写网页的过程中，由于代码的复杂性，便于后期查找并作出修改和维护，也为了项目组其他成员方便协同办公，我们会在代码旁边作出注释。
语法：< !- -注释内容 - ->

<a href="http://www.baidu.com">百度一下，你就知道</a>
    <!--以上是百度跳转链接-->

（3）HTML实体
为什么要用html实体？
为了防止浏览器解析时产生歧义。
一些常用的html实体：

实体       表示作用
    &gt;      大于号(>)
    &lt;      小于号(<)
    &#39;     单引号(')
    &amp;     连接符(&)
    &quot;    双引号(")
    &nbsp;    不间断空格()
    &reg;     注册标
    &copy;    版权符

	<p>100&lt;p</p>  <!-- 100<p -->
    <p>100&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p</p>    <!--100     p-->
    <p>100&reg;p</p>    <!--100®p-->
    <p>100&copy;p</p>    <!--100©p-->

3.相对路径&绝对路径

(1)绝对路径：由完整的协议名称、主机名称、路径及文档全称组成例如：http://www.baidu.com
ftp://192.163.0.25/download/image003.jpg
(2)相对路径：根相对路径是以站点根目录开始的路径，以/开头

4.HTML图像与超链接

（1）HTML图像：

IMG标签        <img />
    属性名称        属性名称       说明
    src           图像链接地址    必选属性
    title         图像解释文字    鼠标悬停在图像上出现解释性文字
    alt           图像解释文字    由于某种原因图像未能正常显示，会在图像位置显示属性的值
    width         图像宽度数值    设置图像宽度
    height        图像高度数值    设置图像高度
    border        图像边框数值    设置图像边框

<img src="F:/123.gif" title="图片" alt="背景照片" width="800" height="500" border="8"/>

（2）HTML的超链接：

a标签 <a></a> 超链接的作用：可以在不同的html页面实现跳转
    属性名称       属性值         说明
    href         链接地址        需要跳转的链接地址
    target       _blank        跳转方式
                 _self         
                 _parent
                 _top

<a href="http://www.baidu.com" target="_blank">点击我</a>    <!--（target="_blank"）跳转方式，新建选项卡-->
    <a href="http://www.baidu.com" target="_self">点击我</a>    <!--（target="_self"）跳转方式，刷新选项卡，本页面-->

（3）瞄点链接：

当某个html页面为大长度的文章段落时，为了方便寻找某个章节，使用瞄点链接方式
    关键词：id
    语法：<a href="#p1">点击前往</a>
         <p id="p1">文章第一段</p>

<a href="#p1">点击我找到照片</a>
    <p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p>
    <p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p>
    <p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p>
    <img id="p1" src="F:/123.gif" title="图片" alt="背景照片" width="800" height="500" border="8"/>

5.列表

（1）有序列表

什么是列表？
    用来显示具有同一特征的有序数据
    <o1 type="列表类型" start="起始编号">
        <li>……</li>
        <li>……</li>
        <li>……</li>
    </o1>
    属性名称        属性值             说明
    type          1，数字（默认）      用于列表的排序
                  a，字母a
                  A，大写字母A
                  i，小写罗马数字
                  I，大写罗马数字
    start         数字               表示列表起始数字

<body>
<ol type="i" start="2">
    <li>你好</li>
    <li>出去玩</li>
    <li>放风筝</li>
</ol>
</body>

（2）无序列表

无序列表：用于显示同一特征的无序数据
    <ul type="列表类型">
        <li>……</li>
        <li>……</li>
        <li>……</li>
    </ul>
    属性名称      属性值               说明
    type        disc，实心圆（默认）
                circle，空心圆
                square，实心矩形

<ul type="circle">
    <li>问题一</li>
    <li>问题二</li>
    <li>问题三</li>
</ul>

6.表格

（1）如何构建一个表格？

表格的作用：表格通常用来组织结构化的信息，把数据储存在单元格里
    如何构建一个表格？
    <table>                 ------------表格
        <tr>                ------------行
            <th>内容</th>       单元格（加粗）
            <td>内容</td>       单元格
            <td>内容</td>
        </tr>
    </table>
    横行竖列

（2）表格的属性

表格的属性          属性名称             说明
    width             数值               设置表格宽度
    height            数值               设置表格高度
    bgcolor           英文颜色            设置表格背景颜色
                      rgb('255,200,255')
                      十六位进制数
    background        图像地址            设置表格背景图像（与bgcolor同时用background的优先级较高）
    border            数值               设置表格边框宽度
    bordercolor       英文颜色            设置边框颜色
                      rgb('255,200,255')
                      十六位进制数  
    cellpadding       数值                设置内边距（单元格边框与内容之间的距离）
    cellspacing       数值                设置外边距（单元格之间的距离）
    align             对齐方式             设置对齐方式
                  （right|center|left）
行属性
    属性名称            属性值                      说明
    align          对齐方式（right|center|left）   设置对齐方式
    bgcolor        英文颜色                       设置表格背景颜色
                   rgb('255,200,255')
                   十六位进制数        
    valign         （top|middle|bottom）          设置垂直对齐方式
    表格属性
单元格属性
    属性名称             属性值              说明
    align              对齐方式             设置对齐方式
    bgcolor            英文颜色             设置表格背景颜色
                       rgb('255,255,255')
                       十六进制位数
    valign           （top|middle|bottom）  设置垂直对齐方式
    rowspan            数值                 设置行合并
    colspan            数值                 设置列合并

表格属性

<table border="1" width="500" height="300" cellspacing="0" cellpadding="20"
           align="center" bordercolor="red" bgcolor="pink" background="F:/123.gif">
        <tr>
            <td>第一单元格</td>
            <td>第二单元格</td>
            <td>第三单元格</td>
        </tr>
        <tr>
            <td>第一单元格</td>
            <td>第二单元格</td>
            <td>第三单元格</td>
        </tr>
    </table>

行属性

<table border="1" cellspacing="0" width="300" height="200"
           align="center" bordercolor="red" background="F:/123.gif">
        <tr align="left" bgcolor="pink" valign="top">
            <td>第一单元格</td>
            <td>第二单元格</td>
            <td>第三单元格</td>
        </tr>
        <tr>
            <td>第一单元格</td>
            <td>第二单元格</td>
            <td>第三单元格</td>
        </tr>
    </table>

单元格属性

<table border="1" cellspacing="0" width="300" height="200"
           align="center" bordercolor="red">
        <tr>
            <th colspan="3" >人员信息采集表</th>
            <td rowspan="3">我的多余的</td>
        </tr>
        <tr align="left" valign="middle">
            <td>第一单元格</td>
            <td>第二单元格</td>
            <td>第三单元格</td>
        </tr>
        <tr>
            <td>第一单元格</td>
            <td>第二单元格</td>
            <td>第三单元格</td>
        </tr>
    </table>

（3）表格的嵌套

<table border="1" cellspacing="0" cellpadding="20">
    <tr>
        <td><img src="F:/123.gif" alt="" title="背景照片" width="350" height="250" /></td>
        <td valign="top">
            <table border="1" cellpadding="10" cellspacing="0" bgcolor="#999999">
                <tr>
                    <th colspan="2">the table of information</th>
                </tr>
                <tr>
                    <td>name</td>
                    <td>张三</td>
                </tr>
                <tr>
                    <td>age</td>
                    <td>18</td>
                </tr>
                <tr>
                    <td>sex</td>
                    <td>男</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

7.表单的设计与运用

（1）表单的作用：表单是让浏览用户在浏览网页的过程中提交数据，以便存入数据库的工具
（2）表单的功能和结构：

    <form>
        表单控件
    </form>
    属性名称          属性值           说明
    name            字符串           表单的名字
    method          get/post        数据传输方式
    action          URL             传输地址

（3）常用表单控件：

文本框：
        <input type="text" name="控件名称" value="值" size="控件显示宽度" 
               maxlength="控件数据输入最大长度" readonly="readonly"（只读）/>
    密码框：
        <input type="password" name="控件名称" value="值" size="控件显示宽度" 
               maxlength="控件数据输入最大长度" readonly="readonly"（只读）/>
    多行文本控件：
        <textarea name="控件名称" cols="设置长度" rows="设置宽度">
            文本内容
        </textarea>
    隐藏域：
        <input type="hidden" name="控件名称" value="值"/>
    多选勾选控件：
        <input type="checkbox" name="控件名称" value="值" 
               checked="checked"（已选中） disabled="disabled"（禁止该控件）/>
    单选勾选控件：
        <input type="redio" name="控件名称" value="值"
               checked="checked"（已选中） disabled="disabled"（禁止该控件）/>
    下拉框：
        <select name="控件名称">
            <option value="值" selected="selected"（选中值）>选中内容</option>
        </select>
        分组：<optgroup label="分组名称"> </optgroup>
    发送表单按钮：
        <input type="submit" value="按钮字样"/>
    重置表单按钮：
        <input type="reset" value="按钮字样"/>
     上传文件：
        <input type="file" name="filename"/>

<body>
    <form name="" method="" action="">
        用户名：<input type="text" name="" value="" maxlength="10" size="20"/>
        <br />
        密&nbsp;码：<input type="password" name="" value="" maxlength="8"/>
        <br />
        <textarea name="" cols="30" rows="10"></textarea>
        <hr>
        唱歌<input type="checkbox" name="" value=""/>
        跳舞<input type="checkbox" name="" value=""/>
        打游戏<input type="checkbox" name="" value=""/>
        跑步<input type="checkbox" name="" value=""/>
        <hr />
        男<input type="radio" name="aaa" value="" checked="checked"/>
        女<input type="radio" name="aaa" value=""/>
        <hr />
        <select name="">
            <optgroup label="学历">
                <option value="" selected="selected">中专</option>
                <option value="">本科</option>
                <option value="">硕士</option>
                <option value="">博士</option>
                <option value="">大专</option>
            </optgroup>
            <optgroup label="入学年份">
                <option value="" >1997</option>
                <option value="" >2001</option>
                <option value="" >2002</option>
            </optgroup>
        </select>
        <hr />
        <input type="submit" value="登录"/>
        <input type="reset" value="重置"/>
        <button>按钮</button>    <!--空按钮-->
        <input type="file" name="filename"/>
    </form>
</body>

8.框架集的运用

（1）DTD中的框架集类型：

DTD中的框架集类型：
    过渡型（Transitional）  （常用）
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    严格型（Strict）
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    框架集型（Frameset）
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

（2）HTML窗口分帧：
把一个浏览器的窗口分割成多个窗口，并且每个窗口都可以显示一个独立的网页
（3）如何使用框架集进行窗口分帧？

frameset标签：<frameset></frameset>
    属性名称       属性值                 说明
    rows         固定像素数值|百分比|*    横向分割框架
    cols         固定像素数值|百分比|*    纵向分割框架
    border       像素数值               边框宽度
    frameborder  1|0                  是否显示边框（1显示，0不显示）

    frame标签：<frame />
    frame元素位于frameset元素内部
    属性名称       属性值                 说明
    src           url                  URL链接地址
    name          字符串                窗口名称
    scrolling     no                   是否显示滚动条（默认显示）
    noresize      布尔值                控制边框是否被拖动（默认可以被拖动）

    noframes标签：<noframes></noframes>
    作用：noframes元素可为那些不支持框架的浏览器显示文本，noframes元素位于frameset元素内部

    iframe标签：<iframe></iframe>
    可以作用于普通的过渡型HTML网页，形成画中画效果

简单的后台管理系统：
1)123.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>后台管理</title>
</head>
<frameset rows="18%,82%">
    <frame noresize="noresize" src="F:/head.html"/>
    <frameset cols="20%,80%">
        <frame noresize="noresize" src="F:/left.html"/>
        <frame noresize="noresize" src="F:/body.html" name="123"/>
    </frameset>
</frameset>
</html>

2)head.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>后台头部</title>
</head>
<body>
    <h1 align="center">后台管理系统</h1>
</body>
</html>

3)left.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>左侧内容</title>
</head>
<body>
    <ul type="none">
        <li><h3><a href="system.html" target="123">系统管理</a></h3></li>
        <li><h3><a href="people.html" target="123">人员管理</a></h3></li>
        <li><h3><a href="">考勤管理</a></h3></li>
        <li><h3><a href="">内容管理</a></h3></li>
        <li><h3><a href="body.html" target="123">网站首页</a></h3></li>
        <li><h3><a href="">修改密码</a></h3></li>
    </ul>
</body>
</html>

4)body.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>主体</title>
</head>
<body>
    <h1>我是网站主体</h1>
</body>
</html>

5)people.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>人员</title>
</head>
<body>
<h1>我是人员管理</h1>
</body>
</html>

6)system.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>系统</title>
</head>
<body>
<h1>我是系统管理</h1>
</body>
</html>

在这里插入图片描述

lifetruth123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML5开发教程—day32（笔记）

文章目录主要内容：1.html基本结构主要内容：1.html基本结构（1）html基本结构：DTD(Document Type Definition) -------文档定义类型<html> -----------------文档根标记 <head> -----------------文档头部标记 <meta> -----------------主要用于文档字符集、使用语言、
复制链接

扫一扫