Web前端开发|HTML&CSS是什么?_惠州前端培训学校
作者:hz_admin01发布时间:2022-04-10分类:前端开发专业浏览:537
Web前端开发|HTML&CSS是什么?最近惠州北大青鸟很多学员都在问这个问题,那么下面惠州北大青鸟学术部老师给大家解答一下这个问题。
01、HTML概述全称:HyperText Markup Language(超文本标记语言),定义页面内容结构,该语言书写的代码通常会被浏览器解析执行。
HyperText(超文本):不仅包括文本,还可以包括图片、链接、音乐、视频等非文本元素
Markup Language(标记语言):是一套标记标签,html使用标记标签来描述网页
02、HTML文档结构
<!DOCTYPE html>文档声明定义:它既不是元素,也不是注释,写在html代码的第一行;用来解析元素,通知浏览器使用哪一个html版本
<html> html元素(又叫根标记),是所有其他元素的祖先元素,最顶层
<head>文档头,它是html元素的第一个子元素,可以嵌套其他元素;里面的内容不会在页面上显示
<meta charset="UTF-8">空元素,解析文本
<meta ame="viewport" content="width=device-width, initial-scale=1.0"> SEO搜索引擎优化
<title>标题,显示在浏览器的标题栏上
<body>文档体:网页中的所有可见内容都放在里面
快捷键:在html中输入!按回车出现基本框架
添加注释快捷键(Htm/CSs/JS都是):ctrl + ?
<!--注释内容-->用于描述代码功能,浏览器解析HTML代码时会忽略注释内容
03、元素的层级结构
一个元素的内容中可以包含其他元素形成嵌套的层次结构,但两个元素之间不能相互嵌套
若A直接或间接包含B,则A为B的父元素(祖先元素),B为A的子元素(后代元素)。
若两个/多个元素有同一个父元素,他们互为兄弟
HTML中的所有内容结构,都是靠元素组织到页面中的;标记名、属性、元素内容共同决定了一个元素的显示内容和行为。
一个元素包括:起始标签+元素内容+结束标签------<h3>基础班</h3>
属性:表示元素的额外信息-----<a href="跳转地址">立即加入</a>
空元素(自闭合元素、单标签)-----<img src="图片地址">
04、相对路径&绝对路径
相对路径只能用于访问站内资源(./路径)
./表示当前资源所在的目录,必须作为相对路径的开始,可省略
../表示返回上一级目录
绝对路径:协议://域名/目录(例:http://www.google.com)
访问站外资源,只能使用绝对路径,访问站内资源,使用绝对路径可以不要协议和域名
05、HTML的常用标签语义化标签(块级元素block):
<header>表示页面或某个区域的头部<nav>表示导航栏<aside>表示跟周围主题相关的附加信息(广告、目录、相关信息)<article>表示文章或其他可独立页面存在的内容<section>表示一个整体的一部分主题<footer>表示页面或某个区域的底部
文本类标签(行内元素inline):
<p>不能包含的内容:h1-h6、p
<q>小段文本引用,自带前后双引号,适用于名人名言
<blockquote>大段引用,会有相应的缩进,适用于古诗词
<abbr>对缩写词的引用鼠标放上去会显示title里的内容,适用于专业术语和名词解释
<cite>对参考文献的引用,文本以斜体展示
<i>区别对待的文本
<em>强调的文本
<strong>重要的文本
<b>应突出显示的文本
<del>给当前文本添加删除线
<ins>给当前文本添加下划线
超链接:<a href="跳转地址">
1、跳转到另一个页面
2、锚点:可以在同一个页面进行跳转
3、功能链接(发邮件:mailto;打电话:Tel)
4、跳转页面打开方式:target="_blank"(打开新页面) _self(默认值,当前页面)
无语义元素:
<div>划分一块区域
<span>给一小段文本添加样式
<br>空元素,用于在页面中换行
<hr>分割线
<pre>预格式化元素,在html怎样展示就怎么显示出来,适用场景:公式(数学、化学、物理)
实体字符:
 空格;<(小于号<);>(大于号>);&(&);©(版权符号)
