THML知识点复习

Posted 2020-11-26 315sky

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了THML知识点复习相关的知识，希望对你有一定的参考价值。

一, html`介绍`

HTML（HyperText Markup Language）超文本标记语言，是学习Web程序的最重要并且最基础部分。

html语言由浏览器可以自动进行解释。

最新版本为HTML5.0，常用版本为xhtml1.0，由浏览器解释执行，纯文本文件。

xhtml（扩展HTML）xhtml1.0是HTML4.01的升级版本，比HTML更加严格，删除了表现型标签。

二, HTML基本结构

html5基本结构：

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

xhtml1.0基本结构(虽然建议使用html5的框架，但是因为老浏览器还广泛存在，还需掌握xhtml1.0的框架)：

<!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>Document</title>
</head>
<body>
    
</body>
</html>

xhtml1.0的文档结构声明有三种transitional（过渡型）、strict（严格型）、frameset（框架型），浏览器将安装DTD类型来解析。

DTD，是Document Type Definition的简称，是一系列标记语言语法的规则，用来定义XML或者(X)HTML的文档类型。

浏览器会根据DTD规范来判断文档类型，决定使用何种语法规则来解析该文档。

三, 编码规范

1.所有的标记都必须要有一个相应的结束标记，单标记直接用/结束。

2.所有标签的元素和属性的名字都必须使用小写。

3.所有的属性必须用引号""括起来。

虽然在html5中，对规范有所放松，但是还是建议用xhtml的规范来书写代码，养成严谨的好习惯。

四, HTML标记解析

1、头标记`head`

title：网页标题

meta：辅助信息标记，向浏览器传递一些信息，常用的如下：

指定网页的字符编码：

<meta charset="UTF-8">

网页刷新：

<meta http-equiv="refresh" content="5,http://www.163.com"/>

网页关键字：

<meta name="keywords" content="电脑、机器人、智能" />

网页描述：

<meta name="description" content="关于网络的网页" />

与移动开发有关：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

2、文档主体标记`body`

html标签选择的原则：从语义的角度选择，而不是外观，这也称之为html的语义化。

3、文档结构标记

1）标题标记

<h1>到<h6>表示页面中的关键词（标题），以使用时有以下的注意事项！

<h1>代表最重要的，<h6>代表相对最不重要的，因此，根据这个递减，适当安排关键词。

2）段落与换行标记

<p>：段落

<br />：换行

<br>标记使当前行强行中断而另起一行，但是新行与原来的行保持相同的属性，即新行与原来的行属于同一段落，而<p>标记在换行的时候另起了一新的段落。

3）`div`与`span`

div表示一个盒子或容器

span没有特定的语义，通常用于样式的应用

4）`<hr />`：分割线

4、文字标记

<b>：加粗

<strong>：强调

b和strong的区别就在于前者是物理元素,仅表示加粗，后者是逻辑元素，表示强调的意思，<b>是在html中的标签，而在xhtml中只能使用<strong>，后者兼容性更好。

<i>：斜体

<em>：次级强调

我们可以看到下表中有部分的文本标记，我们只要按照标记的语义来使用即可，比如大段的引用我们可以用<blockquote>标签，代码用<code>标签，缩写用<abbr>标签等等。

文字标记	语义
<blockquote>	长引用
<q>	短引用
<abbr>	缩写
<address>	作者联系信息
<pre>	预格式化的文本，常用与程序代码
<code>	定义计算机代码文本
<del>	删除文本
<sub>	上标
<sup>	下标

5、`<a>`：超级链接标记

<a href="链接位置" title="链接描述" target="目标">链接文字</a>

1）使用邮件链接：

<a href="mailto:test@qq.com">发送邮件</a>

2）页面链接的锚点：

<a href="#top">回到顶部</a>  <div id="top">顶部的链接</div>

3）给链接增加鼠标提示：

<a title=“点击查看胡悦的详细信息”>查看</a>

4）理解链接的不同打开方式:

<a href=“” target=“_top/_self/_blank”></a>

6、绝对路径、相对路径

相对路径：从当前文件开始的位置；绝对路径：从站点根目录开始的路径，以“/”开头。

