一个有关HTML的问题

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<!--
http://www.zou114.com/shouji/
手机号码归属地定位查询,本站手机号码查询数据库数据直接来源于移动联通。支持中国移动、中国电信、中国联通目前已经启用的所有手机号段,归属地能较准确、全面地定位到各地级市.
运营商号段分配:
中国移动 1340-1348 135 136 137 138 139 150 151 152 157 158 159 187 188
中国联通 130 131 132 155 156 185 186
中国电信 133 1349 153 180 189
-->
<body onLoad="add()">
 <table BORDER id="table1"><tr id="row1"><td>中国移动</td><td id="ttd1"></td></tr></table>
 <table BORDER id="table2"><tr id="row2"><td>中国联通</td><td id="ttd2"></td></tr></table>
 <table BORDER id="table3"><tr id="row3"><td>中国电信</td><td id="ttd3"></td></tr></table> 
 <script>
  function add(){
   ttd1.innerHTML = "<input type='test' value=''>";
   ttd2.innerHTML = "<input type='test' value=''>";
   ttd3.innerHTML = "<input type='test' value=''>"; 
  } 
 </script> 
 <input type="text" name="pn" id="pn">
 <input type="button" id="fz" value="分组" onClick="fenzu(pn.value,ttd1.firstChild.value,ttd2.firstChild.value,ttd3.firstChild.value)">
 <script>   
  function fenzu(str,ttd1.firstChild.value,ttd2.firstChild.value,ttd3.firstChild.value){   //,ttd1.firstChild.value,ttd2.firstChild.value,ttd3.firstChild.value
   alert(str);
   var i = 0;
   var regEx1 = /^9$/;
   var regEx2 = /1(5(0|1|2|7|8|9)|8(7|8)|3(5|6|7|8|9))/;
   var regEx3 = /^1(3(0|1|2)|5(5|6)|8(5|6))$/;
   var regEx4 = /^133|153|180|189|134$/;
   var regEx5 = /^/d{11}$/;
   var regEx6 = /^134$/;
   var yd = new Array();
   var lt = new Array();
   var dx = new Array(); 
   var index;
   //str = str.replace(" ","");
   if(!regEx5.test(str)){
    alert("请检查电话号码是否为11位数字");
   }
   three = str.substr(0,3);
   four = str.substr(4,1)
   if(regEx2.test(three)){
    index =  yd.push(str);
    ttd1.value = ttd1.firstChild.value + yd[index];; 
   }else if(regEx3.test(three)){
    index =  lt..push(str);
    ttd2.value = ttd2.firstChild.value + lt[index];
   }else if(regEx4.test(three)){
    index =  dx..push(str);
    ttd3.value = ttd3.firstChild.value + dx[index];
   }else if(regEx6.test(three)){
    if(!regEx1.test(four)){
     index =  yd.push(str);
     ttd1.value = ttd1.firstChild.value + yd[index];
    }else{
     index =  dx.push(str);
     ttd3.value = ttd3.firstChild.value + dx[index];
    }
   }else{
    alert("此号码段不存在!");
   }      
  }  
 </script>
</body>
</html>

 

 

 

这个在浏览器窗口运行后   报错

 

 

