HTML基础之简介、结构、常见标签

文章目录

  • HTML简介
    • 常用浏览器及内核
    • Web标准
    • HTML、CSS、JavaScript的关系
  • HTML标签
    • 标签的结构
    • 标签的类型
    • 常用标签
      • 标题标签
      • 段落标签
      • 换行标签
      • 水平分割线标签
      • 字体标签
      • 文本格式化标签
      • 图像标签
      • 超链接标签
      • 特殊字符
      • 下标标签
      • 语义标签
      • 文本语义标签
      • 背景标签
      • 滚动标签

HTML简介

  • 超文本标记语言(Hyper Text Markup Language,简称HTML)是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。
  • HTML被用来结构化信息,也可用来在一定程度上描述文档的外观和语义。它是通向WEB技术世界的钥匙。
  • HTML是用来描述网页的一种语言。它不是一种编程语言,而是一种标记语言(markup language),标记语言是一套标记标签(markup tag),它使用标记标签来描述网页。

常用浏览器及内核

目前可称为五大浏览器四大内核
HTML基础之简介、结构、常见标签_第1张图片
内核(渲染引擎):负责读取网页内容,整理讯息,计算网页的显示方式并显示页面。

浏览器 内核 备注
IE Trident IE、猎豹安全、360极速浏览器、百度浏览器
firefox Gecko 火狐浏览器内核
Safari Webkit 苹果浏览器内核
chorme/Opera Blink chrome/opera浏览器内核 Blink是Webkit的分支

目前国内一般浏览器都会采用Webkit/Blink内核。如360、UC、QQ、搜狗等

Web标准

Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。
W3C(万维网联盟)是国际著名的标准化组织。
Web标准的构成:主要包括结构(HTML)、表现(CSS)和行为(JavaScript)。
最佳标准:结构、样式、行为相分离。分别写在HTML文件、CSS文件、JavaScript文件中

HTML、CSS、JavaScript的关系

  • HTML 用于构建网页结构,展示页面内容
  • CSS 用于美化网页,布局页面,设置网页元素
  • JavaScript 用于控制页面元素,与后端数据交互

HTML标签

标签的结构

:表示当前的html文件是html5的文档(html5的规范)
: lang表示开发语言
:charset表示使用的字符集,UTF-8支持中文
: 页面的根标签
:头部标签,页面的常规信息
:主体标签,页面的主体信息

标签的类型

  • 单表签:<标签名/>
  • 双标签:<标签名>

常用标签

标题标签

<hn>内容hn>    n的取值从1到6,数字越小字体越大,并且自动加粗、自动换行

段落标签

<p>内容p>   

换行标签

<br/>

水平分割线标签

<hr/> <hr color="颜色" size="粗细" width="宽度"/>

字体标签

<font size="字体大小" color="字体颜色" face="字形"> 内容 font>  

文本格式化标签

<b>内容b>  /  <strong>内容strong>(推荐)   字体加粗   
<i>内容i>  /  <em>内容em>(推荐)           斜体           
<u>内容u>  /  <ins>内容ins>(推荐)         下划线       
<s>内容s>  /  <del>内容del>(推荐)         删除线  

图像标签

<img src="图像名" alt="图像加载异常提示信息" width="宽度" height="宽度"/>

关于路径:

  • 绝对路径:从根目录开始的路径
  • 相对路径:从当前目录开始的路径

路径的使用:

  • ’ . /’ : 表示当前目录
  • ’ … /’ :表示当前目录的上一级目录

注意:

  • 反斜杠(’ \ ‘):在windows操作系统中以双反斜杠(’\’)作为路径分隔符
  • 斜杠(’ / '):是Linux操作系统下的路径分隔符

超链接标签

<a>a> 实现页面跳转

(1)文字超链接

<a href="URL(页面地址)" target="网页显示的位置"> 文字 a>

(2)图像超链接

<a href="URL(页面地址)" target="网页显示的位置">
		<img src="图像名称"/>
a>

特殊字符

    (1)空格: 
	(2)大于:>
	(3)小于:<
	(4)版权符号:©
	(5)注册符号:®
	(6)摄氏温度:°
	(7)乘号:×
	(8)除号:÷
	(9)平方上标:²
	(10)立方上标:³

下标标签

<sub>下标 sub>

语义标签

<thead>thead>  表格头部
<tbody>tbody>  表格主体 

文本语义标签

<mark>内容mark>     文本高亮显示
<cite>内容cite>     应用标签

背景标签

<body bgcolor="颜色值">       设置页面背景颜色
<body background="图像名">    设置背景图像

滚动标签

(1)图像滚动

<marquee behavior=" " direction=" ">
    <img src="图像路径" width=" " height=" ">
marquee>
  • direction属性表示滚动方向,取值有4个:left、right、up、down
  • behavior属性表示滚动的速度,数字越小速度越快

(2)文字滚动

<marquee behavior="" direction="">
   <font color="" size="" face="">滚动的文字font>
marquee>

你可能感兴趣的:(Web前端基础,html5,html)