HTML5标签

最新推荐文章于 2024-09-08 01:14:57 发布

李大锋�

最新推荐文章于 2024-09-08 01:14:57 发布

阅读量226

点赞数

CC 4.0 BY-SA版权

文章标签： HTML5

本文链接：https://blog.youkuaiyun.com/weixin_43779926/article/details/84674044

一、HTML5简介

1.超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

2.可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

3.HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。

二、网页编辑工具

1.记事本

2.Dreamweaver

3.WebStorm

三、HTML5作用

1.需要将java在后台根据用户请求处理的请求结果在浏览器中显示给户. 在浏览器中数据需要使用友好的格式展现给用户.

2.HTML是告诉浏览器接收到的数据使用什么样的数据组织形式进行显示.

四、互联网的三大基石:

1.URL:统一资源定位符.(唯一的定位一个网络资源)

2.HTTP:超文本传输协议.(规范浏览器和服务器之间数据交互的格式)

3.HTML:超文本标记语言(有效的组织数据在浏览器端的显示)

五、HTML网页基本结构

HTML的文档声明: 文件名.html 或者文件名.htm

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>第一个网页</title>
</head>
<body>
    这是我的网页
</body>
</html>

注：1.<title>标签告诉浏览器使用什么标题显示网页

2.<!DOCTYPE html>告诉浏览器使用什么规范

3.<meta charset="UTF-8" />推荐utf-8，还可设置为gb2312、GBK等在<!DOCTYPE html>后面设置

a.gb2312包含全部中文字符

b/.utf-8 则包含全世界所有国家需要用到的字符

c.页面编码应与页面文件保存时的编码一致

2.<body></body>是网页主体

3.< body>、</body>等成对的标签，分别叫开放标签和闭合标签

单独呈现的标签（空元素），如 <hr/> ；意为用 / 来关闭空元素

4.HTML是由浏览器进行解析执行的

六、网页基本标签

1. 标题标签：<h1>一级标题</h1>~<h6>六级标题</h6>，H1标签最大字体

2.段落标签：<p>深圳欢迎你，有梦想谁都了不起！</p>

3.换行标签：

<p>
  深圳欢迎你，有梦想谁都了不起！<br />
  有勇气就会有奇迹。<br />
  深圳欢迎你，为你开天辟地<br />
  ……
</p>

4.水平线标签

<p>
<h1>深圳欢迎你</h1>
<hr/>
    深圳欢迎你，有梦想谁都了不起！<br />
    有勇气就会有奇迹。<br />
    深圳欢迎你，为你开天辟地<br />
    ……
</p>
</body>
</html>

5.字体样式标签

a.加粗：<strong>…</strong>

b.斜体：<em>…</em>

<strong>徐志摩人物简介</strong>
<p>
   <em>1910</em>年入杭州学堂<br/>
   <em>1918</em>年赴美国克拉大学学习银行学<br/>
    ……
</p>

6.注释和特殊符号

注释和特殊符号
特殊符号	字符实体	示例
空格	&nbsp;	<a href="#">百度</a> \|&nbsp; <a href="#">新浪</a>
大于号(>)	>	如果时间>晚上6点，就坐车回家
小于号(<)	<	如果时间<早上7点，就走路去上学
引号(")	&quot;	W3C规范中，HTML的属性值必须用成对的&quot;引起来
版权符号@	©	© 2003-2018大锋

7、图像标签

a.常见的图像格式 :JPG、GIF、PNG、BMP

<img src="path" alt="text" title="text"  width="x"  height="y" />

src:图像地址；alt图像的替代文字；title:鼠标悬停提示文字；width:图像宽度；height:图像的高度

8.衔接标签

<a href="path" target="目标窗口位置">链接文本或图像</a>

href:衔接路径；target:衔接在那个窗口打开，常用值是_self或_blank_

<!--文本超衔接-->
<a  href="detail.html"  target="_blank">孩子，欢迎降落在这残酷的世界</a>

<!--图像超衔接-->
<a  href="detail.html"  target="_blank">
    <img src="image/img1.png" alt="孩子，欢迎降落在这残酷的世界"
           title="孩子，欢迎降落在这残酷的世界" />
</a>

七、常用的超链接

1.锚链接：

a.从A页面的甲位置跳转到本页中的乙位置

b.从A页面的甲位置跳转到B页面中的乙位置

<!--创建跳转标记-->
<a name="marker">乙位置</a>

<!--创建跳转链接-->
<a href="#marker">甲位置</a>

2. 功能性链接

电子邮件、QQ、MDN

<a href="mailto:bdqnWebmastes@bdqn.cn">联系我们</a>

八、行内元素和块元素

1.块元素：无论内容多少，该元素独占一行（p、h1-h6…）

2.行内元素：内容撑开宽度，左右都是行内元素的可以排在一行(a、strong、em…)

<p>我是p元素</p>
    <h1>我是标题h1</h1>
    <a href="#">我是超链接a元素</a>
    <strong>我是strong元素</strong>