一、HTML简介

HTML(Hypertext Markup Language)超文本标记语言HTML利用各种标记来标识文档的结构以及标识超链接的信息。它是从SGML(Standard Generalized Markup Language,标准通用标识语言)中的一个子集演变而来的。

二、HTML的标记组成

HTML用于描述功能的符号称为“标记”。标记在使用时必须用尖括号“<>”括起来,而且是成对出现的,无斜杠的标记表示该标记的作用开始,有斜杠的标记表示该标记的作用结束。如<body></body><p></p>

1.标记

  • 单标记:有些标记能完整的表达标记里的意思,只须在尖括号中输入标记名即可,这类标记叫单标记。XHTML中要求单标记也必须闭合,即在标记“>”前添加斜杠。常见的单标记如<br /> <hr />等。
  • 双标记:双标记有头有尾,且前面的标记与后面的标记保持一致,但在后面的标记前有斜线,语法形如:<标记>内容</标记>。例如:<p>段落</p>

1) XHTML要求所有标记均为小写,且所有标记属性必须添加双引号

2) 标记绝对不能交叉

三、HTML基本结构

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

1) <title>标记绝对不能放在<body>标记中,同理,其它表示内容的标记也绝对不能放在<head>标记中
2) <html></html>表示HTML语言,在<html>...</html>里面包含头部<head>...</head>和内容体<body>...</body>
3) HTML注释表示为<!--注释内容-->

四、HTML文字与图像

1.设置文字字体、大小与颜色

<font face=”宋体” size=”1” color=”red”>文字</font>

1) 设置文字的字体、大小、颜色需要使用<font>标签

2) face属性设置文字字体,多种字体用逗号隔开

3) size属性设置文字大小

4) color属性设置文字颜色,参数值可以是RGB颜色值,如#000000,也可以用颜色的单词表示,如red


2.设置正文的标题

<h1>主题文字</h1>  <!--其中“#”代表数字1-6中的任意一个,从数字1到数字6,标题大小排列由大到小(数字越大,标题字号就越小)-->
<h2>
    主题文字2
</h2>

3.设置段落

<p>
    这是一个段落
</p>

特色:独立成行


4.强制换行与不换行

<br />
<nobr />

5.字体标记

  • 物理字体
<b>…</b>            <!--设置成粗体-->
<i>…</i>            <!--设置成斜体-->
<u>…</u>            <!--增加下划线-->
<s>…</s>            <!--增加删除线-->
<d>…</d>
<sup>…</sup>        <!--设置成上标字体-->
<sub>…</sub>        <!--设置成下标字体--> 
<tt>…</tt>            <!--设置成打字机字体-->
  • 逻辑字体
<em>…</em>            <!--强调文字-->                
<strong>…</strong>    <!--字体加重-->
<code>…</code>        <!--显示编程代码-->            
<samp>…</samp>        <!--显示救命文字-->
<kbd>…</kbd>        <!--显示键盘按键文字-->        
<small>…</small>    <!--缩小文字-->
<big>…</big>        <!--放大文字-->            
<del>…</del>        <!--删除线-->   

6.文字对齐

<p aligin = "#">文字对齐</p> 

1) 文字对齐使用标签的align属性,例如:<p align="#">对齐文字</p>,其中“#”代码表示方位,可选择”left”(向左)、”right”(向右)、”center”(居中)。

2) align属性可用于:<p><div><table><td>等标签


7.列表

  • 无序列表
<ul type=”#”>
      <li>表项一</li>
      <li>表项二</li>
</ul>

Type=”#”取值可为disc(默认,实心黑点)、square(实心黑方块)、circle(空心圆)

  • 有序列表
<ol type=”#”>
  <li>表项一</li>
  <li>表项二</li>
</ol>

Type=”#”取值可为AaIi1

  • 定义列表
<dl>
  <dt>项目</dt>
  <dd>描述一</dd>
  <dd>描述二</dd>
</dl>

<dt>标签定义了定义列表中的项目,<dd>标签在定义列表中定义条目的定义部分,可以理解为对定义条目进行特征描述。

注:无序列表、有序列表、定义列表间可以相互嵌套,但一定要注意嵌套时不能交叉。

