Web前端:1、HTML&CSS概述及结构
万维网联盟(World Wide Web Consortium)简称W3C,专门为了定义网页相关的标准而成立,如网页中的HTML、CSS、DOM、HTTP、XML等标准。
根据W3C标准,一个网页主要由三部分组成:
(1)结构:HTML用于描述页面的结构
(2)表现:CSS用于控制页面中元素的样式
(3)行为:JavaScript用于响应用户操作
HTML概述
全称:HyperText Markup Language(超文本标记语言),定义页面内容结构,该语言书写的代码通常会被浏览器解析执行。
HyperText(超文本):不仅包括文本,还可以包括图片、链接、音乐、视频等非文本元素
Markup Language(标记语言):是一套标记标签,html使用标记标签来描述网页
1、HTML文档结构
<!DOCTYPE html>
文档声明定义:它既不是元素,也不是注释,写在html代码的第一行;用来解析元素,通知浏览器使用哪一个html版本
<html>
html元素(又叫根标记),是所有其他元素的祖先元素,最顶层
<head>
文档头,它是html元素的第一个子元素,可以嵌套其他元素;里面的内容不会在页面上显示
<meta charset="UTF-8">
空元素,解析文本
<meta name="viewport" content="width=device-width, initial-scale=1.0">
SEO搜索引擎优化
<title>
标题,显示在浏览器的标题栏上
<body>
文档体:网页中的所有可见内容都放在里面
<!DOCTYPE html><!-- 文档引用的规范,HTML5因为是"妥协式"的规范,所以不需要引用严格意义上的DTD规范 -->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
</head>
<body>
<p>Test Page</p>
</body>
</html>
快捷键:在html中输入 ! 按回车出现基本框架
添加注释快捷键(Htm/CSs/JS都是):ctrl + ?<!--注释内容-->
用于描述代码功能,浏览器解析HTML代码时会忽略注释内容
2、元素的层级结构
一个元素的内容中可以包含其他元素形成嵌套的层次结构,但两个元素之间不能相互嵌套
若A直接或间接包含B,则A为B的父元素(祖先元素),B为A的子元素(后代元素)。
若两个/多个元素有同一个父元素,他们互为兄弟
HTML中的所有内容结构,都是靠元素组织到页面中的;标记名、属性、元素内容共同决定了一个元素的显示内容和行为。
一个元素包括:起始标签+元素内容+结束标签 ------<h3>基础班</h3>
属性:表示元素的额外信息-----<a href="跳转地址">立即加入</a>
空元素(自闭合元素、单标签)-----<img src="图片地址">
3、相对路径&绝对路径
相对路径只能用于访问站内资源(./路径)./
表示当前资源所在的目录,必须作为相对路径的开始,可省略../
表示返回上一级目录
绝对路径:协议://域名/目录(例:http://www.google.com)
访问站外资源,只能使用绝对路径,访问站内资源,使用绝对路劲可以不要协议和域名
4、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中输入一个或多个空格(回车)都会以一个空格展示
CSS概述
全称Cascading Style Sheets(层叠样式表),定义html文档的样式;是页面表现的基础,可以控制布局,控制元素的渲染。
1、如何引用CSS样式?
- 外部样式表(link在html的head中)
<link rel="stylesheet" href="css地址"><--功能与特点:复用、维护-->
- 内部样式表(style在html的head中)
<style type="text/css">css代码</css><--测试用-->
- 行内样式表(写在开始标记里)
<h3 style="css代码">标题</h3>
2、CSS规则:选择器{声明块}
选择器:选中某一些元素;
声明块(属性名:属性值;):对元素添加样式,由一条一条声明组成
若写好一条规则,即选中某些元素并对其添加样式
h1{text-align:center;}
/* 注释内容:用于描述代码功能,浏览器解析时会忽略 */
3、CSS样式没有实现的原因?
1.没有引用CSS文件; 2.选择器(不存在的内容); 3.规则(样式)写错; 4.声明冲突
完。
更多资料请微信搜索公众号「 夜来妖风起」第一时间阅读。
Web前端:1、HTML&CSS概述及结构的更多相关文章
- web前端篇:CSS使用,样式表特征,选择器
目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1 ...
- Web前端篇:CSS常用格式化排版、盒模型、浮动、定位、背景边框属性
目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...
- 1+x证书Web前端开发HTML+CSS专项练习测试题(八)
1+x证书Web前端开发HTML+CSS专项练习测试题(八) 官方QQ群 1+x 证书 Web 前端开发 HTML+CSS 专项练习测试题(八) http://blog.zh66.club/index ...
- web前端-----第二弹CSS
web前端之CSS样式 CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. ''' selector { property: value; property: value; ...
- web前端教程:CSS 布局十八般武艺都在这里了
CSS布局 布局是CSS中一个重要部分,本文总结了CSS布局中的常用技巧,包括常用的水平居中.垂直居中方法,以及单列布局.多列布局的多种实现方式(包括传统的盒模型布局和比较新的flex布局实现), ...
- 4. web前端开发分享-css,js工具篇
web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io, ...
- web前端开发分享-css,js工具篇
web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io, ...
- [转] Web前端优化之 CSS篇
原文链接: http://lunax.info/archives/3097.html Web 前端优化最佳实践第四部分面向 CSS.目前共计有 6 条实践规则.另请参见 Mozilla 开发者中心的文 ...
- Web前端基础(4):CSS(一)
1. CSS介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 ...
随机推荐
- PPT模板素材
http://588ku.com/sucai/0-dnum-0-54-0-1/
- KAFKA官方教程笔记-introduction
为什么80%的码农都做不了架构师?>>> 介绍 apache kafka是一个分布式流式处理平台,一个流式平台该有的三个关键能力: 发布.订阅流式数据.从这个角度讲类似消息队列或 ...
- Codeforce-Ozon Tech Challenge 2020-B. Kuroni and Simple Strings(贪心)
B. Kuroni and Simple Strings time limit per test1 second memory limit per test256 megabytes inputsta ...
- Codeforces Round #623 (Div. 2, based on VK Cup 2019-2020 - Elimination Round, Engine) A Dead Pixel
讨论坏点的左右上下的矩形大小. #include <bits/stdc++.h> using namespace std; int main() { int t; cin >> ...
- 跟哥一起学python(3)- 理解“变量”
我们把前面的程序稍微改一下,来了解python中的变量. # file: ./4/4_1.py # 定义变量 hello_str = "hello, world!" # 字符串打印 ...
- 手把手教你使用ADB卸载手机内置App软件
[一.前言] 不知道你们有没有那么一段黑暗时期,刚买个手机,手机上内置一堆app,还卸载不掉,然后每天各种广告,手机一共1G的运行内存,那些流氓app还要再占走一些内存,真是让人欲哭无泪啊,后来我就学 ...
- Android | 带你零代码实现安卓扫码功能
目录 小序 背景介绍 前期准备 开始搬运 结语 小序 这是一篇纯新手教学,本人之前没有任何安卓开发经验(尴尬),本文也不涉及任何代码就可以使用一个扫码demo,华为scankit真是新手的福音-- ...
- 从一条数据说起——InnoDB存储数据结构
本篇博客参考掘金小册--MySQL 是怎样运行的:从根儿上理解 MySQL 先给大家讲一个故事,我刚参加工作,在一个小作坊里面当[码畜](尽管现在也是),有一天老板从我背后走过,说了一句举世震惊的话: ...
- Linux的vi和vim编辑器
Linux中分为:一般模式,插入模式和底行模式 一般模式(通过按iaoIAO键)-->插入模式 插入模式(按Esc键)--> 一般模式 一般模式(通过按:键)-->底行模式 底行模式 ...
- 网上流行护眼色的RGB值和颜色代码
网上流行护眼色的RGB值和颜色代码 绿豆沙色能有效的减轻长时间用电脑的用眼疲劳!色调:85,饱和度:123,亮度:205: RGB颜色红:199,绿:237,蓝:204:十六进制颜色:#C7EDC ...