HTML 复习

来源：互联网发布：淘宝该怎么推广编辑：程序博客网时间：2024/05/21 16:22

HTML 复习

网页骨架结构

示例

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>我是一个前端程序员</title>></head><body><a href="https://www.baidu.com/">百度一下！</a>  <p><strong>你是个神经病</strong></p></body></html>

HTML标签其作用

一个正常的网页，至少有以下3个标签。
1. 网页第一行必须要有DOCTYPE声明，其作用就是给HTML网页提供正确的“文档类型”。
2. 标签<html>以及网页两个主要部分<head>和<body>
3. <head>标签（页头）可以包含网页的标题，能提供浏览器与网站搜索引擎可以利用的其他不可见信息如：搜索引擎中的关键字。页头包含被浏览器用来显示网页及提升交互性的信息，如CSS。也可以<head>中声明Javascript脚本，函数和变量。
4. <body>标签包含在浏览器视窗中显示的所有信息，标题、文本、图片等。
<body>标签里
<p>文本段落<strong>来强调文字（加粗黑体）
<a>锚标签在网页中创建一个超链接（hypelink）或链接
标签的href部分称为属性,URL(网址)则称为值。如

<a href="https://www.baidu.com/">百度一下！</a>

XHTML :也就是HTML4.0它的特点：

1.所有标签（甚至空标签）都必须关闭<br/>.
2.标签属性必须用双引号表示”https://www.baidu.com/”
3.标签和标签的属性必须用小写字母。
4.网页开头处必须有文档类型声明（DOCTYPE）。

用HTML来组织内容，用CSS来使内容更加美观

HTML越简单，对搜索引擎越友好

思考HTML布局结构:HTML根据逻辑来划分和识别文本在网页中锁起的作用，并给文本添加内涵（语义化）。

如标题 <h1>标签介绍了最重要的内容。其他标题则将内容分为其他次要的如<h2>
使用与该内容在网页中所起作用最接近的标签，而不是根据该内容的外观来定义标签。文本段落用<p>标签，创建无序列表（非编号型）则用<ul>标签<abbr> 指缩进, <code>指计算机代码.
<div> 与<span>标签介绍
<div> 与<span> 就像要放入内容的空容器，没有内在视觉属性。
<div>标签前后都要空一行，（用于分割）表示任何不连续的内容块，常用来集中放置任意数量的其他元素。将网页细分成多个逻辑区域，通过用CSS来定义每个区域，创建复杂的网页布局。
<span>标签则是嵌套式，成为段落的一部分，用于行内元素。修饰段落或标题中的文字和词语，用css以不同的字体、颜色等来高亮显示该名称。
id与class用于给网页的局部添加样式。
```
<div id ="footer"><p>copyright2006,<span class="bizname">cosmofarmer.com</span></p></div>
```

以下HTML标签可以忘却

不要使用<font>标签给文本添加颜色，改变字体大小和字体类型，控制文本显示。
不要使用<bt>和<i>格式化字体的标签，是文字变成粗体和斜体。但可以用<strong>标签粗体，<em>标签进行强调（浏览器会将该标签内部的内容显示为斜体。）<cite>可以把标题变成斜体，同时可以将使标题成为关键字，容易被搜索引擎搜到。
不要使用<tablet>标签进行网页布局，它只用于显示表格式信息。
不要使用仅能装饰内容外观的<body>标签属性。backgroung,alink（点击链接时）,vlink(点击链接后)。
不要使用特定于浏览器来的网页边距属性。leftmargin(左边距),marginheight（边距高度）。
不要滥用<br/>标签。用<br/>标签来插入换行，而不是新建一个段落。

如何用HTML来创建结构完善的网页

1.每页只用一个<h1>标签来标识该页面主题，有助于被搜索引擎恰当的搜索到。
2.用标题表示文本的相对重要性，合理利用<h1><h2>.
3.对文本段落使用<p>标签。
4.对于包含几个相关项目的列表，则使用无序标签。如导航标签，标题。
5.使用有序列表来表示一个过程的步骤，或者定义一组项目的顺序。
6.如果压迫创建定义或描述一个术语表，则用<dl><dt><dt>标签。
7.利用一些生僻的标签<cite>来引用标题，新闻报道或者网站，利用<adress>来标识该网页的创作者联系信息。
8.不要滥用<div>标签。创建导航条可以用<div>标签。然后在其中填入一些链接。然而用无序列表<ul>更好,因为导航条实际就是一个链接列表。
9.要记得关闭标签。
10.对于引用语长段落用<blockquote>标签，对于简短的引语用<q>标签。
11.如果没有适合的HTML标签来标识元素，则用<div>和<span>标签。