无序列表、有序列表、定义列表间嵌套实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>列表嵌套</title>
    </head>
    <body>
        <ol type="A">
            <li>系统管理</li>
            <li>
                文章管理
                <ul type="square">
                        <dt>博客文章</dt>
                        <dd>新建</dd>
                        <dd>编辑</dd>
                        <dd>刪除</dd>
                    <li>评论管理</li>
                    <li>用戶管理</li> 
                </ul>
            </li>
        </ol>    
    </body>
</html>

8. 其它方式修饰文本

1) 欲格式化文本:<pre></pre>

2) 代码样式斜体字渲染:<var></var>

3) 表示它所包含的文本对某个参考文献的引用:<cite></cite>


9.图像

  • 插入图像基本语法
<img src="#"

<img src="#" />,其中#代表图像的URL路径,示例:`

  • 图像基本属性:

    • alt属性:图像无法显示时的提示信息,如 <img src="c.jpg" alt="风景" />
    • width属性:定义图像的宽度;height属性:定义图像的高度;如<img src=”c.jpg” width=”400px” height=”300px” />
    • align属性:图像和文字对齐,align属性的取值为top(顶部)、middle(中间)、bottom(默认,底部);如<img src="c.jpg" align="top" />
    • border属性:图像的边框,border设置为0时表示图像不显示边框,否则设置成需要的边框大小;如<img src="c.jpg" border="0" />

10.表格

  • 表格的基本语法
<table width=”100” border=”1” height=”100”>
    <caption>表格标题</caption>
    <tr>
        <th>表头一</th>
        <th>表头二</th>
    </tr>
    <tr>
        <td>单元格一</td>
        <td>单元格二</td>
    </tr>
    <tr>
        <td cols=”2”>表尾</td>
    </tr>
</table>

1)在HTML中创建表格使用<table>标签对,可对其设置宽度高度边框背景等。

2)<caption>标签为整个表格的标题,它不占用表格行,是位于表格外的一个对整个表格进行说明的大标题,可以使用align属性设置标题相对于表格的位置,值为leftrighttopbottom

3)使用tr定义表格行,然后用thtd定义表格单元格。

4)可以使用thead定义表头,tbody定义表格主体,tfoot定义表尾,只需要把相应的行(trtd都需要)放置在标记对中即可。

5)cellpadding内边距;cellspacing外边距

表格的基本语法实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            作者:1710488546@qq.com
            时间:2021-04-14
            描述:表格
        -->
        <!--table>tr*3>td*4--> <!--tr行&td列-->
        <table border="1" cellpadding="50px" cellspacing="0">
            <caption>表格标题:信息表</caption>    <!--caption不占表格的高度和宽度,是一个独立标签且相对表格居中-->
            <thead bgcolor="aqua">     <!--thead与tbody标签是不同的标签,会将表格拆分为不同的表格-->
            <tr>
                <th>编号</th> <!--th加粗居中-->
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
            </thead>
            <tbody bgcolor="aquamarine">
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>男</td>
                <td>23</td>
            </tr>
            </tbody>
            <tbody bgcolor="chartreuse">
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>男</td>
                <td>22</td>
            </tr>
            </tbody>
        </table>
    </body>
</html>
  • 跨多行、多列表元
<td rowspan=”3”>…</td>  <!--跨多行表元-->
<td colspan=”3”>…</td>    <!--跨多列表元-->

1)跨多行表元语法是在thtd上rowspan表示,rowspan后面的值是数字,数字表示跨多少行表元。

2)跨多列表元与跨多行表元一样,也是放在thtd上,表示在一行中跨多少列表元,语法是用colspan表示。

跨多行、多列表元实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--作者:1710488546@qq.com
            时间:2021-04-14
            描述:5行5列表格
        -->
        <table border="1" cellpadding="15" cellspacing="0">
            <tr> 
                <td colspan="5"></td>  <!--合并单元格-->
            </tr>
            <tr>
                <td rowspan="4"></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td colspan="3" rowspan="3"></td>
            </tr>
            <tr>
                <td></td>
            </tr>
            <tr>
                <td></td>
            </tr>
        </table>
    </body>
</html>
  • 设置表格大小
