前端自学之HTML(01)

HTML简介及基本标签学习

一、定义
HTML:超文本标记语言,即对文本进行排版的标记性语言。

  • 注意:HTML非编程语言。
  • 功能:网页的骨架。

二、部分
标签、元素、属性三部分
例如:

  • <img src="logo.jpg" alt="标识" />是一个元素
    <img />是标签
    srcalt是属性
    "logo.jpg""标识"是属性的值

  • <title> 你好 </title>是一个元素
    <title></title>是一对标签
    你好是标签的内容

三、HTML文件基本结构

<!DOCTYPE html>
<html lang="en">
	<head>
		<mata charset="UTF-8" />
		<title>...</title>
	</head>
	
	<body>//主体:网页中包含的内容,显示在浏览器工作区
	...
	</body>
</html>
  • 说明:
  • <!DOCTYPE html>定义文档类型为HTML。
  • lang属性:搜索引擎,”en”英文,”zn”中文。
  • <head>头部:浏览器、搜索引擎所需信息。
  • <mata />元数据标签,提供给浏览器和搜索引擎的关于网页的描述性数据。比如:网页的作者是谁,什么时候修改的等信息。
  • charset属性:字符集编码方式,即网页在显示的时候,网页主体信息的字符是按什么样的方式显示的。
  • <title></title>网页的标题,显示在浏览器标签上方。
  • <body>主体:网页中包含的内容,即显示在浏览器主体工作区的内容。

四、HTML常用标签

  1. 标题h1~h6
  • 代码
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h6>六级标题</h6>
  • 效果
    标题标签
    注:一个页面建议只有一个一级标题。
  1. 段落p
  • 代码
<p>这是段落,每个段落自动换行。</p>
<p>这是段落,每个段落自动换行。</p>
<p>段落内部文字忽略连续      空格,

也不会显示空行,且不会换行(生成一个空格)。</p>
  • 效果
    段落标签
  1. 段内换行br(单独出现)
  • 代码
<p>这是第一个段落。<br />这是第二个段落。</p>
<p>这是第一个段落。<br />这是第二个段落。</p>
  • 效果
    换行标签
  1. 空格字符&nbsp;
  • 代码
<p>这是一个&nbsp;空格</p>
  • 效果
    空格特殊符
  1. 预留格式pre
  • 代码
<pre>
	这是预留格式文本。它保留了     空格
	换行和
	
	空行
</pre>
  • 效果
    pre预留
  • 注:pre很适合显示计算机代码
  • 代码
<pre>
	for i = 1 to 10
		print i
	next i
</pre>
  • 效果
    pre预留文本格式
  1. 行内组合span
  • 功能:组合行内元素,以便通过CSS样式来格式化。
  • 代码
<style type="text.css">
	span{
		color: blue;
		font-weight: bold;
	}
</style>
<p>最新<span>中国人口调查报告</span>指出...</p>
  • 效果
    span标签
  1. 水平线hr
  • 代码
<p>段落一</p>
<hr />
<p>段落二</p>
  • 效果
    水平线标签
  1. 注释(不在浏览器中显示)
  • 功能:对代码的内容进行标注说明,增强可读性。
  • 代码
<!-- 这是一段注释 -->
<!-- 注释不会再浏览器中显示 -->

分类: HTML

3 条评论

rb · 2020-04-24 00:04

jggnb

    Duing · 2020-04-26 00:53

    bggnb

liuyue · 2020-07-13 17:02

aile jgg

发表评论

Avatar placeholder

您的电子邮箱地址不会被公开。