HTML中最重要的表单例子。

下面一个代码是经典的HTML表单代码，罗列了表单中大部分元素。

<html><head>    <title>无标题文档</title>    <meta charset="UTF-8"></head><body>    <form action="" method="post" >    编&nbsp;码：<input type="text"name="userid"value="NO." size="2"maxlength="4"onfocus="this.value=''" /> <br/>    用户名：<input type="text" name="username" value="请输入用户名"><br/>    密&nbsp;码：<input type="password" name="pwd" value="请输入密码"size="20"onfocus="this.value=''" />    <br/>    <br/>    性&nbsp;别：    <input type="radio" name="sex" value="m" id="male"/>     <label for="male">男</label>    <input type="radio" name="sex" value="f" id="female"/>    <label for="female">女</label>     <br/>    个人业余爱好：<br>    <input name="checkbox" type="checkbox" value="1" checked="checked" />看书    &nbsp;&nbsp;    <input name="checkbox2" type="checkbox" value="2" />上网 &nbsp;&nbsp;    <input type="checkbox" name="checkbox3" value="3" />听音乐<br>    <br/>    籍&nbsp;贯：    <select name="birth_place" id="birth_place_sel">        <option value="1">广西</option>        <option value="2">广东</option>        <option value="3">江苏</option>        <option value="4">四川</option>    </select>    <br/><br/>    联系地址：    <select name="menu1" onchange="MM_jumpMenu2('parent',this,0)">            <option>请选择需要的网址</option>        <option value="http://www.sina.com">新浪网</option>        <option value="http://www.sohu.com">搜狐网</option>        <option value="http://www.taobao.com">淘宝网</option>        <option value="http://www.mgdns.com">芒果互联</option>     </select>    <br/><br/>    说&nbsp;明：<br/>    <textarea name="comments" cols="40" rows="4" wrap="off" >这是一个有4行，每行可容纳40个字符，换行方式为虚拟的多行文本域。    </textarea><br/>    <br/>       请选择文件<br>    <input type="file" name="uploadfile" size="40"/>    <br>    <br/>    <br/>    <input type="submit" value="提交"/>    <input type="reset" value="重置"/></form></body></html>

在HTML文件里<!– –>之间的的内容是注释。如<!– 设置文本样式 –>就是注释，其中的“设置文本样式”不会再浏览器显示，而在代码中可以看到。

在HTML文件里，你可以用<!—->写代码注释，解释说明你的代码，这样有助于你和他人日后能够更好地理解你的代码。

同样在<style> </style> 中使用<!– –>，有其特殊的意义。有个别的浏览器不能识别标签<style> </style> ，会把<style> </style> 之间的内容显示出来。