<table width=”100px” height=”100px”>…</table> <!--取值可以为像素值或百分比-->
  • 设置表格边框
<table border=”1”>…</table>

表格边框使用table标记的border 属性定义,其后面的值是宽度值,表示对象的边框宽度,数值越大,宽度越大。

  • 设置表格背景
<!--设置整个表格背景-->
<!--设置整个表格的背景是定义<table>标签的bgcolor属性,其值可为颜色名、十六进制颜色值或者rgb代码的背景颜色-->
<table bgcolor=”#ff0000”>…</table>

<!--设置表格中单元格的背景-->
<!--设置单元格的背景颜色只需在td和th标签上定义bgcolor属性,如果设置某一行的背景颜色,也可以在tr标签中定义bgcolor属性-->
<td bgcolor=”#ff0000”>…</td>
  • 设置单元格边距
<!--设置单元格与内容之间的距离-->
<!--设置单元格与内容之间的距离只需在td和th标签上定义cellpadding属性,其值为像素值。-->
<td cellpadding=”10”>…</td>

<!--设置两个单元格之间的距离-->
<!--定义两个单元格之间的空白在td和th标签上使用cellspacing属性,其值同样为像素值。-->
<td cellspacing=”10”>…</td>
  • 表格对齐

    • 表格内文字对齐

      <tr align=#>…</tr>                
      <td align=#>…</td>
> 1)文字对齐使用`align`属性定义,取值可为`left`、`center`、`right`。
>
> 2)在表格内,文字对齐有在`tr`、`th`、`td`中对齐,在`tr`设置对齐方式后,`tr`内的`th`和`td`都按设置的要求对齐,同理在多行中可以设置不同的`tr`对齐方式,`th`和`td`都可以设置其里面的文字或图片的对齐。
  • 表格在网页中对齐

    <table align=#>…</table>

表格在网页中的对齐是在<table></table>标记对中使用align属性定义。


11.表单

  • 创建表单
<form name=”form” action=”url” method=”post”></form>

form中的name属性给form表单命名,action属性表示表单提交后发送的URL地址,发送的方式用method属性表示,可选择的参数有GetPostGet传输量比较小,Post传输量比较大。

  • 文本框和密码框
<input type=”text” name=”text” size=”6” maxlength=”6” value=”文字” disabled=”disabled” readonly=”readonly” />

name属性给文本框命名,size属性设置文本框的显示大小,maxlength属性设置文本框最大可接受的字符数,value属性设置文本框默认显示值,disabled属性设置文本框是否可用,readonly属性设置文本框是否只读。

  • 密码框
<input type="password" name="" id="" value="" placeholder="请输入密码" />

密码框的属性除了type设置成password,与文本框不一致外,其它属性与文本框一致。

  • 单选框
<input type=”radio” name=”radio” checked=”checked” value=”v” />

设置checked属性表示单选框被默认选中

  • 复选框
<input type=”checkbox” name=”ck” checked=”checked” value=”v” />

设置checked属性表示单选框被默认选中

  • 下拉列表
<select name=”select” size=”2” multiple=” multiple”>
    <option value=”1” selected=”selected”>列表项一</option>
    <option value=”2”>列表项二</option>
</select>

select标签的size属性表示下拉列表的可见选项数,默认为1multiple属性规定可以选择多个选项。Option标签的selected标签表示当前选被默认选中,即在1个可见选项数时下拉列表显示此值。

  • 文本域
<textarea name=”ta” rows=”10” cols=”5”>文本内容</textarea>

textarea标签的rows属性表示文本区内的可见行数,cols属性表示文本区内的可见宽度。

文本框是单行的,而文本域可以输入多行,可以手动换行

  • 按钮
<!--普通按钮-->
<input type=”button” name=”bt” value=”按钮” />
<button name=”bt”>普通按钮</button>

<!--提交按钮-->
<input type=”submit” name=”sm” value=”提交” />

<!--重置按钮-->
<input type=”reset” name=”rs” value=”重置” />
  • 图像域
<input type=”image” name=”image” src=”c.jpg” alt=”描述” />
  • 文件域
<input type=”file” name=”file” /> <!--定义输入字段和浏览按钮,用于文件上传-->
  • 时间框