很好,我会给你提供基本结构和示例代码,你可以在此基础上进行修改和完善。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>公司官网</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">产品中心</a></li> <li><a href="#">新闻中心</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> </header> <section id="banner"> <div class="banner-content"> <h1>欢迎来到我们的官网</h1> <p>我们是一家领先的公司,提供高质量的产品和服务,帮助客户实现业务增长。</p> <a href="#" class="btn">了解更多</a> </div> </section> <section id="about"> <div class="container"> <h2>关于我们</h2> <p>我们是一家成立多年的公司,拥有一支专业的团队,致力于为客户提供最好的产品和服务。</p> </div> </section> <section id="products"> <div class="container"> <h2>产品中心</h2> <div class="product-item"> <img src="product1.jpg" alt="产品1"> <h3>产品1</h3> <p>这是产品1的简介,可以包括产品的特点、功能、优势等。</p> </div> <div class="product-item"> <img src="product2.jpg" alt="产品2"> <h3>产品2</h3> <p>这是产品2的简介,可以包括产品的特点、功能、优势等。</p> </div> <div class="product-item"> <img src="product3.jpg" alt="产品3"> <h3>产品3</h3> <p>这是产品3的简介,可以包括产品的特点、功能、优势等。</p> </div> </div> </section> <section id="news"> <div class="container"> <h2>新闻中心</h2> <div class="news-item"> <img src="news1.jpg" alt="新闻1"> <h3>新闻1标题</h3> <p>新闻1的简介,可以包括新闻的内容、时间、地点等。</p> </div> <div class="news-item"> <img src="news2.jpg" alt="新闻2"> <h3>新闻2标题</h3> <p>新闻2的简介,可以包括新闻的内容、时间、地点等。</p> </div> <div class="news-item"> <img src="news3.jpg" alt="新闻3"> <h3>新闻3标题</h3> <p>新闻3的简介,可以包括新闻的内容、时间、地点等。</p> </div> </div> </section> <section id="contact"> <div class="container"> <h2>联系我们</h2> <p>如果您有任何问题或建议,请随时与我们联系。</p> <form action="#" method="post"> <label for="name">姓名:</label> <input type="text" id="name" name="name" required> <label for="email">邮箱:</label> <input type="email" id="email" name="email" required> <label for="message">留言:</label> <textarea id="message" name="message" required></textarea> <button type="submit">发送</button> </form> </div> </section> <footer> <p>©2021 公司名称</p> </footer> </body> </html> ``` 在上面的代码中,我们使用了以下元素和属性: - `<!DOCTYPE html>`:文档类型声明,告诉浏览器使用哪种 HTML 版本。 - `<html>`:HTML 根元素。 - `<head>`:文档头部,包含页面的元数据和引用的外部资源(如样式表和脚本)。 - `<meta>`:元数据标签,提供有关页面的信息,如字符集、描述、关键词等。 - `<title>`:文档标题,显示在浏览器的标题栏或标签页上。 - `<link>`:引用外部资源,如样式表。 - `<body>`:文档主体,包含页面的内容。 - `<header>`:页面头部,通常包含网站的 logo、导航栏等。 - `<nav>`:导航栏,包含页面的主要链接。 - `<ul>`:无序列表,通常用于导航栏。 - `<li>`:列表项,包含列表中的每个链接。 - `<section>`:页面的区块,通常包含具有一定关联性的内容。 - `<div>`:页面的容器,用于组织页面结构。 - `<h1>-<h6>`:标题,用于标识页面的主要内容和区块。 - `<p>`:段落,用于显示文本内容。 - `<a>`:链接,用于跳转到其他页面或下载文件。 - `<img>`:图片,用于显示图像。 - `<form>`:表单,用于收集用户输入的数据。 - `<label>`:表单标签,用于标识表单元素。 - `<input>`:表单输入框,用于接收用户输入的数据。 - `<textarea>`:文本域,用于接收多行文本输入。 - `<button>`:按钮,用于提交表单或执行其他操作。 - `<footer>`:页面底部,通常包含版权信息和其他链接。 你可以根据公司的实际情况,修改和添加相应的内容和样式。同时,你还需要创建一个样式表 `style.css`,用于定义页面的样式。以下是一个简单的样式表示例: ```css /* 页面重置 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 全局样式 */ body { font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #333; background-color: #fff; } /* 导航栏 */ nav { background-color: #f5f5f5; } nav ul { list-style: none; display: flex; justify-content: space-between; padding: 10px; } nav li { margin-right: 20px; } nav li a { text-decoration: none; color: #333; } nav li a:hover { color: #f00; } /* 首页横幅 */ #banner { background-image: url(banner.jpg); background-size: cover; background-position: center; height: 500px; display: flex; align-items: center; } .banner-content { max-width: 960px; margin: 0 auto; text-align: center; } .banner-content h1 { font-size: 48px; margin-bottom: 20px; color: #fff; } .banner-content p { font-size: 24px; margin-bottom: 30px; color: #fff; } .btn { display: inline-block; padding: 10px 20px; background-color: #f00; color: #fff; border-radius: 5px; text-decoration: none; } .btn:hover { background-color: #333; } /* 关于我们 */ #about { background-color: #f5f5f5; padding: 50px 0; } .container { max-width: 960px; margin: 0 auto; text-align: center; } #about h2 { font-size: 36px; margin-bottom: 30px; color: #333; } #about p { font-size: 18px; line-height: 1.8; margin-bottom: 30px; color: #666; } /* 产品中心 */ #products { padding: 50px 0; } .product-item { margin-bottom: 50px; } .product-item img { max-width: 100%; height: auto; } .product-item h3 { font-size: 24px; margin-bottom: 20px; color: #333; } .product-item p { font-size: 18px; line-height: 1.8; margin-bottom: 20px; color: #666; } /* 新闻中心 */ #news { background-color: #f5f5f5; padding: 50px 0; } .news-item { margin-bottom: 50px; } .news-item img { max-width: 100%; height: auto; } .news-item h3 { font-size: 24px; margin-bottom: 20px; color: #333; } .news-item p { font-size: 18px; line-height: 1.8; margin-bottom: 20px; color: #666; } /* 联系我们 */ #contact { padding: 50px 0; } #contact h2 { font-size: 36px; margin-bottom: 30px; color: #333; } #contact p { font-size: 18px; line-height: 1.8; margin-bottom: 30px; color: #666; } form label { display: block; font-size: 18px; margin-bottom: 10px; color: #333; } form input, form textarea { display: block; width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 5px; font-size: 18px; color: #333; } form button { display: block; padding: 10px 20px; background-color: #f00; color: #fff; border: none; border-radius: 5px; font-size: 18px; cursor: pointer; } form button:hover { background-color: #333; } /* 页面底部 */ footer { background-color: #f5f5f5; padding: 20px; text-align: center; color: #666; font-size: 14px; } ``` 在上面的样式表中,我们使用了以下选择器和属性: - `*`:通配符选择器,匹配所有元素。 - `margin`:外边距。 - `padding`:内边距。 - `box-sizing`:盒模型,控制元素的大小和边距计算方式。 - `font-family`:字体。 - `font-size`:字号。 - `line-height`:行高。 - `color`:字体颜色。 - `background-color`:背景颜色。 - `background-image`:背景图片。 - `background-size`:背景图片尺寸。 - `background-position`:背景图片位置。 - `height`:元素高度。 - `display`:元素的显示方式,如块级元素、行内元素等。 - `justify-content`:水平对齐方式。 - `list-style`:列表样式。 - `text-decoration`:文本修饰,如下划线、删除线等。 - `border-radius`:圆角半径。 - `text-align`:文本对齐方式。 - `max-width`:元素最大宽度。 - `margin`:外边距。 - `cursor`:鼠标指针样式。 你可以根据需要修改样式表的内容和样式。通过以上代码,你可以编写出一个简单的公司官网,展示公司的基本信息和产品服务等内容。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值