. 代表当前目录 . . 代表上一级目录

7、`img`：图片标记

<img src="图片位置" alt="图片描述" width="宽度" height="高度" />

8、数据列表标记

1）ul、ol、li

<ol>                       
    <li>a</li>                       1.a
    <li>b/li>                        2.b
    <li>c</li>                       3.c
</ol>

<ul>

         <li>A</li>                   ● A

         <li>B</li>                   ● B

         <li>C</li>                   ● C

</ul>

2）dl、dt、dd

<dl>
    <dt>计算机</dt>                                   计算机
    <dd>用来计算的仪器 ... ...</dd>                        用来计算的仪器... ...
    <dt>显示器</dt>                                   显示器
    <dd>以视觉方式显示信息的装置 ... ...</dd>                以视觉方式显示信息的装置 ... ...
</dl>

9、表格标记

<table width="200" border="1">
    <caption>表格标题</caption>
    <thead>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>12010101</td>
            <td>胡悦</td>
            <td>女</td>
        </tr>
    </tbody>
</table>

技术图片

合并单元格演示：

水平合并(colspan=合并单元格数)

<table border="1">
    <tr>
      <td colspan="2">2</td>
      <td>3</td>
    </tr>
    <tr>
     <td>4</td>
     <td>5</td>
      <td>6</td>
    </tr>
</table>

技术图片

垂直合并（rowspan=合并的单元格数）

<table border="1">
    <tr>
        <td rowspan="2">2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

技术图片

ul：无序列表，li子元素显示为默认的黑色圆点，也可通过参数自定义列表的符号，常用于新闻列表展示。

ol：有序列表，可以在列表前增加序号，如1，2，3，4；适用于排行榜。

dl：自定义列表，可以包括标题及内容，可适合用制作风箱结构。

table：表格，适合于超过两行以上的数据呈现。

10、转义字符

文本字符	html字符
空格
<	<
>	>
"	"
&	&

11、注释

<!-- 注释内容 -->

12、表单

1）表单标记

<form action="表单提交的处理程序地址" method="表单提交方式(post/get)" name="表单名称"></form>

form元素将所有的表单包含起来，也相应于表单的作用域。

get和post提交方式的区别：get请求把表单的数据显式地放在URL中,并且对长度和数据值编码有所限制.post请求把表单数据放在HTTP请求体中,并且没有长度限制。

2）文本框

<input type="text" name="控件名称" value="文本框输入值" placeholder="提示信息" 
disabled readonly required auotfocus />

3）密码框

<input type="password" name="控件名称" placeholder="提示信息"/>

4）单选按钮：同一组单选按钮使用同一命名

<input type="radio" name="控件名称" value="控件值" checked />

5）复选按钮

<input type="checkbox" name="控件名称" value="控件值" checked />

6）下拉列表

<select name="控件名称" multiple="multiple" size="数值">
    <option value="控件值" selected>选项</option>
</select>

7）多行文本框

<textarea name="控件名称" cols="列数" rows="行数"></textarea>

8）隐藏控件

<input type="hidden" name="控件名称" value="控件值" />

9）普通按钮

<input type="button" value="按钮文字" />
<button type="button">按钮文字</button>

10）发送按钮

<input type="submit" value="按钮文字" />
<button type="submit">按钮文字</button>

11）重置按钮

<input type="reset" value="按钮文字">
<button type="reset">按钮文字</button>

表单实例：

<form action="" method="post">
    <fieldset>
    <legend>表单演示</legend>
        <p>
            <label for="username">姓名：</label><input type="text" name="username" id="username" placeholder="姓名" required="required" />
        </p>
        <p>
             <label for="pwd">密码：</label><input type="password" name="pwd" id="pwd" placeholder="密码" />
        </p>
        <p>
            性别：
            <label><input type="radio" name="sex" value="1" checked="checked"/>男</label>
            <label><input type="radio" name="sex" value="0" />女</label>
        </p>
        <p>
            爱好：
            <label><input type="checkbox" name="basketball" value="basketball" />篮球</label>
            <label><input type="checkbox" name="football" value="football" />足球</label>
        </p>
        <p>
            <label for="bloodtype">血型：</label>
            <select name="bloodtype" id="bloodtype">
                <option value="A">A型</option>
                <option value="B">B型</option>
                <option value="AB">AB型</option>
                <option value="O">O型</option>
            </select>
        </p>
        <p>
            <label for="intro">介绍</label>
            <textarea name="intro" cols="30" rows="3" id="intro"></textarea>
        </p>
        <input type="submit" value="提交按钮" />
        <input type="reset" value="重置按钮" />
        <input type="button" value="自定义按钮" />
    </fieldset>
