HTML基础网页布局代码写法

W3C标准

W3C
World Wide Web Consortium 万维网联盟
中立性技术标准机构

W3C标准包括
结构化标准语言（HTML XML）
表现标准语言（CSS）
行为标准（DOM ECMAScript）

在idea创建一个工程开始学习HTML基础

<!--注释   DOCTYPE：告诉浏览器我们使用什么规范  -->
<!DOCTYPE html><html lang="en">
<!-- head代表网页头部 -->
<head><!--meta描述标签 用来描述网站的一些信息 一般用来做SEO --><meta charset="UTF-8"><meta name="lmh" content="学一些前端基础"><!--title 网页标题 --><title>我的第一个网页</title>
</head>
<!--body 为标签主题 -->
<body>
<!--标题标签 -->
<h1>1级标签</h1>
<h2>2级标签</h2>
<h3>3级标签</h3><!--段落标签 -->
<p>hahahaha</p>
<p>lall    alal</p><!--换行标签 -->
<br/><!--水平线标签 -->
<hr/><!--粗体 斜体 -->
粗体：<strong>HELLO</strong>
<br>
斜体：<em>WORLD</em>
<!--特殊符号 &nbsp空格 &gt >  &lt <  &自己去找 --></body>
</html>

插入图片格式

链接标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>链接标签</title>
</head>
<body>
<!--使用name作为一个锚标记-->
<a name="top">TOP</a>
<br><!--a标签
href 表示跳转到某个页面_blank 在新标签中打开_self 在自己的网页中打开
--><a href="first%20html.html" target="_blank">点击可跳转到另一个页面</a>
<br>
<a href="https://www.baidu.com" target="_self">点击可跳转到百度</a>
<br><img src="../resource/w.gif" alt="薇尔莉特" title="设置鼠标悬停在图片在的文章">
<br>
<!--锚标签
1.需要一个标记
2.跳转到标记
-->
<a href="#top">下拉到最低点击后可以回到顶部</a></body>
</html>

列表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表</title>
</head>
<body>
<!--有序列表应用：考试 问答 等形式-->
<ol><li>1</li><li>2</li><li>3</li>
</ol>
<hr>
<!--无序列表
应用： 导航 侧边栏等
-->
<ul><li>1</li><li>2</li><li>3</li>
</ul>
<!--自定义列表 <dt>标签 <dd>列表名称 <dt>列表内容
应用：公司网站底部
-->
<dl><dt>cj</dt><dd>123</dd><dd>1</dd>
</dl>
</body>
</html>

表格

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格</title>
</head>
<body>
<!--
表格table
行 tr
列 td
-->
<table border="lpx"><tr><!--colspan 跨行--><td colspan="4">1-1</td><td>3-5</td></tr><tr><!--rowspan 跨列--><td rowspan="2">2-1</td><td>2-2</td><td>2-3</td><td>3-4</td><td>3-5</td></tr><tr><td>3-2</td><td>3-3</td><td>3-4</td><td>3-5</td></tr>
</table></body>
</html>

媒体元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>媒体元素</title>
</head>
<body>
<!--音频和视频
src：资源路径
controls：控制条
autoplay：自动播放
-->
<video src="" controls autoplay></video><br><audio src=""  ></audio></body>
</html>

内联框架

<iframe src=" " name="hello" frameborder="0" width="1000px" height="800px"></iframe>

表单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action：表单提交的位置，可以是网站，也可以是请求处理的地址
method：post get 提交方式get提交方式：可以在url中看到提交的信息，高效但不安全post：比较安全，传输大文件 url看不到
-->
<form action="first%20html.html" method="get" ><!--input type="text" 文本输入框--><p>名字：<input type="text" name="username"></p><!--input type="password" 文本输入框--><p>密码：<input type="password" name="password"></p>
<p><input type="submit"><!--提交--><input type="reset"><!--重置-->
</p>
<!--value="选项的值" 获取值--><p>下拉框：<select 列表名称><option value="选项的值">中国</option><option value="选项的值">美国</option><option value="选项的值">英国</option></select></p><!--value="选项的值" 获取值--><p>下拉框：<select 列表名称><option value="选项的值">中国</option><option value="选项的值">美国</option><option value="选项的值">英国</option></select></p><!--文本域textarea name="textarea"--><p>反馈：<textarea name="textarea" cols="30" rows="10">text</textarea></p><br><!--文件域input type="file" name="files"--><p>反馈：<input type="file" name="files"><input type="button" value="上传" name="up"></p><!--邮政验证--><p>邮箱:<input type="email" name="email"></p><!--URL--><p>URL:<input type="url" name="url"></p><!--数字--><p>商品数量:<input type="number" name="num" min="0" max="100" step="1" ></p><!--滑块--><p>音量大小:<input type="range" name="voice" min="0" max="100" step="1" ></p><!--搜索框--><p>搜索:<input type="search" name="sea"  ></p></form></body>
</html>

表单的初级验证

HTML基础网页布局代码写法相关推荐

DIV+CSS最常用的网页布局代码11例。
转载自品略图书馆 http://www.pinlue.com/article/2019/03/2104/598296899335.html div css布局不同于table布局,它主要是按列来计算, ...
基础网页布局练习1-博文尚美
1.项目介绍博文尚美是一个设计网站, 此项目由html + css 布局完成页面,对前端基础知识的入门及掌握有非常好的提升效果,对html和css的使用及布局的体验能够建立起强大的信心. 2.项目相 ...
php入门写法PHP入门基础之php代码写法
一.在web页面嵌入PHP代码的几种风格推荐使用标准风格或简短风格代码如下:<?php //标准风格 echo 'Hello World!'; ?> //简短风格 echo 'Hello ...
css div网页布局代码自适应,css+div页面布局之1 -- 自适应
浮动 float属性:定义元素在哪个方向浮动.float:left | right | none 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 外边距 margi ...
html css建站的文件夹,建站教程CMS建站DIV+CSS常用的Html网页布局代码汇集
CSS: 以下是引用片段: #wrap{ width:100%; height:auto;} #column{ float:left; width:60%;} #column1{ float:left ...
响应式网页css代码写法
响应式css主要使用@media标签 @media screen and (max-width: 767px) { /* 手机 */#main_login {margin-top: 15% !impo ...
HTML之网页布局与设计技巧
网页布局网页布局是指网页整体的布局,虽然网页的内容是很重要额,但是如果网页的布局很乱,用户看起来也会感觉很不舒服.当用户打开一个网页时,第一印象就是网页漂不漂亮,然后才会去看网页内容. 网页大小设 ...
CSS基础「四」浮动 \ 常见网页布局
本篇文章为 CSS 基础系列笔记第四篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
python︱写markdown一样写网页，代码快速生成web工具：streamlit lay-out布局（四）
文章目录 1 `streamlit.beta_container()` 2 分列展示 3 按照比例分列展示 4 折叠/展开系列参考: python︱写markdown一样写网页,代码快速生成web工 ...
CSS布局模型/网页布局基础
CSS布局模型清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又 ...

HTML基础网页布局代码写法

W3C标准

HTML基础网页布局代码写法相关推荐

最新文章

热门文章