前端网页设计HTML&CSS&JS基础学习（1）——认识HTML
一、认识HTML
-
HTML是Hyper Text Markup Language(超文本标记语言)的缩写，是构成Web页面的基本元素，是一种规范，一种标准。
-
HTML不是一种编程语言，而是一种描述性的标记语言，通过标识符来标识网页中内容的显示方式，例如图片的显示尺寸、文字的大小、颜色、字体等。
-
浏览器能够对这些标记进行解释，按照要求显示出文字、图像、动画、媒体等网页内容。
二、网页基础认识
1.基础模板
1.1、前端的三个组成部分
- 结构（html）
- 样式（css）
- 功能/行为（Javascript）
1.2、HTML基础模板
<!DOCTYPE html>
<!--规定了浏览器文档使用哪种规范，html 属性就表示使用html5的标准去渲染，告诉浏览器这个网页的代码是用什么版本的语法标准去渲染
-->
<html lang="zh-cn">
<!--装载整个网页的所有内容, 网页中最大的标签
该标签内有且只有两个 子标签
lang 属性用于设置网页的预设语言
en 表示英文
zh-cn 中文
如果你网页主要服务于国内用户，值选择 zh-cn
-->
<head>
<!--网页的头部 告诉浏览器一些相关的信息-->
<meta charset="UTF-8">
<!--
元数据标签, 用于辅助head 传输数据,
依靠meta 的属性不同传达的数据信息也各不相同
charset 用于设置页面的编码格式
utf-8 根据unicode演变出来的一个数据传输的编码格式
如果编码格式和解码格式不同意就会出现乱码
-->
<title>Document</title><!--网页标题-->
</head>
<body><!--网页的主体 我们所看的网页结构 都是在body中的-->
</body>
</html>
以上就是一些关于HTML基础模板的认识
三、 认识标签
下面我们就开始进入讲解一些关于基础标签——我们要知道网页布局的三个步骤：
1. 划分区域
2. 调整位置
3. 填充内容
划分区域靠的就是html标签去进行划分
按照标签的元素类型进行页面的划分
html 中标签的类型有三种
- 块级元素 : 元素会独立占据一整行文档区域
- 行内元素 : 跟普通文字没有任何区别
- 行内块元素
1.识别标签
- 由 <> 包裹的关键词称为标签
- 标签有单标签与双标签之分
- <>之间除了标签名之外，还可以有 属性=“值” 的各种属性设置
2.基础标签
2.1、meta标签
<meta>标签写在head标签中，是一个辅助标签，根据属性不一样所表示的含义也不一样，常用的有：
<!-- 文档申明 -->
<!DOCTYPE html>
<!-- 根标签 -->
<html lang="zh-cn">
<!-- 网页头部区域 -->
<head>
<!-- 元数据标签 -->
<!-- charset 设置网页编码格式 -->
<meta charset="utf-8">
<!-- Keywords 关键词信息 : 用于辅助浏览器传达关键词信息增大网页被检索到概率
content 用于传输关键词信息, 多个关键词用逗号隔开
-->
<meta name="Keywords" content="关键词" >
<!-- description 添加网页描述信息 -->
<meta name="description" content="网页的描述">
<!-- 设置网页完美视口与页面缩放比例, 用于手机端适配。
对该网页的简介，搜索引擎在搜索结果中会展示出来，便于用户了解信息。 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 根据浏览器类型强制以特定的内科进行渲染,如果是ie浏览器就是用最新的edge去渲染,如果是其他浏览器就会默认用谷歌内核渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- 设置网页的标题 -->
<title>meta标签</title>
</head>
<!-- 网页主体区域 -->
<body>
</body>
</html>
2.2、标题标签——<h1~h6>
- 该标签是一个块级元素
- 网页标题标签 一共有6个分级分别是 h1 - h6, 其中 h1
标签是作为1级标题,是页面中最重要的一个标签,所有整个页面有且只有一个h1标签。 - h1标签通常用于存放网页的logo
- 默认展示效果会有字体加粗的效果,h1-h4之间是有字体增大的效果, h4和h4以后就是字体缩小
- 书写方式如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
2.3、段落标签——<p>
- 该标签是一个块级元素
- 用于划分一块段落文字区域， p标签里面不允许出现任何块元素，这会导致在浏览器中p标签被分隔成两个。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<hgroup>
<h2>静夜思</h2>
<h3>李白</h3>
</hgroup><!-- 标题分组 把有关联的标题进行一个分组 块元素 -->
<p> 床前明月光，疑是地上霜。</p>
<p> 举头望明月，低头思故乡。</p>
<!-- 引用大段落文字 块级元素-->
李白曾说:
<blockquote>
巴拉巴拉巴拉
</blockquote>
<!-- 引用小句文字 行内元素 -->
杜甫曾说:
<q>巴拉巴拉巴拉</q>
</body>
</html>
上列代码运用几个其他标签,大家可以运行查看结果，有对应的注解
2.4、其他常用到文本的一些标签
- b标签 strong标签
文字加粗，b标签仅为视觉上的加粗，strong还能够被搜索引擎检索。 - i标签 em标签
文字斜体，i标签仅为视觉上的斜体，em还能够被搜索引擎检索。 - br标签
用于文本换行。 - hr标签
横线分隔。 - sup标签、sub标签
上角标、下角标。 - del标签
删除线。 - pre标签
预格式化，按照编辑器中文字摆放格式来显示文字。
上面这些都是一些比较简单的标签，大家可以百度查询使用方法，这里就不挨个儿的展示了
2.、特殊符号
在HTML书写某些特殊字符的时候，可能会遇到问题，比如要在网页里面显示出字符 < >，就有可能和我们的标签冲突，所以有些特殊字符需要用对应代替的写法（字符实体）表示：
- < > 使用 < 和 > 代替
- 连续的空格会被忽略，如果确实需要连续空格，使用 代替
还有一些相关的HTML实体符号标签大家也可百度查询
结束语
希望通过这种方式和大家一起学习，如有不足的地方还请多多指教。关注点赞小羽，小羽后面还会不定期和大家一起学习！！！！！！！
2063
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
