前端HTML5笔记

最新推荐文章于 2022-03-15 23:04:38 发布

灬CHAIN灬

最新推荐文章于 2022-03-15 23:04:38 发布

阅读量220

点赞数

分类专栏： JAVA

本文链接：https://blog.csdn.net/CHAINQWE/article/details/119545779

版权

本文介绍了HTML5的基础知识，包括HTML5的优势、W3C标准，详细讲解了基本标签如DOCTYPE、HTML、HEAD、BODY等，以及图像、超链接、网页布局的实现。深入探讨了列表、表格、媒体元素的使用，特别提到了视频和音频元素的插入。此外，文章还阐述了表单的语法、各种类型的表单元素和应用，以及表单的初步验证方法。

摘要由CSDN通过智能技术生成

1 初识HTML

Hyper Text Markup Language（超文本标记语言）
超文本包括：文字、图片(img)、音频、视频(video)、动画等

1.1 HTML5的优势

世界知名浏览器厂商对HTML5的支持
- 微软
- Google
- 苹果
- Opera
- Mozilla
市场的需求
跨平台兼容性

1.2 W3C标准

W3C
- World Wide Web Consortium（万维网联盟）
- 成立于1994年，Web 技术领域最权威和具影响力的国际中立性技术标准机构
- http://www.w3.org/
- http://www.chinaw3c.org/
W3C标准包括
- 结构化标准语言（HTML、XML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScript）

常见工具:

记事本
Dreamweaver
IDEA
WebStorm

2 标签基本标签

<!-- DOCTYPE:告诉浏览器,我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta 描述性标签，它用来描述我们网站的一些信息-->
<!-- meta 一般用来做SEO 搜索引擎优化 -->
    <meta charset="UTF-8">
    <meta name="keywords" content="CHAIN">
    <meta name="description" content="学习JAVA">
<!--   title 网页标题-->
    <title>我的第一个网页</title>
</head>
<!--body标签代表网页主体-->
<body>
Hello World!
</body>
</html>

DOCTYPE声明：
文档类型；
告诉浏览器，要使用什么规范
< !DOCTYPE html > 默认 html
< html > 标签，它是总标签，所有内容应该都在< html > 内
< head > 标签，它代表网页头部
< body > 标签，它代表网页主体
< title > 标签，它代表网页标题
< meta > 标签，描述性标签，它用来描述我们网站的一些信息，一般用来做SEO

3 图像，超链接，网页布局

3.1 网页基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1> 一级标签 </h1>
<h2> 二级标签 </h2>
<h3> 三级标签 </h3>
<h4> 四级标签 </h4>
<h5> 五级标签 </h5>
<h6> 六级标签 </h6>

<!--段落标签--分开的段落,间距大 -->
<P>两只老虎    两只老虎</P>
<P>跑得快       跑得快</P>
<P>一只没有耳朵     一只没有尾巴</P>
<P>真奇怪      真奇怪</P>
<P>两只老虎     两只老虎</P>
<P>跑得快        跑得快</P>
<P>一只没有耳朵    一只没有尾巴</P>
<P>真奇怪      真奇怪</P>

<!--水平线标签-->
<hr>

<!--换行标签--紧凑的段落,间距小     -->
两只老虎    两只老虎 <br/>
跑得快       跑得快<br/>
一只没有耳朵     一只没有尾巴<br/>
真奇怪      真奇怪<br/>
两只老虎     两只老虎<br/>
跑得快        跑得快<br/>
一只没有耳朵    一只没有尾巴<br/>
真奇怪      真奇怪<br/>

<!-- 粗体,斜体 -->
<h1> 字体样式标签</h1>
粗体  :  <strong>i love you</strong>
斜体  :  <em>i love you</em>

<!--特殊符号-->
空       格
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格