HTML5基础第一章学习(初学者 )

最新推荐文章于 2022-05-30 14:41:06 发布

白白凉铁血

最新推荐文章于 2022-05-30 14:41:06 发布

阅读量247

点赞数

分类专栏： HTML5 基础新手初学者文章标签： html html5 web

本文链接：https://blog.csdn.net/CikT_/article/details/112167720

版权

基础同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

新手初学者

4 篇文章 0 订阅

订阅专栏

HTML5

2 篇文章 0 订阅

订阅专栏

HTML5 第一章学习

HTML5 第一章学习(初学者)
1 HTML标签
2 文本标签
- 2.1 标题标签
- 2.2 段落标签
3 实践练习

HTML5 第一章学习(初学者)

HTML语言是一种文本类、依靠解释的方式执行的标记语言,它是Internet上用于编写网页的主要语言.用HTML编写的超文本文件称为HTML文件.

网页一般是HTML编写的扩展名为".html"或".htm".

编写HTML文件主要有两种方法

手工编写

打开记事本编写,修改后缀名为".html"

使用可视化软件

Adobe Dremweaver,简称"DW",是美国公司开发的集网页制作和网站管理与一身的所见即所得网页编辑器.

操作界面如图所示

1 HTML标签

HTML5文档由文字及标签组合而成.一般标签是由一个起始标签和一个结束标签所组成,使用"<“和”>"两个尖括号括起来.

列示代码如下

<! doctype html>
<html>
<head>
<mete charset="utf-8">
<title>我的第一个网页</title>
</head>

<body>
<p>这是我们第一次制作网页</p>
</body>
</html>

运行效果如图

以下标签介绍参考示例代码⬆

1.1 doctype标签

doctype是Document Type(文档类型)的简写,声明使用的HTML是什么版本,声明必须放在每一个HTML5文档最顶部,所有标签之上.

HTML5声明具体写法如下

<! doctype html>

1.2 html标签

它用于表示该文件是以超文本标记语言(HTML)编写的.html成对出现,首标签 html 和尾标签 /html 分别位于文件最前面和最后面

页面代码如下

<html>
	文件全部内容
</html>

1.3 head标签

HTML文件分为文件头和文件主体两部分

文件头部分用来规定文件标题(出现在Web浏览器窗口的标题栏中)和一些属性.(图为标题栏)
文件主体部分就是在Web浏览器窗口看到的内容

head标签是表示网页头部的标签,包含文件标题,编码方式等信息.

1.4 body标签

body标签表示文件主体内容 (Web浏览器窗口看到的内容)

1.5 meat标签

为了符合Web标准,所有HTML5文件必须声明使用字符语言,通常使用utf-8,gb2312字符集表示中文字符

例如:

<head>
<meta charset="utf-8'>
</head>

1.6 title标签

title标签表示文档标题,当HTML5文档在浏览器打开时,title标签内容出现在浏览器窗口

总结

大部份标签都是成对出现的,有一些是单独存在的标签称为空标签

2 文本标签

文本标签可以充实网页内容,也是HTML文档的重要组成部分.

2.1 标题标签

HTML5的标题标签是<h1>,<h2>,<h3>,<h4>,<h5>和<h6>,其中h1标签的重要性最高,h6最低.

h1至h6都是标题标签,都必须在HTML5首位成对出现.列如一对<h1>和</h>所概括的内容就是一级标签.h1至h6的字号逐渐减小.

代码如下 (省略了html和head标签)

<body>
<h1>这是h1标签效果</h1>
<h2>这是h2标签效果</h2>
<h3>这是h3标签效果</h3>
<h4>这是h4标签效果</h4>
<h5>这是h5标签效果</h5>
<h6>这是h6标签效果</h6>
</body>

运行效果

标题文字标签的对齐方式

语法:align=“对齐方式”

标题文字对齐方式

属性	说明
left	左对齐
center	居中对齐
right	右对齐

列示代码如下

<html>
<head>
<title>标题文字的对齐方式</title>
</head>
<body>
<h1 align="left">左对齐的效果</h1>
<h2 align="center">这是居中对齐的效果</h2>
<h3 align="right">这是右对齐的效果效果</h3>
</body>

运行效果
在这里插入图片描述

2.2 段落标签

在文本编辑栏中,输入完一段文字后,按下Enter键就生成了一个段落.而在HTML中需要通过标签来实现段落效果.

HTML5 的段落标签是<p>,表示以段落的方式组织内容,并可在两段内容之间留一段空白行

语法:<p>段落正文内容</p>
(可以使用成对的<p>来包含段落,也可以单独使用一个来划分段落)

代码示例如下

<html>
<head>
<title>输入段落文字</title>
</head>
<body>
<p>这是第一个段落</p>
   这是第二个段落</p>
</body>

运行效果
在这里插入图片描述
p标签的部分属性

属性	说明
align	水平对齐方式
class	设置CSS类
dir	文字方向
style	设置内嵌样式
title	设置工具提示(鼠标悬停提示文字)

换行标签<br>

语法:一行文本<br>另起一行

一个br代表一个换行,连续多个代表多个换行

水平标签<hr>

作用是在浏览器上显示一条细线以分隔两个区域

语法:<hr 属性=“属性值”>

hr标签的部分属性

属性	说明
align	水平对齐方式
size	设定线条厚度,以像素为单位
width	设定线条长度f
color	设定线条颜色可以用#0000FF或颜色英文
noshade	取消阴影或立体

强调标签<b>,<strong>

语法:<b>需要以粗体显示的文字</b>

3 实践练习

创建HTML5文档,编写一篇古诗,包含标题,古诗内容,诗文解释,诗文欣赏.
古诗标题使用h1标签,段落标题使用h2标签文本,段落使用p标签.

白白凉铁血

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5基础第一章学习(初学者 )

HTML5 第一章学习(初学者)HTML语言是一种文本类、依靠解释的方式执行的标记语言,它是Internet上用于编写网页的主要语言.用HTML编写的超文本文件称为HTML文件.网页一般是HTML编写的扩展名为==".html"==或".htm".编写HTML文件主要有两种方法手工编写打开记事本编写,修改后缀名为".html"使用可视化软件Adobe Dremweaver,简称"DW",是美国公司开发的集网页制作和网站管理与一身的所见即所得网页编辑器.操作界面如图所示H
复制链接

扫一扫