HTML
HTML称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。 [1]
超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中,也可能是其他文件,或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接,为人们查找,检索信息提供方便。 [1]
头部标签
<!--DOCTYPE:告诉浏览器,我们要使用什么规范-->
<!DOCTYPE html>
<!--html标签 总头部-->
<html lang="en">
<!--head标签 代表网页头部-->
<head>
<!-- meta描述性标签,它用来描述我们网站的一些信息-->
<!-- meta一般用来做SEO(搜索引擎)-->
<meta charset="UTF-8">
<!-- title标签 代表网页标题-->
<title>第一个网页</title>
</head>
<!--body标签 代表网页主体-->
<body>
</body>
</html>
基本标签
标题标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
越往下越小,最多只有h6
段落标签
<p>如果这是</p>
<p>一只</p>
<p>小白兔</p>
会根据p标签来分段,不然会连成一体
换行标签
dhiawdhigihgsh<br/>
dhiawdhigihgsh<br/>
文字太多的情况下,想在哪个文字后面开始换行就加 br/ 但是它还是一个段落
水平线标签
<hr/>
粗体、斜体
<strong>粗体</strong>
<em>斜体</em>
特殊符号
<!--空格-->
<!--大于号-->
>
<!--小于号-->
<
<!--版权符号-->
©
<!--这几个是常用的,想知道更多的就直接查百度 都是 & 开头的-->
图片标签
<!--src="图片地址" alt="图片的替代文字" title="鼠标悬停提示文字" width="图像宽度" height="图像高度" -->
<img src="" alt="替代文字" title="悬停文字" width="100" height="100">
链接标签
<!--href:必填,表示图片要跳转到哪个页面
target:表示窗口在哪里打开
_blank 在新标签中打开
_self 在自己的网页中打开
-->
<a href="" target="_self">点击</a>
<!--锚链接
1.需要一个锚标记
2.跳转到这个锚标记
也可以跳转到指定页面的地方,只要href加网页连接,然后再加上需要添砖的锚
-->
<a name="top">顶部</a>
<a href="#top">回到顶部</a>
列表
<!--有序列表-->
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<!--无序列表-->
<ul>
<li>0</li>
<li>0</li>
<li>0</li>
</ul>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
-->
<dl>
<dt>广西</dt>
<dd>南宁</dd>
<dd>桂林</dd>
<dd>柳州</dd>
</dl>
表格
<!--表格 table
行 tr
列 td
-->
<table>
<tr>
<!-- colspan 跨行-->
<td colspan="2">1-1</td>
<td>1-2</td>
<!-- rowspan 跨列-->
<td rowspan="2">1-3</td>
</tr>
</table>
音频和视频
<!--音频和视频
src:资源路径
controls:控制条
autoplay:自动播放
-->
<video src="" controls autoplay>视频</video>
<audio src="" controls autoplay>音频</audio>
页面分析结构
元素名 | 描述 |
---|---|
header | 标题头部区域的内容(用于页面或页面中的一块区域) |
footer | 标记脚部区域的内容(用于整个页面或页面的一块区域) |
section | Web页面中的一块独立区域 |
article | 独立的文章内容 |
aside | 相关内容或应用(常用于侧边栏) |
nav | 导航辅助内容 |
内联框架
<!--iframe 内联框架
src 引用页面地址
name 框架标识名-->
<iframe src="" name=""></iframe>
表单提交
属性 | 说明 |
---|---|
type | 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button,默认为text |
name | 指定表单元素的名称 |
value | 元素的初始值。type为radio时必须指定一个值 |
size | 指定表单元素的初始宽度。当type为text或password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位 |
maxlength | type为text或password时,输入的最大字符数 |
checked | type为radio或checkbox时,指定按钮是否是被选中 |
表单的应用
隐藏域 | hidden |
---|---|
只读 | readonly |
禁用 | disabled |
表单初级验证
提示信息 | placeholder |
---|---|
非空判断 | required |
正则表达式 | pattern |
<!--表单 form
action 表单提交的位置,可以是网站,也可以是请求处理地址
method post,get 提交方式
get方式提交:我们可以在url中看到我们提交的信息,不安全,但是高效。
post:比较安全 ,支持传输大文件
-->
<form action="" method="get">
<!-- 文本输入框:input type="text"-->
<p>名字:<input type="text" name="username"></p>
<!-- 密码输入框:input type="password"-->
<p>密码:<input type="password" name="pwd"></p>
<p>
<!-- 提交:input type="submit"-->
<input type="submit">
<!-- 重置:input type="reset"-->
<input type="reset">
</p>
</form>
单选框、多选框、按钮
<!--单选框:input type="radio"
value:单选框中的值
name:表示组-->
<p>性别:
<input type="radio" value="aa" name="j"/>男
<input type="radio" value="bb" name="j"/>女
</p>
<!--多选框:input type="checkbox"-->
<p>爱好:
<input type="checkbox" value="v" name="hh">睡觉
<input type="checkbox" value="b" name="hh">敲代码
<input type="checkbox" value="n" name="hh">聊天
</p>
<!--input type="button" 普通按钮
input type="image" 图片按钮
input type="submit" 提交按钮
input type="reset" 重置按钮
-->
<p>按钮:
<input type="button" name="but" value="按钮名字">
</p>
下拉框
<!-- 下拉框
selected 默认
-->
<p>国家:
<select name="列表名称">
<option value="q">中国</option>
<option value="w">美国</option>
<option value="e">日本</option>
</select>
</p>
文本框
<!--文本框
cols 列数目
rows 行数目
-->
<p>反馈:
<textarea name="text" cols="50" rows="10">文本内容</textarea>
</p>
文件域
<!-- 文件域 input type="file"-->
<p>
<input type="file" name="files">
</p>
简单认证
<!-- 邮箱认证:input type="image"-->
<p>邮箱:
<input type="image" name="email">
</p>
<!-- url认证:input type="url"-->
<p>url:
<input type="url" name="url">
</p>
<!-- 数字认证:input type="number"
step 每次增加多少-->
<p>商品数量:
<input type="number" name="url" max="100" min="0" step="1">
</p>
滑块、搜索框
<!-- 滑块:input type="range"-->
<p>音量:
<input type="range" name="voice" min="0" max="100" step="2">
</p>
<!-- 搜索框:input type="search"-->
<p>搜索:
<input type="search" name="search" >
</p>