在html中输入一个或多个空格(回车)都会以一个空格展示
SHAPE\* MERGEFORMAT06、CSS概述
全称:Cascading Style Sheets(层叠样式表),定义html文档的样式;
是页面表现的基础,可以控制布局,控制元素的渲染。
07、如何引用CSS样式?
——外部样式表(link在html的head中)
<link rel="stylesheet" href="css地址"><--功能与特点:复用、维护-->
——内部样式表(style在html的head中)
<style type="text/css">css代码</css><--测试用-->
——行内样式表(写在开始标记里)
<h3 style="css代码">标题</h3>
08、CSS规则:选择器{声明块}
选择器:选中某一些元素;
声明块(属性名:属性值;):对元素添加样式,由一条一条声明组成
若写好一条规则,即选中某些元素并对其添加样式
h1{text-align:center;}
/*注释内容:用于描述代码功能,浏览器解析时会忽略*/
09、CSS样式没有实现的原因?
1.没有引用CSS文件;2.选择器(不存在的内容);3.规则(样式)写错;4.声明冲突
想了解更多关于前端的资讯,可以来惠州北大青鸟新方舟校区了解一下。
标签:惠州前端培训学校惠州前端基础惠州前端培训北大青鸟IT计算机学校北大青鸟IT软件学校前端北大青鸟IT学校惠州北大青鸟北大青鸟
- 前端开发专业排行
- 标签列表
-
- Java (3694)
- 北大青鸟 (3713)
- 软件开发 (3613)
- JAVA (3413)
- UI设计入门 (2093)
- 惠州北大青鸟 (4375)
- 惠州IT培训 (2558)
- UI设计培训 (2090)
- 惠州UI设计培训 (2095)
- 惠州UI设计培训学校 (2090)
- 惠州计算机软件培训 (6260)
- 惠州计算件软件开发 (6260)
- 惠州计算机软件基础 (6261)
- 惠州计算机JAVA培训 (3574)
- 惠州计算机Java软件开发 (3620)
- 惠州计算机JAVA软件开发 (4645)
- 惠州计算机JAVA软件开发学校 (3338)
- 惠州计算机Java软件开发培训 (3338)
- 北大青鸟IT计算机学校 (5048)
- 北大青鸟IT软件学校 (5062)
- 北大青鸟IT学校 (5059)
- 惠州计算机UI设计软件开发 (2088)
- UI设计基础教程 (2088)
- UI设计是什么 (2088)
- UI设计教程 (2088)
- 网站分类
-
- 计算机教程
- 计算机入门
- 职业学校
- 新闻动态
- 专业课程
- 热门技术
- SEO
- 培训教程
- windows
- linux教程
- 系统集成
- 网站开发
- Html5
- 办公软件
- 师资力量
- 热点问答
- 联系我们
- 计算机学校
- 惠州计算机学校
- 河源计算机学校
- 广州计算机学校
- 深圳计算机学校
- 湛江计算机学校
- 佛山计算机学校
- IT计算机培训信息
- 设计专业
- UI
- 影视特效
- 游戏动漫设计
- Photoshop
- AI设计
- 软件教程
- Java技术
- C语言/C++语言培训
- C#
- Python技术
- PHP
- 数据库
- SQL Server
- 网络教程
- 网络安全
- 网络营销
- 软件专业
- 大数据专业
- 前端开发专业
- 软件测试专业
- Python专业
- 软件实施
- 珠海计算机学校
- 初中生学什么好
- 计算机认证
- 文章归档
-
- 2024年10月 (32)
- 2024年9月 (29)
- 2024年8月 (68)
- 2024年7月 (59)
- 2024年6月 (43)
- 2024年5月 (48)
- 2024年4月 (80)
- 2024年3月 (65)
- 2024年2月 (54)
- 2024年1月 (25)
- 2023年12月 (12)
- 2023年11月 (73)
- 2023年10月 (134)
- 2023年9月 (34)
- 2023年8月 (3)
- 2023年7月 (3)
- 2023年6月 (12)
- 2023年5月 (30)
- 2023年4月 (72)
- 2023年3月 (11)
- 2023年2月 (34)
- 2023年1月 (37)
- 2022年12月 (78)
- 2022年11月 (359)
- 2022年6月 (1193)
- 2022年5月 (570)
- 2022年4月 (1567)
- 2022年3月 (982)
- 2022年2月 (54)
- 2022年1月 (182)
- 2021年9月 (308)
- 2021年8月 (1704)
- 2021年7月 (2423)
- 2021年6月 (1806)
- 2021年5月 (1569)
- 2021年4月 (1380)
- 2021年3月 (1255)
- 2021年2月 (709)
- 2021年1月 (1521)
- 2020年12月 (3626)
- 2020年11月 (1646)
- 2020年10月 (1046)
- 2020年9月 (592)
- 最近发表
-
- 江门信息:伪造健在证明材料骗取工伤保险待遇真刑!|||计算机软件培训学校
- 汕头信息:深化组团挂联汕头这场义诊助力百千万工程|||大学生计算机培训学校
- 东莞信息:石龙石龙人社分局持续举办南粤家政技能培训班|||广州计算机编程培训
- 东莞信息:虎门虎门镇首个人才交流服务中心揭牌成立|||计算机职业技能培训班
- 中山信息:中山市人社局持续开展讲诚信不欠薪根治欠薪法治宣传活动|||计算机培训机构
- 东莞信息:南城南城街道开展职业技能展示活动|||计算机网络培训学校
- 东莞信息:东莞市金秋招聘月就业服务行动招聘会暨东莞市第三届全国个体工商户服务月活动|||计算机专业维修学校
- 茂名信息:来宾市人社局赴我市开展劳务协作交流活动|||电脑计算机编程培训学校
- 汕头信息:家政高手同台比武!汕头市举办2024年南粤家政职业技能大赛|||广州市北大青鸟计算机职业培训学校
- 东莞信息:莞城街道金秋招聘月暨重点群体招聘会活动|||广州计算机软件培训