HTML
基本信息
-
<!DOCTYPE>标签
此标签规定了浏览器使用哪种html或者html规范。现在一般都是html5的规范。
-
< meta>标签
此标签可以提供有关页面的元数据，说通俗点就是提供了关于此页面的各种信息。一般用来做SEO（搜索引擎优化）。
此标签有一些属性：
属性 值 描述 charset( html5新增的) character_set 定义文档的字符编码。 content text 定义与 http-equiv 或 name 属性相关的元信息。 http-equiv content-type default-style refresh 把 content 属性关联到 HTTP 头部。 name application-name author description generator keywords 把 content 属性关联到一个名称。 -
name
name属性主要用于描述网页，对应属性是 content ，以便于搜索引擎机器人查找、分类。
语法：
<meta name="参数" content="参数值" />介绍一下这些属性值的作用（仅列举个别）：
-
Keywords（关键字）
Keywords为搜索引擎提供的关键字列表。
-
Description（简介）
Description用来告诉搜索引擎你的网站主要内容。
-
-
http-equiv
http-equiv类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。
语法：
<meta http-equiv="参数" content="参数值"/>-
Refresh
自动刷新并指向新页面。
<meta http-equiv="refresh"content="5; url=http://www.baidu.com/"/>其中的5表示5秒后自动刷新并调整到URL新页面。
-
content-Type（显示字符集的设定）
<meta http-equiv="content-Type" content="text/html;charset=utf-8"/>
-
-
content
定义与 http-equiv 或 name 属性相关的元信息。
把http-equiv或name看成键的话，content就是值。
-
charset
定义文档的字符编码。
语法：
<meta charset="UTF-8">废话少说直接上图：
下图就是一个网页的基本骨架
-
基本标签
标题标签
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
最多到六级标签。
段落标签
<p>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。 诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</p>
<p> 宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。</p>
顾名思义段落标签就是用来分段的。
换行标签
我有一只小毛驴<br/>我从来也不骑
水平线标签
<hr/>
字体样式标签
<!--粗体-->
<strong>粗体</strong>
<!--斜体-->
<em>斜体</em>
注释
<!--注释-->
特殊符号
空格：
大于号：>
小于号：<
版权符号：©版权所有xxgbl
上图看效果
图像标签
<!--
src:图片路径
height:图片高度
width:图片宽度
alt:图片未加载时的提示文字
title:鼠标悬停时的提示文字
-->
<img src="../image/picture.jpg" height="375" width="500" alt="这是一个图片" title="java.jpg"/>
链接标签
文本超链接
<!--
target:
_blank 在新页面中打开
_self 在当前页面中打开（默认）
-->
<a href="https://www.baidu.com" target="_blank">百度</a>
图片超链接
<!--在<a>标签中嵌套一个图像标签-->
<a href="https://www.baidu.com">
<img src="../image/picture.jpg" height="100" width="150"/>
</a>
锚链接
<!--锚链接
使用name属性做一个标记
href指向这个标记
当点击回到顶部的时候就会实现页面间的跳转 页面就会回到<a name="top"></a>处
-->
<a name="top"></a>
···
···
···
···
<a href="#top">回到顶部</a>
邮件链接
<!--
使用mailto:邮箱地址实现邮件链接
-->
<a href="mailto:2764954541@qq.com" >点击联系我</a>
列表标签
有序列表
<!--有序列表 order list-->
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>Spring</li>
</ol>
无序列表
<!--无序列表 unordered list-->
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>Spring</li>
</ul>
自定义列表
<!--自定义标签 definition list-->
<!--应用范围: 网站底部-->
<dl>
<!-- definition term 自定义标题 -->
<dt>学科</dt>
<dd>HTML</dd>
<dd>CSS</dd>
<dd>JS</dd>
<dd>Spring</dd>
</dl>
上图：
表格
<!--
<table> 表格标签
<tr> table row 表示行
<td> table data 表示行中的数据
-->
<table>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
跨行
<table border="1">
<tr>
<td rowspan="2">1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
跨列
<!--跨列 colspan-->
<table border="1">
<tr>
<td colspan="3">1-1</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
跨行和跨列通俗点理解就是合并单元格，跨行（rowspan）是纵向合并单元格，跨列（colspan）是横向合并单元格。
上图！
媒体元素
音频
<!--音频 audio
src 资源路径
controls 控制音频播放暂停 如果不设置controls属性 页面中无法显式的显示音频
autoplay 自动播放
-->
<audio src="../audio/声.mp3" controls autoplay></audio>
视频
<!--视频 video
src 资源路径
controls 控制视频播放暂停
autoplay 自动播放
-->
<video src="../video/2.mp4" controls autoplay></video>
内联框架
<!--内联框架 在一个页面中打开另一个页面
相当于将一个页面分割成若干个部分,每个<iframe>标签就代表一部分.
name 框架标识名
-->
<iframe src="" name="hello" frameborder="1" height=" 500" width="1000"></iframe>
表单(重点)
<!-- form表单
action: 表示向何处提交表单数据（可以是网站，也可以是请求）
method: 提交方式,常用值 get post
-->
<form action="#" method="post">
</form>
上面就定义了一个表单，只不过是空表单。action和method是必填项。
文本输入框
<!--文本输入框
name：表单元素的标识名
value: 表单元素的初始值
maxlength: 表单元素能输入的最大字符数
-->
<p>用户名：<input type="text" name="username" value="xxgbl" maxlength="10"></p>
密码输入框
<!-- 密码输入框-->
<p>密码：<input type="password" name="password"></p>
单选框
<!-- 单选框
value: 单选框的值
name： 表示组，name值相同 表示在同一个组
-->
<p>性别：
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
多选框
<!--多选框
value 多选框的值
name 表示组
-->
<p>爱好：
<input type="checkbox" value="吃" name="hobby">吃
<input type="checkbox" value="喝" name="hobby">喝
<input type="checkbox" value="拉" name="hobby">拉
<input type="checkbox" value="撒" name="hobby">撒
<input type="checkbox" value="睡" name="hobby">睡
</p>
下拉框
<!-- 下拉框
name：表示组 （组可以理解为数组 一个country数组中有China，US，JP这些值）
id： 通过id，选择器可以定位到此表单元素
selected: 默认选中
-->
<p>下拉框：
<select name="country" id="">
<option value="JP" >日本</option>
<option value="US">美国</option>
<option value="China" selected >中国</option>
</select>
</p>
文本域
<!-- 文本域-->
<p>
<textarea name="textarea" >
</textarea>
</p>
上传文件
<!-- 上传文件-->
<p>
上传:
<input type="file" name="files">
<input type="button" name="btn2" value="上传">
</p>
邮箱
<!-- 邮箱-->
<p>邮箱:
<input type="email" name="email">
</p>
URL
<!-- url-->
<p>url:
<input type="url" name="url">
</p>
数字
<!-- 数字
max: 最大值
min: 最小值
step: 跨步 一次加五
-->
<p>数字:
<input type="number" name="number" max="100" step="5" min="0">
</p>
滑块
<!-- 滑块-->
<p>滑块:
<input type="range" name="range">
</p>
搜索框
<!-- 搜索框-->
<p>搜索框
<input type="search" name="search">
</p>
按钮
<!-- 点击按钮-->
<p>按钮：
<input type="button" value="按钮" name="btn1">
</p>
<!-- 图片按钮-->
<p>图片按钮：
<input type="image" src="../image/picture.jpg" width="80" height="50" name="image">
</p>
<!-- 登录和重置按钮-->
<p>
<input type="submit" value="登录">
<input type="reset" value="重置">
</p>
上图
每个表单元素都有一个name标识符，用来唯一标识此表单元素。
表单应用
只读
<!-- 只读: readonly -->
<p>用户名:
<input type="text" name="username" value="admin" readonly>
</p>
隐藏域
<!-- 隐藏域: hidden-->
<p>密码:
<input type="password" name="password"value="123456" hidden>
</p>
禁用
<!-- 禁用属性:disabled -->
<p>性别:
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex" disabled/>女
</p>
label标签
<!-- label: 增强鼠标可用性,当鼠标点击邮箱 鼠标会自动定位到id="mark"的表单元素上-->
<p>
<label for="mark">邮箱</label>
<input type="email" name="email" id="mark">
</p>
上图！
表单初级验证
非空
<!--非空判断 required -->
<p>用户名:
<input type="text" name="username" required>
</p>
提示信息
<!--提示信息 placeholder -->
<p>密码:
<input type="password" name="password" placeholder="此处输入密码">
</p>
正则表达式
<!-- 正则表达式 pattern
通过匹配正则表达式来验证输入的邮箱格式是否正确
-->
<p>
<label for="mark1">邮箱</label>
<input type="email" name="email" id="mark1" pattern="[a-zA-Z0-9_-]+ ">
</p>
本文暂时没有评论，来添加一个吧(●'◡'●)