</form>

技术图片

13、框架网页：将浏览器窗口分解为多个小窗口，每个小窗口均可以显示各自的网页

<frameset rows="" cols="">：框架网页集，rows为横向分隔，cols为纵向分隔，值可以是具体数值也可以是百分比，注意frameset标记是和body标记同级的标记，不能将frameset标记包含在body标记中，否则将无法看到框架网页的效果。

<frame name="" scr="" />：指定每一个小窗口的名称和链接的网页，窗口的名称可以用于超级链接的target属性。

水平分隔两个窗口，每个窗口各占50%

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>框架窗口</title>
    </head>
    <frameset rows="50%,*">
        <frame src="http://www.baidu.com" />
        <frame src="http://www.bing.com" />
    </frameset>
</html>

复杂框架网页的制作，复杂的框架网页实际上就是frameset标记的嵌套，主要是要搞清楚，是先横向分割还是纵向分隔，然后在子窗口中再次分隔。

框架网页中，超级链接的指定窗口打开。

如果有如下的框架网页：

<!doctype html>
<html>
    <head>
     <meta charset="UTF-8">
        <title>框架窗口</title>
    </head>
    <frameset rows="100,*">
     <frame src="nav.html" name="nav" />
     <frame src="a.html" name="content" />
    </frameset>
</html>

我们希望上面的窗口是导航，下面的窗口来显示内容，那么上面导航窗口的超级链接就应该这样写（nav.html）

<!doctype html>
<html>
    <head>
     <meta charset="UTF-8">
     <title>导航</title>
    </head>
    <body>
        <ul>
            <li><a href="a.html" target="content">a文件</a></li>
            <li><a href="b.html" target="content">b文件</a></li>
            <li><a href="c.html" target="content">c文件</a></li>
        </ul>
    </body>
</html>

内嵌框架<iframe>：可以在一个浏览器窗口种同时显式多个页面文档。

<iframe src="url" width="宽度" height="高度"></iframe>

提示：可以把说明的文本放置在<iframe> 和 </iframe> 之间，这样就可以应对无法理解 iframe 的浏览器。

以上内容为我很厉害的老师的总结。

以上是关于THML知识点复习的主要内容，如果未能解决你的问题，请参考以下文章

动态SQL基础概念复习（Javaweb作业5）

在动态THML语句中调用JS函数传递带空格参数的问题

THML知识点复习

一, html介绍

二, HTML基本结构

三, 编码规范

四, HTML标记解析

1、头标记head

2、文档主体标记body

3、 文档结构标记

1）标题标记

2）段落与换行标记

3）div与span

4）<hr />：分割线

4、文字标记

5、<a>：超级链接标记

1） 使用邮件链接：

2）页面链接的锚点：

3）给链接增加鼠标提示：

4）理解链接的不同打开方式:

6、绝对路径、相对路径

7、img：图片标记

8、数据列表标记

1）ul、ol、li

2）dl、dt、dd

9、表格标记

10、转义字符

11、注释

12、表单

1）表单标记

2）文本框

3）密码框

4）单选按钮：同一组单选按钮使用同一命名

5）复选按钮

6）下拉列表

7）多行文本框

8）隐藏控件

9）普通按钮

10）发送按钮

11）重置按钮

13、框架网页：将浏览器窗口分解为多个小窗口，每个小窗口均可以显示各自的网页

一, html`介绍`

1、头标记`head`

2、文档主体标记`body`

3、文档结构标记

3）`div`与`span`

4）`<hr />`：分割线

5、`<a>`：超级链接标记

1）使用邮件链接：

7、`img`：图片标记