万维网联盟（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怎样展示就怎么显示出来，适用场景：公式（数学、化学、物理）

实体字符：
&nbsp 空格； &lt（小于号<）； &gt（大于号>）; &amp（&）；&copy`（版权符号©）

在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概述及结构的更多相关文章

  1. web前端篇：CSS使用，样式表特征，选择器

    目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1 ...

  2. Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

    目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

  3. 1+x证书Web前端开发HTML+CSS专项练习测试题（八）

    1+x证书Web前端开发HTML+CSS专项练习测试题(八) 官方QQ群 1+x 证书 Web 前端开发 HTML+CSS 专项练习测试题(八) http://blog.zh66.club/index ...

  4. web前端-----第二弹CSS

    web前端之CSS样式 CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. ''' selector { property: value; property: value; ...

  5. web前端教程：CSS 布局十八般武艺都在这里了

      CSS布局 布局是CSS中一个重要部分,本文总结了CSS布局中的常用技巧,包括常用的水平居中.垂直居中方法,以及单列布局.多列布局的多种实现方式(包括传统的盒模型布局和比较新的flex布局实现), ...

  6. 4. web前端开发分享-css,js工具篇

    web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io, ...

  7. web前端开发分享-css,js工具篇

    web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io, ...

  8. [转] Web前端优化之 CSS篇

    原文链接: http://lunax.info/archives/3097.html Web 前端优化最佳实践第四部分面向 CSS.目前共计有 6 条实践规则.另请参见 Mozilla 开发者中心的文 ...

  9. Web前端基础(4):CSS(一)

    1. CSS介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 ...

随机推荐

  1. STL--priority_queue--自定义数据类型

    STL中priority_queue的声明模板有3个参数priority_queue<Type,Container,Functional>. 当使用的数据类型Type为自定义数据类型时有以 ...

  2. predixy源码学习

    Predixy是一个代理,代理本质上就是用来转发请求的.其主要功能就是接收客户端的请求,然后把客户端请求转发给redis服务端,在redis服务端处理完消息请求后,接收它的响应,并把这个响应返回给客户 ...

  3. java的Timer定时器任务

    在项目开发中,经常会遇到需要实现一些定时操作的任务,写过很多遍了,然而每次写的时候,总是会对一些细节有所遗忘,后来想想可能是没有总结的缘故,所以今天小编就打算总结一下可能会被遗忘的小点: 1. pub ...

  4. MySQL 子查询——查询最大值

    子查询指将一个查询语句嵌套在另一个查询语句中.子查询可以在 SELECT.UPDATE 和 DELETE 语句中使用,而且可以进行多层嵌套.在实际开发时,子查询经常出现在 WHERE 子句中.子查询在 ...

  5. 前端【JS】，深入理解原型和原型链

    对于原型和原型链,相信有很多伙伴都说的上来一些,但有具体讲不清楚.但面试的时候又经常会碰到面试官的死亡的追问,我们慢慢来梳理这方面的知识! 要理解原型和原型链的关系,我们首先需要了解几个概念:1.什么 ...

  6. jquery注册页面的判断及代码的优化

    今天主要负责完成注册页面的jquery代码的写入与优化,基本代码和登录页面差不多,复制修改一下代码就行了,主要区别在于多了一个重复密码与密码是否一致的判断,刚开始写出来的代码导致每个框的后面都追加重复 ...

  7. 一文教你快速搞懂 FOC ramp function 斜坡函数的作用和实现

    文章目录 定义 程序的实现 matlab 程序 C语言程序 定义 x(t)={0,t<0At,t≥0 x(t) = \begin{cases} 0,t<0\\ At,t \ge 0\\ \ ...

  8. JDBC08时间处理

    时间类型 java.util.Date 子类: -java.sql.Date无时分秒 -java.sql.Time -java.sql.Timestamp

  9. 在微服务框架Demo.MicroServer中添加SkyWalking+SkyApm-dotnet分布式链路追踪系统

    1.APM工具的选取 Apm监测工具很多,这里选用网上比较火的一款Skywalking. Skywalking是一个应用性能监控(APM)系统,Skywalking分为服务端Oap.管理界面UI.以及 ...

  10. python爬虫-直播吧

    概述 这是一个我很喜欢的小网站,想了解这个网站先从爬虫开始,爬取直播吧所有的栏目及内容,再存入数据库.先写个简单点的,后期再不断的优化下. 准备阶段 直播吧网址https://www.zhibo8.c ...