<input type="date" name="" id="" value="" />
  • 百分比左右拉取框
<input type="range" name="" id="" value="" />
  • 隐藏表单
<input type=”hidden” name=”hi” value=”v” />

隐藏表单用于在浏览器与服务器之间传递一些必要的参数或选项,而这些参数或选项不需要显示在页面中。


结合表格后的表单实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        form{
            font-size:larger;
        }
    </style>
    <body>
        <body background=""
        <form action="https://www.google.com/" method="get">
            <table border="0" cellspacing="10" cellpadding="" >
                <!--用户名文本框-->
                <!--disabled表示锁定,1.此元件不可用,无法读取内容;2.作用域不同,disabled表示锁定可用于所有表单 -->
                <!--readonly表示只读,1.但原件可用,可读取内容;2.作用域不同,readonly仅用于文本框,不适用其他表单 -->
                <tr>
                    <th align="right">用户名</th>
                    <th align="left"><input type="text" name="" id="" value="" readonly="readonly"/></th>
                </tr>
                <!--密码文本框-->
                <tr>
                    <th align="right">密码</th>
                    <th align="left"><input type="password" name="" id="" value="" placeholder="请输入密码" /></th>
                </tr>
                <!--密码文本框-->
                <tr>
                    <th align="right">确认密码</th>
                    <th align="left"><input type="password" name="" id="" value="" placeholder="请再次确认密码"/></th>
                </tr>
                <tr>
                    <th align="right">性别</th>
                    <th align="left">
                        <input type="radio" name="sex" id="" value="" />男
                        <input type="radio" name="sex" id="" value="" />女
                        <input type="radio" name="sex" id="" value="" />保密
                    </th>
                </tr>
                <!--复选框-->
                <tr>
                    <th align="right">爱好</th>
                    <th align="left">
                        <input type="checkbox" name="" id="" value="" />吃饭
                        <input type="checkbox" name="" id="" value="" checked="checked"/>读书
                        <input type="checkbox" name="" id="" value="" />睡觉
                        <input type="checkbox" name="" id="" value="" />运动
                    </th>
                </tr>
                <!--下拉框-->
                <tr>
                    <th align="right">住址</th>
                    <th align="left">
                        <select name="">
                            <option value="">泉州</option>
                            <option value="">漳州</option>
                            <option value="">厦门</option>
                            <option value="">福州</option>
                        </select>
                    </th>
                </tr>
                <!--时间框-->
                <tr>
                    <th align="right">出生年月</th>
                    <th align="left"><input type="date" name="" id="" value="" /></th>
                </tr>
                <!--文本输入框-->
                <tr>
                    <th align="right">个性签名</th>
                    <th align="left">
                        <textarea name="" rows="5" cols="20" style="resize:none;"></textarea>
                    </th>
                </tr>
                <!--文件上传-->
                <tr>
                    <th align="right">用户头像</th>
                    <th align="left"><input type="file" name="" id="" value="" /></th>
                </tr>
                <!--验证码原理百分比选择框-->
                <tr>
                    <th align="right">请完成验证</th>
                    <th align="left"><input type="range" name="" id="" value="" /></th>
                </tr>
                <!--按钮-->
                <center>
                <tr>
                    <th colspan="2"><input type="submit" value="注册"/>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <!--reset返回重置默认值-->
                    <input type="reset" name="" id="" value="重置" />
                    </th>
                </tr>
            </table>
        </form>

    </body>
</html>

12.超级链接

  • 基本概念

    • 统一资源定位器(URL):每一个网页的唯一地址,一个URL构成为protocol://machinename[:port]/directory/filename。其中protocol是访问协议,如httphttpsftp等,machinename是存放资源的主机IP地址,通常以域名的形式出现,port是服务器使用的端口,directoryfilename是资源的路径和文件名。
    • 绝对路径:HTML绝对路径指带有域名文件的完整路径
    • 文档相对路径:当前文档与在的位置与其他文件或文件夹的关系。用../表示源文件所在目录的上一级目录。
    • 站点根目录相对路径:提供从站点的根文件夹到文档的路径。站点根目录相对路径以”/”开始,表示站点根文件夹。
  • 文字链接