<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">    <!--     .blue_bold {        font-weight: bold;        color: #0000FF;    }   -->    </style>    <script type="text/javascript">        function fun1()        {             var yourPwd = document.getElementsByName("pwd");             if( yourPwd[0] == null || yourPwd[0].value == "" )             {                 alert("密码不能为空！");                 document.getElementsByName("pwd")[0].focus();                 return;             }         }        function fun2()        {             var yourPwd = document.getElementsByName("pwd");             if( yourPwd[0] == null || yourPwd[0].value == "" )             {                 alert("密码不能为空！");                 window.event.returnValue=false;                 document.getElementsByName("pwd")[0].focus();                 return false;             }             document.testForm.submit();         }    </script></head><body>    <form action="Hello.html" method="post" name="user_login_form" >    <span class="blue_bold">文本域举例：</span><br />    查询：<input type="text" name="seach" size="30" onfocus="this.value=''" value="请输入关键字"/>    <br /><br />    <span class="blue_bold">编码举例：</span><br />    编码：<input type="text"name="userid"value="NO." size="2"maxlength="4" />    <br /><br />    <span class="blue_bold">密码域举例：</span><br />    密码：<input type="password" name="pwd" size="20" />    <br />    <br />    <fieldset><legend>个 人 资 料</legend>    <span class="blue_bold">单选框举例：</span><br />     <input type="radio" name="sex" value="F" />女性 &nbsp;&nbsp;     <input type="radio" name="sex" value="M" />男性<br />     <br/>    <span class="blue_bold">复选框举例：</span><br />     个人业余爱好：<br>    <input name="checkbox" type="checkbox" value="1" checked="checked" />看书&nbsp;&nbsp;    <input name="checkbox2" type="checkbox" value="2" />上网 &nbsp;&nbsp;    <input type="checkbox" name="checkbox3" value="3" />听音乐<br>    <br/>    <span class="blue_bold">你的籍贯：</span><br />    <select name="birth_place" id="birth_place_sel">        <option value="1">广西</option>        <option value="2">广东</option>        <option value="3">江苏</option>        <option value="4">四川</option>    </select>    </fieldset>    <br/><br/>    <span class="blue_bold">跳转菜单示例：</span><br />    <select name="menu1" onchange="MM_jumpMenu2('parent',this,0)">            <option>请选择需要的网址</option>        <option value="http://www.sina.com">新浪网</option>        <option value="http://www.sohu.com">搜狐网</option>        <option value="http://www.taobao.com">淘宝网</option>        <option value="http://www.mgdns.com">芒果互联</option>    </select>    <br/><br/>    <span class="blue_bold">多行文本域示例：</span><br/>    <textarea name="comments" cols="40" rows="4" wrap="off" >这是一个有4行，每行可容纳40个字符，换行方式为虚拟的多行文本域。</textarea><br/>    <br/>    <span class="blue_bold">为控件定义一个标签示例：</span><br/>    <input type="radio" name="sex" value="m" id="male"/>     <label for="male">男</label><br/>    <input type="radio" name="sex" value="f" id="female"/>    <label for="female">女</label>    <br/>    <br/>    <span class="blue_bold">文件框举例：</span><br />    请选择文件<br>    <input type="file" name="uploadfile" size="40"/>    <br>    <br />    <span class="blue_bold">图像域举例：</span><br />    <input type="image" name="tijiao" src="yjt.png" />    <br/>    <br/>    <input type="submit" value="提交" onclick="fun2()"/>    <input type="reset" value="重置"/>    <input type="button" value="普通按钮" onclick="fun1()"/>      <input type="hidden" name="totalNum" value="100"/></form></body></html>

前面两行代码中HTML/XMLNS（xml）都是申明文件遵循w3c规范。
!DOCTYPE指定了HTML文档遵循的文档类型定义(DTD)。
Microsoft Internet Explorer 6 的新增内容。你可使用此声明将 Internet Explorer 6 及以后版本切换到标准兼容模式下。
其语法：HTML 顶级元素可用性 “注册//组织//类型标签//定义语言”“URL”

顶级元素：指定 DTD 中声明的顶级元素类型。这与声明的 SGML 文档类型相对应。 HTML 默认。HTML。

可用性：指定正式公开标识符(FPI)是可公开访问的对象还是系统资源。 PUBLIC 默认。可公开访问的对象。

wrap 属性
通常情况下，当用户在输入文本区域中键入文本后，浏览器会将它们按照键入时的状态发送给服务器。只有用户按下 Enter 键的地方生成换行

如果您希望启动自动换行功能（word wrapping），请将 wrap 属性设置为 virtual 或 physical。当用户键入的一行文本长于文本区的宽度时，浏览器会自动将多余的文字挪到下一行，在文字中最近的那一点换行。
wrap=”virtual” 将实现文本区内的自动换行，以改善对用户的显示，但在传输给服务器时，文本只在用户按下 Enter 键的地方进行换行，其他地方没有换行的效果。
wrap=”physical” 将实现文本区内的自动换行，并以这种形式传送给服务器，就像用户真的那样键入的。因为文本要以用户在文本区内看到的效果传输给服务器，因为使用自动换行是非常有用的方法。
如果把 wrap 设置为 off，将得到默认的动作。

window.event.returnValue=false放在提交表单中的onclick事件中则不会提交表单，如果放到超链接中则不执行超链接，也就是它禁止了或取消了请求，没有任何效果。
比如：
if (confirm(“确认要删除订单吗？”)) {
$.ajax({
alert(“YES”);
//这里执行动作…
})
}
else {
window.event.returnValue = false;
}
当弹出这个窗口时，点击“确定”会弹出Yes ,点击取消会关闭窗口。

function delItem(id, CheckOutTime){    //alert(id);    //alert(CheckOutTime);    if (confirm("请确认要删除订单吗？")）｛        //alert ("YES")        $.ajax（｛            url:"orderManage.ashx?MyOption=DelOrder&&id="+id+"&&CheckOutTime="+CheckOutTime,type:"post",            data:{},            successs:function (val)...        ｝）    ｝    else {        windows.event.returnValue =false;        //windows.event.returnValue =false;放到提交表单中的onclick事件中则不会提交表单，如果放到超链接中    }

}

阅读全文

1 0