THML知识点复习

爱好HtmlCssJs 2019-12-26

一, 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)divspan

div表示一个盒子或容器

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

4)<hr />分割线

4、文字标记

<b>加粗

<strong>强调

bstrong的区别就在于前者是物理元素,仅表示加粗,后者是逻辑元素,表示强调的意思,<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:">发送邮件</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>

 THML知识点复习

合并单元格演示:

水平合并(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>

 THML知识点复习

垂直合并(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>

 THML知识点复习

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

<strong>ol</strong>:有序列表,可以在列表前增加序号,如1,2,3,4;适用于排行榜。

<strong>dl</strong>:自定义列表,可以包括标题及内容,可适合用制作风箱结构。

<strong>table</strong>:表格,适合于超过两行以上的数据呈现。

10、转义字符

文本字符  html字符
空格  &nbsp;
<  &lt;
>    &gt;
"&quot;
&  &amp;

11、注释

<!-- 注释内容 -->

12、表单

1)表单标记

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

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

getpost提交方式的区别: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>

 THML知识点复习

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 的浏览器。

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

相关推荐