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>
空格标签：

HTML5入门以及常用标签相关推荐

html中form标签的作用style,HTML5中meta常用标签属性说明
HTML5中meta常用标签属性说明 IE 兼容模式,Bootstrap 不支持 IE 古老的兼容模式.为了让 IE 浏览器运行最新的渲染模式下,建议将此标签加入到你的页面中: content属性 ...
HTML入门之常用标签以及框架写法
body中的主要标签行内元素 a标签: 超链接标签,双标签. 常用标签属性: ①href:指定打开的页面. ②target:用于指定在哪个窗口打开href标签属性指定的页面,常用属性值有_self ...
html5简介及常用标签
HTML介绍 Web服务本质 # python自制服务器socket通信端import socketsk = socket.socket() sk.bind(("127.0.0.1" ...
HTML5基础之常用标签以及标签选择器
在html中,标签非常多,比如说列表,按钮,图片,文字等等,每一种标签都有自己的使用方法以及相关的约束条件.具体的标签可以直接到w3c的网站上查看,这里就简单了解一下html5的标签. 一.HTML5 ...
JavaWeb新手入门——HTML常用标签
1. HTML的书写规范 <html> <head><title>test-2021-1-8</title> </head> <bod ...
华为云前端一阶段HTML入门（常用标签表格标签表单）
HTML入门 HTML入门 1.1结构标签 div是块标签,包裹一定区域中的元素,会独自占一行,可以嵌套使用形成父子级关系以及兄弟级关系: span是会在一行中不断加入(内联标签),但当数量过多时也会 ...
JavaWeb之HTML入门及常用标签
HTML: 1.HTML的概述及作用: HTML全称为HyperText Markup Language,译为超文本标记语言,不是一种编程语言,是一种描述性的标记语言,用于描述超文本中内容的显示方式. ...
HTML5 入门之 img标签
前言网页显示图片信息参考视频: 1.黑马程序员5天软件测试从入门到精通_软件测试基础教程 1.HTML属性 html 当中的属性是以一种键值对的形式出现的,他有自己的书写格式. 属性名称=&quo ...
html5基础知识点常用标签
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

HTML5入门以及常用标签

HTML5入门以及常用标签

今日内容

web技术简介

web技术中的三大内容

什么是HTML

W3C

W3C 是如何创建的？

浏览器

常用浏览器

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

上网三大组成部分

第一个HTML网页

HTML5常用标签

什么是标签

标签的分类

如何学习HTML5

常用标签逐一讲解

HTML5入门以及常用标签相关推荐

最新文章

热门文章