HTML5

最新推荐文章于 2023-06-10 12:48:13 发布

nikeylee

最新推荐文章于 2023-06-10 12:48:13 发布

阅读量238

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/nikeylee/article/details/106220759

版权

前端开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

初识HTML

HTML：超文本标记语言
超文本包括：文字，图片，音频，视频，动画等；
H5提供了新的功能，如使用网页实现动态渲染图形，图表，图像和动画，以及不需要安装任何插件直接使用网页播放视频等；
知名浏览器厂商对H5支持：微软，谷歌，苹果，Opera，Mozilla；
跨平台

W3C标准

万维网联盟
Web技术领域最权威和具影响力的国际中立性技术标准机构
包括：结构化标准语言（HTML，XML），表现标准语言（CSS），行为标准（DOM,ECMAScript）

HTML开发工具推荐

WebStorm，IDEA

HTML基本结构

<body></body>成对标签，分别叫开放标签和闭合标签；
单独呈现的标签（空元素），如<hr/> ，意为用/来关闭空元素；
DOCTYPE声明：告诉浏览器，我们要使用什么规范；
<html>标签：所有的标签都要包含在<html></html>标签内；
：注释；
<head>标签：网页头部；
<meta>标签：描述性标签，用来描述我们网站的一些信息；一般用来做SEO
<title>标签：网页标题；
<body>标签：主体部分；

<!DOCTYPE html>
<html lang="en">
<!--head网页头部-->
<head>
    <!--meta标签：描述性标签，用来描述我们网站的一些信息；一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="我的第一个网页">
    <meta name="description" content="学习HTML开发">

    <!--title网页标题-->
    <title>我的第一个网页</title>
</head>

<!--body主体部分-->
<body>
我的第一个网页
</body>
</html>

网页基本标签

标题标签：<h1>,<h2>,<h3>,<h4>,<h5>,<h6>
段落标签：<p>
换行标签：<br/>
水平线标签：<hr/>
字体样式标签：<strong>粗体，<em>斜体
注释和特殊符号：，空格  大于号> 小于号< ©版权所有

<!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>

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

<!--换行标签-->
两只老虎  跑得快<br/>
一只没有耳朵 一只没有尾巴<br/>

<!--粗体，斜体-->

粗体：<strong>i love you</strong>
斜体：<em>i love you</em>
<br/>
<!--特殊符号-->
空        格<br/>
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格<br/>
大于号&gt;<br/>
小于号&lt;<br/>
&copy;版权所有Nikey<br/>
</body>
</html>

HTML效果：

<p>段落间距比<br/>换行要大一些；
html中输入多个空格，展示时只显示一个空格；
如果没有特别声明换行<br/>或段落<p>，则文字在一行显示；

图像标签

常见的图像格式：JPG, GIF(动图), PNG, BMP（位图）....
src="image/1.png" 图像地址；推荐使用相对地址，不要使用绝对地址；../上一级目录
alt="图片" 图像的替代文字，一般是图片的名字（图像不能显示时，显示该文字）；
title="鼠标悬停提示文字" 鼠标悬停提示文字；
width="550" height="550" 图像宽度和高度；
src和alt是必填的

 <img src="image/1.png" alt="图片" title="鼠标悬停提示文字" width="550" height="550"/>

链接标签

href="path" 链接路径；必填；表示要跳转到哪个页面
target="目标窗口位置" 链接在哪个窗口打开，常用值：_blank新标签打开，_self在自己的网页中打开，默认的； _parent， _top不常用；
文本超链接

<a href="1、我的第一个HTML.html" target="_self">链接文本或图像</a>
<a href="https://www.baidu.com/" target="_blank">跳转到百度</a>

图像超链接

<a href="https://www.baidu.com/" target="_blank">
    <img src="image/1.png" alt="我的头像" title="鼠标悬停提示文字" width="150" height="150"/>
</a>

超链接：

1）页面间链接：从一个页面链接到另一个页面；

<a href="1、我的第一个HTML.html" target="_self">链接文本或图像</a>
<a href="https://www.baidu.com/" target="_blank">跳转到百度</a>

2）锚链接：需要一个锚标记，然后跳转到标记；

当页面中的文字信息很长时，点击文字“回到顶部top位置”，就可以跳到页面的顶部；

<!--使用name作为锚标记-->
<a name="top">我是页面顶部</a><br/>

<!--锚链接
1、需要一个锚标记
2、跳转到标记 top-->
<a href="#top">回到顶部top位置</a>
<br/>
<!--锚链接，跳转到另外一个页面的锚标记的位置，即down位置-->
<a href="3、图像标签.html#down">跳到图像标签底部down位置</a>

在3、图像标签.html的body中增加<a>锚标记

<a name="down">我是页面底部</a>

3）功能性链接：

点击联系我，打开默认邮箱，可以给下面的邮箱test@qq.com发邮件；

<!--邮件链接：mailto:-->
<a href="mailto:test@qq.com">点击联系我</a>

点击图片链接，可以打开在线QQ聊天对话窗口，直接聊天（在QQ推广页面中复制过来的）

<!--qq推广，可直接打开QQ聊天对话-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="请联系我下载视频教程" title="请联系我下载视频教程"/>
</a>

网页布局

列表，表格，媒体元素

表单及表单应用

表单初级验证