HTML5入门以及常用标签_html5语言速学-CSDN博客

本文链接：https://blog.csdn.net/CHAPA/article/details/106389366

HTML5入门以及常用标签

今日内容

web技术简介
什么HTML？
W3C
浏览器
第一个HTML网页

web技术简介

web技术中的三大内容

HTML【基本内容】
CSS【界面美化】
JavaScript【动作交互】

什么是HTML

HTML：Hyper Test Markup Language【超文本标记语言】
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
菜鸟教程：www.runoob.com

W3C

W3C 指万维网联盟（World Wide Web Consortium）
W3C 创建于1994年10月
W3C 由 Tim Berners-Lee 创建
W3C 是一个会员组织
W3C 的工作是对 web 进行标准化
W3C 创建并维护 WWW 标准
W3C 标准被称为 W3C 推荐（W3C 规范）

W3C 是如何创建的？
- 万维网（World Wide Web）是作为欧洲核子研究组织的一个项目发展起来的，在那里 Tim Berners-Lee 开发出万维网的雏形。
- Tim Berners-Lee - 万维网的发明人 - 目前是万维网联盟的主任。
- W3C 在 1994 年被创建的目的是，为了完成麻省理工学院（MIT）与欧洲粒子物理研究所（CERN）之间的协同工作，并得到了美国国防部高级研究计划局（DARPA）和欧洲委员会（European Commission）的支持。

浏览器

浏览器是网页的载体，网页需要在浏览器中使用

常用浏览器

浏览器请求网站的过程原理

* 在这里插入图片描述

上网三大组成部分

客户端【浏览器】
服务器
HTTP服务

第一个HTML网页

第一部分：文档声明：<!doctype html> //可以省去，但是不建议
第二部分：网页主体====，在头部中写配置文件
文档内容
- 头部：写配置文件
- 体部：写网页内容

HTML5常用标签

什么是标签

在HTML中，使用<>来包裹，是具有特殊含义的单词；
作用：使文本内容以特定的格式显示；

标签的分类

双标签：例如====
单标签：例如==
==自结束标签

如何学习HTML5

菜鸟教程：www.runoob.com
W3school：www.w3school.com

常用标签逐一讲解

标题标签：<h1>-<h6>
- 使用文本内容以标题的格式表示
 *
注释标签：
- 对于代码功能的解释说明，不想使用户看到，使用注释标签注释起来
- 快捷键：ctrl+/ 如果不选中注释内容，会把光标所在行全部注释，选中后只会注释掉选中的内容
页中生成横线：<hr/>，是一个单标签，用于分割内容
- “<hr color = "颜色 "/>” 改变横线的颜色
- “<hr size ="大小"/>”改变横线的大小
- “<hr color="颜色" size="大小"/>”改变横线的大小和颜色
快速复制光标所在行：Ctrl+d
HTML中的颜色：
- 英文字母：red 、blue、 yellow
- 十六进制 #000000,#+6个数字
- RGB表示法：rgb(255.255.0) 三个十进制数，范围是0-255
使内容居中显示：<center>要居中的内容</center>
段落标签：内容
- 作用：将文本内容分为多段
- 选择一整行快捷键：光标定位在行首按住shift+end
换行标签： 一个br换一行，写在要换行的文字末尾
字体标签：对字体进行设置
- 文字
 - size：设置字体小
 - color：设置字体颜色
 - face：设置字体样式
文本格式化【一般的字体格式都是使用双标签，样式之间可以相互嵌套】
- 加粗： b标签 
- 倾斜： i标签 
- 加粗并倾斜：
- 下标：sub标签 
- 上标：sup标签 
- 加粗：
- 删除线：<del></del>
图片标签：<img src="图片路径" alt="提示" width="宽度px" height="高度px">
- img 单标签
- src：指定图片路径
- width：指定宽度，单位px
- height：指定高度，单位px
 - 设置宽和高时，一般只设置一个属性，另外一个属性会根据原始图片的比例自缩放
 - 可以设置百分比，依赖于图片所在的范围【容器】
- 作用：在文档中引入图片
- 路径：来自网络资源，来自本地（相对位置/绝对位置）
 - <img src="http://www.baidu.com">引入网络资源
 - <img src="img/01,gif"> 相对位置
 - <img src="c:/图片/01.gif">绝对位置
超链接标签：
- href：指明跳转路径
- 引入网络资源，需要添加HTTP协议头
 - <a href="http://www.baidu.com">文字</a>
- 引入本地
 - <a href="本地相对位置"></a>
列表标签：
- 无序列表：<ul><li></li></ul>
 - 无序列表不标明顺序
- 有序列表：<ol><li></li></ol>
 - 有序列表自动添加序号
自定义列表：
- 自定义列表以
 
 标签开始。每个自定义列表项以 开始。每个自定义列表项的定义以
 开始。
 - dl：自定义列表
 - dt：自定义列表头
 - dd：自定义列表项
 - <dl>
 
 <dt>水果</dt>
 
 ``
 
 苹果
 
 `
 
 <dd>香蕉</dd>
 
 </dl>
空格标签：