第一天 HTML简介及常用标签（文本标签）

一、 HTML简介
- 1. 什么是HTML
- 2. HTML的编写工具
- 3. HTML的文档结构
- 4. W3C标准
二、HTML中的常用标签
- （一）. head标签
- - 1. head中的常用标签
  - - ①meat标签
    - ② title标签
    - ③link标签
    - ④script标签（网页的行为）
    - ⑤style标签（网页的表现）
- （二）. body标签
- - 1. body中的常用标签（文本标签）
  - - ① 段落标签
    - ② 标题标签
    - ③ 格式化标签
    - ④ 其它标签
三、源代码
四、运行效果

一、 HTML简介

1. 什么是HTML

HTML:超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。由浏览器负责解析执行
超文本： 指不仅仅可以表示文本，还超出了文本的范围，还可以显示图片，音频和视频，超链接等等。

2. HTML的编写工具

记事本（不推荐，开发效率低）
Notepad++
HBuilder（推荐，开发效率高）

3. HTML的文档结构

根标签<html></html>告诉浏览器从这里开始解析
头部标签<head></head> 浏览器和搜索引擎需要的相关信息
主体标签<body></body> 显示内容
根标签下有且仅有头部与主体两个标签

以下是符合**“W3C”标准**的HTML文档结构

4. W3C标准

万维网联盟（外语缩写：W3C）标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）
结构的标准语言是HTML，XML
表现的标准语言是CSS
行为的标准语言是ECMAScript

二、HTML中的常用标签

（一）. head标签

head标签内的内容主要提供给浏览器和搜索引擎使用，不显示在浏览器中，用户无法看见！

1. head中的常用标签

①meat标签

<meat charset="utf-8" />编码格式标签，告诉浏览器网页的编码格式(不告诉浏览器编码格式，有可能导致乱码)
<meat  name="keywords" content=“北京尚学堂，···”/> “keywords”关键字标签，搜索引擎检索网页时用到。各关键字以逗号分割。
<meta name="description" content="淘宝网- 亚洲较大的网上交易平台···"/>“description”网页描述标签。一般用来描述网页或者网站内容！

② title标签

显示网页标题

<title>我的第一个网页</title>网页标题标签   用于显示当前网页名称，显示在浏览器标签栏

③link标签

链接外部资源（包括网上资源和本地资源）
一般链接CSS文件和Script文件，以及项目中的其它资源

<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon">
将百度网页标题的图标拿来作为自己网页标题图标（链接外部资源）
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
使用img文件夹下的favicon.ico文件作为自己网页标题图标（链接内部资源）

④script标签（网页的行为）

网页与人机交互或弹出效果等的实现

<script>function test(){alert("你好,世界")}
</script>
弹窗效果

⑤style标签（网页的表现）

调控网页的显示样式，让网页更美观

<style>body{background: blue;}
</style>
将网页背景设置为蓝色

（二）. body标签

body标签中的内容是浏览器显示给用户看的。

1. body中的常用标签（文本标签）

① 段落标签

常用于标记整段文字

<p>这是一个段落 </p> 特点是独占一行，一行放不下，自动换行 ,默认字体大小

② 标题标签

常用于文章标题

 <h1></h1>·····<h6></h6>特点：独占一行，字体加粗，字体由h1最大到h6最小

③ 格式化标签

加粗、倾斜、上标、下标、预格式文本等等

<b>文字</b>加粗  （现推荐使用<strong>文字</strong>效果一样）
<i>文字</i>倾斜  （现推荐使用<em>文字</em>效果一样）
<sub>文字</sub>上标
<sup>文字</sup>下标
<del>文字</del>删除线
<ins>文字</ins>下划线（常与del标签一起使用，表示更正）
<pre>代码</pre>预格式文本（常用于显示计算机代码）

④ 其它标签

<br />换行
&nbsp 空格

三、源代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>我的第一个网页</title><link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon"/><link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"/><meta name = "keywords" content = "谷歌一下"/></head><script>function test(){alert("你好,世界")}</script><style>body{background: beige;}</style><body onload="test()"><h1><b>天道酬勤</b>(一级标签)</h1><h2>双氧水分解反应（二级标签）</h2><p>2H<sub>2</sub>O<sub>2</sub>=2H<sub>2</sub>O+O<sub>2</sub></p><h3>平方差公式(三级标签)</h3><p><del>(a-b)<sup>2</sup>=a<sup>2</sup>+2ab+b<sup>2</sup></del><br /><ins>(a-b)<sup>2</sup>=a<sup>2</sup>-2ab+b<sup>2</sup></ins></p><h4>无题<sub>&nbsp;&nbsp;李商隐&nbsp;&nbsp;</sub>(四级标签)</h4><p><b>相见时难别亦难，<i>东风无力百花残。</i></b> <br /><strong>春蚕到死丝方尽，<em>蜡炬成灰泪始干。</em></strong> <br /><b>晓镜但愁云鬓改，<em>夜吟应觉月光寒。</em></b> <br /><strong>蓬山此去无多路，<i>青鸟殷勤为探看。</i></strong> <br /></p><h5>Java Code(五级标题)</h5><p><pre>public class HelloWorld{public static void main(String[] args){System.out.println("Hello World!");}}</pre></p></body>
</html>

四、运行效果

Web学习第一天——HTML简介及常用标签（文本标签）相关推荐

week9 day1 HTML简介和常用标签
week9 day1 HTML简介和常用标签一.前端内容介绍二.HTML简介 2.1 HTML简介 2.2 HTML发展史三.HTML标签与文档结构 3.1 HTML标签与文档结构 3.2 HT ...
html5简介及常用标签
HTML介绍 Web服务本质 # python自制服务器socket通信端import socketsk = socket.socket() sk.bind(("127.0.0.1" ...
【HTML基础-1】HTML标签简介及常用标签
目录 1 HTML概述 1.1 什么是HTML 1.2 HTML的语法规则 2 HTML标签简介 2.1 HTML标签 2.2 HTML元素 2.3 HTML实例 3 HTML常用标签 3.1 标题标 ...
前端学习第一周-计算机基础，html标签的介绍，其中包括列表，表格以及表单的使用
前端学习第一周-HTML基础文章目录前端学习第一周-HTML基础前言 DAY 1 计算机组成计算机网络 DAY 2 vscode快捷方式 HTML骨架 DAY 3 HTML属性 HTML标签 ...
html简介及常用标签
目录一.html的简介 1.什么是html? 2.第一个html程序 3.html的规范(遵循) 4.html的操作思想二.html中常用的标签 1.文字标签和注释标签 2.注释标签 3.标题标签 ...
HTML简介及常用标签介绍
一.概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以 ...
HTML(简介及常用标签)
一.HTML简介 1.1 html是什么? 超文本标记语言(Hypertext Markup Language,HTML)通过标签语言来标记要显示的网页中的各个部分.一套规则,浏览器认识的规则. 浏览 ...
全端开发——html简介与常用标签
1.html是什么? •超文本标记语言(Hypertext Markup Language,HTML)通过标签语言来标记要显示的网页中的各个部分.一套规则,浏览器认识的规则 •浏览器按顺序渲染网页文件 ...
QT开发学习-第一章-QT简介
QT简介一.QT简介 1.QT简介 2.QT优点二.QT开发工具 1.Qt Creator 2.Qt Designer 3.Qt Linguist 4.Qt Assistant 5.Qmake 6 ...

Web学习第一天——HTML简介及常用标签（文本标签）