<a href=”URL” target=”target”>链接文字</a>
<a href="https://singerw.com">ZHANG_SINGERW</a>        <!--绝对地址:-->
<a href="列表嵌套.html">das </a>                     <!--相对地址-->
<a href="列表嵌套.html" target="_self">sdad</a>         <!--本窗口打开-->
<a href="文本.html" target="_blank">新窗口打开</a>        <!--新窗口打开-->

1) href属性表示链接跳转地址

2) target属性定义链接网页的打开方式,其值可以为_blank(新窗口)、_parent(父框架)、_self(当前窗口)、_top(清除所有被包含的框架并将文档载入整个浏览器窗口)

  • 锚点链接
<a name=”锚点”></a>           <!--定义锚点-->
<a href=”#锚点”>链接文字</a>     <!--链接锚点-->

<!--返回顶部-->
<a name="top"></a>
<a href="#top">返回顶部</a>

超级链接实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            作者:1710488546@qq.com
            时间:2021-04-14
            描述:锚点
        -->
        <a name="top"></a>
                <!--
            作者:1710488546@qq.com
            时间:2021-04-14
            描述:超链接
        -->
        <a href="列表嵌套.html">das </a>    <br />
        <a href="https://singerw.com">ZHANG_SINGERW</a><br />
        <a href="列表嵌套.html" target="_self">sdad</a><br /> <!--本窗口打开-->
        <a href="文本.html" target="_blank">新窗口打开</a><br /> <!--新窗口打开-->
        <!--
            作者:1710488546@qq.com
            时间:2021-04-14
            描述:锚链接
        -->
        <!--回到顶部-->
        <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>
        <p>测试测试</p>
        <p>测试测试</p>
        <p>测试测试</p>
        <p>测试测试</p>
        <p>测试测试</p>
        <p>测试测试</p>
        <p>测试测试888</p>
        <a href="#top">返回顶部</a>
    </body>
</html>

13.移动的字体和图片

  • 移动基本语法
<marquee>移动文字或图片</marquee>

默认是向左循环移动,移动范围在其父对象的有效区域内。

  • 文本移动的方向
<marquee direction=”#”>…</marquee>

其中#可以选择leftrightupdown

  • 文本的滚动循环
<marquee behavior=”#”>…</marquee>

其中#可以选择scroll(循环移动)、slide(只移动一个回合)、alternate(来回移动)。

  • 设置文本来回移动,还可以设置循环次数
<marquee loop=”#”>…</marquee>

其中#为代表循环的次数。

  • 文本的移动速度,用移动距离来实现
<marquee scrollamount=”#”>…</marquee>

其中#设置移动的速度,取正整数。数值越大,速度越快

  • 移动对象的延时
<marquee scrolldelay=”1000”>我走一走,停一停</marquee>

scrolldelay以时间为单位,用毫秒表示

  • 移动的区域和背景
<marquee width=”100” height=”100” bgcolor=”pink”>…</marquee>

滚动字体和图片实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            作者:1710488546@qq.com
            时间:2021-04-14
            描述:marquee中标签direction是上下左右移动
        -->
        <marquee direction="up"> 
            <p><a href="https://ami.singerw.com">SINGERW.COM</a>
                
            </p>
        </marquee>
        <!--
            作者:1710488546@qq.com
            时间:2021-04-14
            描述:marquee中标签behavior中slide是单次滚动次数至边部,scroll是单次滚动至边外;
                loop是自定义滚动次数
                滚动标签没有速度属性,用scrollamount或scrolldelay更改滚动速度。
                 * scrolldelay采用帧率原理
                 * scrollamount采用移动多少像素原理
        -->
        <marquee behavior="slide" loop="2" scrollamount="20"scrolldelay="10"> 
            <p>
                <a href="https://ami.singerw.com">SINGERW.COM</a>
            </p>
        </marquee>
        <!--
            作者:1710488546@qq.com
            时间:2021-04-14
            描述:滚动图片
        -->
        <marquee>
            <img src="img/QQ图片20201217213855.jpg" />
        </marquee>
    </body>
</html>
最后修改:2021 年 07 月 28 日 04 : 05 PM
如果觉得我的文章对你有用,请随意赞赏