概述
一、HTML概述
HTML：（Hyper Text Markup Language）超文本标记语言，超文本是指页面可以包含图片、链接、音乐、程序等非文字元素。HTML实际上就是一组浏览器能够识别的标签。
1、基本标签
基本结构
<html>
<head>
<title>标题</title>
</head>
<body>
</body>
</html>
其中 <body>、</body>等成对的标签，分别叫开放标签和闭合标签
单独程先的标签（空元素）,如<hr />：意为用/来关闭空元素
<title>标题</title>
<!-- meta标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。-->
<meta charset="utf-8" />
<!--h1~h6 从大到小-->
<h1>内容标题标签</h1>
<p>段落标签</p>
<!--换行标签-->
<br />
<!--分割线-->
<hr />
<strong>加粗标签</strong>
<em>斜体标签</em>
<u>下划线标签</u>
单标签：仅一个标签
双标签：成对出现的标签
行级元素：内容撑开宽度，左右都是行内元素的可以排在一行，不具备段落处理能力，即不会换行。如a、strong、em、u标签用来修饰文本的标签。
块元素：无论内容又多少，该元素独占一行的标签，如p、h1~h6、li标签。
<div>块标签</div>
div可定义文档中的分区或节（division/section），div 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 div，那么该标签的作用会变得更加有效。
<!-- 注释 -->
<!-- 特殊符号 -->
空格
> 大于号(>)
< 小于号(<)
" 引号(")
© 版权符号
2、其他标签
IMG标签：将图片加入到网页中
<img src="图片地址" alt="如果图片没有正常显示，图片的代替文字" title="鼠标悬停提示文字" width="图片宽度px" height="图片高度px" />
a标签：超链接，通过点击跳转到另一个页面
<a href="链接路径" target="目标窗口位置"> 链接文本或图片</a>
target="_blank": 在新窗口打开
target="_self":当前窗口打开
音频标签：将音频插入到网页中
<audio src="音频路径" controls="controls"></audio>
controls: 提供播放、暂停和音量的控件
autoplay: 自动播放
loop：循环播放
preload：预加载，页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
视频标签：将视频插入到网页中，手机端或者IE浏览器中有效
<movie src="视频路径" controls="controls" muted="muted" autoplay="autoplay"></movie>
width：设置视频播放器的宽度。
height：设置视频播放器的高度。
muted： 静音，视频中，自动播放(autoplay)的前提是静音(muted)
二、列表与表格
1、列表
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。
<!-- 无序列表 -->
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容n</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容n</li>
</ol>
ul：一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等。
ol：一般用于排序类型的列表，如试卷、问卷选项等
2、表格
表格简单通用、结构稳定。
表格由table标签来定义。每个表格均有若干行（由 tr 标签定义），每行被分割为若干单元格（由td标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<!-- broder边框大小为1 -->
<table border="1"> <!-- 表 -->
<tr> <!-- 行 -->
<!-- colspan跨n列合并 -->
<th colspan="n">表头的内容</th> <!-- th表头，粗体、居中 -->
<th>表头的内容</th>
</tr>
<tr>
<!-- rowspan跨n行合并 -->
<td rowspan="n">第1个单元格的内容</td> <!-- 单元格 -->
<td>第2个单元格的内容</td>
</tr>
</table>
跨列：colspan=“横向跨的单元格数量”
跨行：rowspan=“纵向跨的单元格数量”
三、页面布局
网页内容变多之后网页会非常混乱,那么这个时候就需要网页布局。一般情况一个网页都会有上、左、下、右、中的布局风格。
<!-- 用于页面或页面中的一块区域 -->
<header>标记头部区域的内容</header>
<!-- 用于页面或页面的一块区域-->
<footer>标记脚步区域的内容</footer>
<section>Web页面中一块独立的区域</section>
<article>独立的文章内容</article>
<!-- 常用于侧边栏 -->
<aside>相关内容或应用</aside>
<nav>导航类辅助内容</nav>
四、表单
表单在网页中主要负责数据采集功能。一组标签
表单是网页中非常重要的组成部分,是我们与网站进行数据交互的一种非常重要的手段,表单通常会封装我们输入的很多内容然后打包上传给服务器,然后服务器根据我们提交的内容再做出相应的回应。
1、method提交方式：
get : 明文传输数据，传输速度非常快，但是传输内容有限，一次请求的数据大小限制在2K，并且只能传输字符。
post : 密文传输，传输速度比较慢，但是可以传输非常多的内容，正常情况下传输字符，非正常情况下经过设置连声音，视频，图片都可以传输,这个get请求是做不到的。
post方式提交的数据安全性要明显高于get方式提交的数据。因此在实际开发中通常采用post方式提交表单数据。
2、表单元素
表单是封装了好多输入的一个集合,我们在表单中输入内容的时候就需要用到各种接收数据的网页标签,这些标签统称为输入(input)标签。
<input type="input元素类型" name="input元素的名称" id="input元素的id" value="input元素的值" />
type：指定元素的类型。text、password、checkbox、radio、submit、file、hidden、image和button，默认为text
name：指定表单元素的名称
value：表单元素的值。type为radio时必须指定一个值。
size：指定表单元素的初始宽度，当type为text或password时，便当元素的大小以字符为单位，其他类型宽度以像素为单位
maxlength：type为text或password时，输入的最大字符数
checked：type为radio或checkbox时，指定按钮是否被选中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表单元素的用法</title>
</head>
<body>
<form action="demo07.html" method="get">
<p>案例1：传输文本</p>
<p>
<input type="text" name="input1" />
</p>
<p>案例2：传输密码</p>
<p>
<input type="password" name="input2" />
</p>
<p>案例3：单选按钮</p>
<p>
<!-- 一组单选按钮中 name应该是相同的 -->
<input type="radio" name="input3" value="1" />男
<input type="radio" name="input3" value="0" />女
</p>
<p>案例4：多选按钮</p>
<p>
<!-- 一组复选框中 name应该是相同的 -->
<input type="checkbox" name="input4" value="1" />高<br />
<input type="checkbox" name="input4" value="2" />富<br />
<input type="checkbox" name="input4" value="3" />帅<br />
</p>
<p>案例5：列表框</p>
<p>
<select name="select">
<option value="0">--请选择--</option>
<option value="1">北京</option>
<option value="2">上海</option>
</select>
</p>
<p>案例6：文本域</p>
<p>
<textarea rows="6" cols="50" name="textarea"></textarea>
</p>
<p>特殊输入框1：数字</p>
<p>
<input type="number" name="input5" min="0.0" max="10.0" step="0.1"/>
</p>
<p>特殊输入框2：邮箱</p>
<p>
<input type="email" name="input6"/>
</p>
<p>特殊输入框3：电话</p>
<p>
<input type="tel" name="input7" />
</p>
<p>特殊输入框4：日期</p>
<p>
<input type="date" name="input8"/>
</p>
<p>特殊输入框5：时间</p>
<p>
<input type="time" name="input9" />
<input type="datetime" name="input10" />
<input type="datetime-local" name="input11" />
</p>
<p>
<!-- button 普通按钮 -->
<input type="button" value="表单的普通按钮" onclick="javascript:alert('这是一个普通按钮触发的弹窗');" />
<!-- submit 提交表单 -->
<input type="submit" value="表单的提交" />
<!-- reset 重置表单 -->
<input type="reset" value="表单的重置" />
</p>
</form>
</body>
</html>
此处我们介绍了三种按钮
1) 普通按钮(button) : 页面上的普通按钮,需要自己定义按钮的事件才能发挥作用，如onclick事件
2) 提交按钮(submit) : 页面上的提交按钮,必须在表单中,可以帮助我们提交包含这个按钮的form表单
3) 重置按钮(reset) : 页面上的重置按钮,必须在表单中,可以帮助我们瞬间清空表单内容
向WEB服务器提交数据的时候,我们提交的数据都是以 key=value的形式传递,WEB服务器只需要根据我们设置的KEY来取值即可
3、表单的初级验证
placeholder： 输入框提示消息，可以描述文本框期待用户输入何种内容，提示语默认显示，当文本框中输入内容时提示语消失。
适用于input标签：text、search、url、email和password等类型
required : 规定是否允许为空值，规定文本框填写内容不能为空，否则不允许用户提交表单。
适用于input标签：text、search、url、email、password、number、checkbox、radio、file等类型
readonly：只读标签，可以提交到服务器
disabled：禁用标签，不会提交到服务器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表单</title>
</head>
<body>
<div>
<form action="demo08.html" method="get">
<p>
<input type="text" name="text" placeholder="请在这输入您的姓名"/>
</p>
<p>
<!-- 隐藏域 -->
<input type="hidden" name="hidden" value="隐藏的值" />
</p>
<p>
<input type="submit" value="提交"/>
</p>
</form>
</div>
<div>
<form action="demo08.html" method="get">
<p>
<input type="text" name="input1" required="required" placeholder="请在这输入内容..."/>
</p>
<p>
<input type="text" name="input2" value="只读内容,会提交" readonly="readonly" />
</p>
<p>
<input type="text" name="input3" value="禁用内容,无法提交" disabled="disabled" />
</p>
<p>
<input type="submit" value="确定"/>
</p>
</form>
</div>
</body>
</html>
最后
以上就是昏睡丝袜为你收集整理的HTML简单应用一、HTML概述二、列表与表格三、页面布局四、表单的全部内容，希望文章能够帮你解决HTML简单应用一、HTML概述二、列表与表格三、页面布局四、表单所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复