用js生成一个200行代码的html网页
时间: 2024-01-08 14:04:08 浏览: 27
以下是一个基本的示例,可以生成一个200行代码的HTML网页:
```javascript
// 创建 head 元素
const head = document.createElement('head');
// 创建 title 元素
const title = document.createElement('title');
title.innerHTML = 'My Page';
head.appendChild(title);
// 创建 meta 元素
const meta = document.createElement('meta');
meta.setAttribute('charset', 'UTF-8');
head.appendChild(meta);
// 创建 link 元素
const link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('href', 'style.css');
head.appendChild(link);
// 创建 body 元素
const body = document.createElement('body');
// 创建 header 元素
const header = document.createElement('header');
header.innerHTML = 'My Website';
body.appendChild(header);
// 创建 nav 元素
const nav = document.createElement('nav');
const ul = document.createElement('ul');
const li1 = document.createElement('li');
li1.innerHTML = 'Home';
ul.appendChild(li1);
const li2 = document.createElement('li');
li2.innerHTML = 'About';
ul.appendChild(li2);
const li3 = document.createElement('li');
li3.innerHTML = 'Contact';
ul.appendChild(li3);
nav.appendChild(ul);
body.appendChild(nav);
// 创建 main 元素
const main = document.createElement('main');
const h1 = document.createElement('h1');
h1.innerHTML = 'Welcome to my website!';
main.appendChild(h1);
const p = document.createElement('p');
p.innerHTML = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, quam ac aliquet euismod, mauris metus interdum elit, vel maximus eros lectus sit amet lacus. Vestibulum vel nibh euismod, iaculis elit vel, laoreet libero. Sed dignissim massa euismod, volutpat nisi non, dapibus quam. Maecenas tempus dui vel ligula vestibulum sodales. Sed ut velit sit amet tortor ornare finibus eu id nisl. Sed bibendum nisl quis dolor euismod, in lobortis elit molestie. Nam quis velit massa. Morbi mattis, nibh eu aliquam vehicula, lorem nisi tincidunt mauris, id ornare metus elit at nulla. Sed vestibulum venenatis libero sit amet consequat. Duis vel nibh vitae enim placerat sagittis. Sed ac sapien nec augue aliquam ullamcorper. Praesent et leo nisi. Maecenas ac vehicula elit.';
main.appendChild(p);
body.appendChild(main);
// 创建 footer 元素
const footer = document.createElement('footer');
const p2 = document.createElement('p');
p2.innerHTML = 'Copyright ©';
footer.appendChild(p2);
const span = document.createElement('span');
span.innerHTML = 'My Website';
footer.appendChild(span);
const p3 = document.createElement('p');
p3.innerHTML = 'All rights reserved.';
footer.appendChild(p3);
body.appendChild(footer);
// 将 head 和 body 元素添加到 HTML 页面中
document.documentElement.appendChild(head);
document.documentElement.appendChild(body);
```
上述示例代码创建了一个基本的网页结构,包括 head、title、meta、link、body、header、nav、main 和 footer 元素,共计200行代码左右。你可以根据需要,修改代码和样式,进一步完善网页的内容。