web前端开发html5+css3学习笔记day1
软件分类：
系统软件：windows、linux、macOS等
应用软件：office、QQ等
游戏软件：王者荣耀、QQ飞车等
客户端与服务器
·通常情况下，软件由两部分组成：
----客户端：用户通过客户端来使用软件（用户可以看见的部分）
-----服务器：服务器负责在远程处理业务逻辑（在后台，用户看不见）
服务器
服务器的开发语言：
-Java（常用）
-PHP
-c#
-Python
-node.js
·······
客户端
·客户端的形式
----文字客户端
·古老的方式：通过命令行来使用软件
-----图形化界面（C/S）（开发成本高）
·通过点击拖动等来使用软件。windows、macOS、Android、iOS中大部分应用。
-----网页
·通过访问网页来使用软件。所有网站都属于这个范畴。（B/S构架）
网页的特点
·相较于传统的图形化界面，网页具有以下优点：
-----不需要安装
------不需要更新
-------跨平台
·网页中使用的语言：
------HTML、CSS、JavaScript
历史
·蒂姆·伯纳斯----李爵士万维网的发明人。
·1991年8月6日，世界上第一个服务器和第一个网站在欧洲核子研究中心上线。
·第一个网站：
——http：//info.ch/hypertext/www/Theproject.html
浏览器和网页
·有了浏览器我们只需要一个网址便可以访问任何网站。
·而浏览器中所显示的内容正是我们所说的网页。
·网页原本的样子
·浏览器渲染后的样子：
·前端工程师负责编写网页源代码。
·浏览器负责将网页渲染成我们想要的样子。
浏览器的问题
·市面上存在很多不同的浏览器。
·在万维网的初期，网页编写并没有标准。
·于是就出现了这种情况：（不同浏览器表现出的结果差异比较大）
W3C的建立
·伯纳斯李1994年建立万维网联盟（W3C）
·W3C的出现为了制定网页开发标准，以使同一个网页在不同浏览器中有相同的效果。
·所以，我们需要制定我们编写的网页都需要遵循W3C的规范！
网页的结构
根据W3C标准，一个网页有三部分组成：结构、表现和行为。
| W3C标准 | ||
| 结构 | 表现 | 行为 |
| HTML | CSS | JavaScript |
结构、表现、行为
*结构 HTML用于描述页面的结构（人的骨架）
*表现 CSS用于控制页面中元素的样式（人的皮肤，外貌）
*行为 JavaScript用于响应用户操作（人动起来）
HTML
·HTML（hypertext Markup Language）超文本标记语言。
·它负责网页的三个要素之中的结构。
·HTML使用标签的形式来标识网页中的不同组成部分。
·所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面。
编写第一个网页
添加局部标签（标签成对存在）
添加相对完整标签
自结束标签与注释<h1></h1>
标签的属性
文档申明<!doctype html>
· 进制
·字符编码：
文档的使用
·zeal.exe离线手册安装。·网页W3school.
·网页结构的复习
vscode
1.vscode的安装.
2.插件的安装：chinese，主题ayu，
方便之处：
直接输入代码，enter后自动补充<>.
“ ！+table键”：自动生成结构代码。
3.将一个目录作为项目目录打开
4.创建一个新网页
代码解析：
< html lang=“en”>：英文模式
< html lang=“zh”>：中文模式
5.配置live server：代码页面单击右键：open live server
6.通过live server运行网页
7.设置代码自动保存。
实体：
·在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格
·在html中有时候，不能直接书写一些特殊 符号
比如：多个连续的空格，比如字母两侧的大于小于号
·如果我们需要在网页中书写特殊符号，则需要使用html中的实体（转义字符）
· &实体的名字；
 ；空格
>；大于号
<；小于号
©版权符号
·meta标签
meta主要用于设置网页中的一些元数据，元数据不是给用户看
charset指定网页的字符集
name指定的数据的名称
content指定的数据的内容
keywords表示网站的关键字，可以同时指定多个关键字，关键字使用,隔开
<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆, 个护,食品,生鲜,京东"/>
description用于指定网站的描述
网站的描述会显示在搜索引擎的搜索结果中。
<meta name="description"content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、 母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。"/>
title标签的内容会作为搜索结果的超链接上的文字显示。
<meta http-equiv="refresh" content="3;url=http://www.baidu.com">
·语义化标签1
在网页中html专门用来负责网页的结构，所以在使用html标签时，应该关注的是标签的语义，而不是他的样式
标题标签：
· h1~h6 一共六级标题
从h1~h6重要性递减，h1最重要，h6最不重要
·h1在网页中的重要性仅次于title标签，一般情况下一个页面只会有一个h1
··一般情况下标题标签只会用到h1~h3，h4~h6很少用
·标题标签都是块元素
在页面中独占一行的元素称为块元素（block element）
· hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup
·p标签表示页面中的一个段落，p也是一个块元素
·
·em标签用于表示语音语调的一个加重
· 行内元素：（inline element）在页面中不会独占一行的元素
·strong表示强调，重要内容！
·blockquote 表示一个长引用，块元素
q元素表示一个短引用，行内元素。
br标签表示页面中的换行
·语义化标签2
块元素（block element）
在网页中一般通过块元素来对页面进行布局。
行内元素（inline element）
行内元素主要用来包裹文字
一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
p元素中不能放任何块元素
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
比如：
·标签写在根元素的外部
·p元素中嵌套了块元素
·根元素中出现了除head和body之外的元素
·布局标签（结构化语义标签）：
显示没区别，仅语义不同
header表示网页的头部
main表示网页的主体部分（一个页面中只有一个main）
footer表示网页的底部
nav表示网页中的导航
aside和主体相关的其他内容（侧边栏）
article表示一个独立的文章
section表示一个独立的区块， 上边的标签不能表示时使用。
div没有语义，表示一个区块， 目前div 还是主要的布局元素。
span行内元素，没有任何的语义，一般用于网页中选中文字。
·列表（list）
1.2.3.···
在html中也可以创建列表，一共有三种
1.有序列表
2.无序列表
3.定义列表
有序列表，使用ol标签来创建有序列表
无序列表，使用ul标签来创建无序列表（常用）
定义列表，使用dl标签来创建定义列表
使用dt来表示定义的内容
使用dd来对内容进行解释说明
列表之间可以互相嵌套
·超链接
超链接可以让我们从一个页面跳转到其他页面或者是当前页面 的其他位置。
·使用a标签来定义超链接
属性：href指定跳转的目标路径。
.超链接是一个行内元素，在a标签中可以嵌套除他自身以外的任何元素
<a href="http://www.baidu.com">超链接</a><br><a href="liebiao.html">超链接</a>
web前端开发html5+css3学习笔记day1相关推荐
- 前端HTML5+CSS3学习笔记
HTML5+CSS3学习笔记 ==CSS第一天== 一.css简介 二.css语法规范 三.css代码风格 四.css选择器的作用 五.css基础选择器 1.标签选择器: 2.类选择器 3.多类名选择 ...
- 千峰HTML5+CSS3学习笔记
千峰HTML5+CSS3学习笔记 文章目录 千峰HTML5+CSS3学习笔记 写在前面 1. 前言 2. HTML 3. CSS 3.1 选择器 3.2 CSS属性 4. 盒子模型 4.1 溢出属性 ...
- 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记
<疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...
- Web前端开发基础三剑客学习知识分享
Web前端开发基础知识学习路线分享,前端开发入门学习三大基础:HTML.CSS.JavaScript.除此之外还要学习数据可视化.Vue.React.Angular相关框架,熟练运用框架提升开发效率, ...
- 学习web前端开发，需要学习什么？
如果要学习web前端开发,需要学习什么? 遇到很多新手,都会问,如果要学习web前端开发,需要学习什么?难不难?多久能入门?怎么能快速建一个网站?工资能拿到多少?还有些让我推荐一些培训机构什么的要去学 ...
- 前端 input怎么显示null_小猿圈WEB前端之HTML5+CSS3面试题（一）
学习是一件非常充实的过程,特别是把自己的乐趣变成工作的时候,很多朋友就喜欢学习web前端,所以学习前端,也希望从事前端的工作,但是因为缺少实战经验,所以很多都是卡在面试这关上,下面小猿圈总结了web前 ...
- HTML5+CSS3学习笔记（三）文档流和盒子模型【附练习：图片列表、左侧导航栏】
HTML5+CSS3学习笔记(三) 本系列更多文章,可以查看专栏 HTML+CSS学习笔记 文章目录 HTML5+CSS3学习笔记(三) 一.CSS布局 1. 文档流(块级元素.行内元素.行内块元素) ...
- 正则至少一个数字_好程序员web前端培训分享JavaScript学习笔记之正则
好程序员web前端培训分享JavaScript学习笔记之正则,正则表达式,又名 "规则表达式" 由我们自己来书写 "规则",专门用来检测 字符串 是否符合 &q ...
- react组件卸载调用的方法_好程序员web前端培训分享React学习笔记（三）
好程序员web前端培训分享React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处 ...
最新文章
- 解决yum安装报错Protected multilib versions
- 如何使用Laravel Debugbar?
- AJPFX关于代码块的总结
- linux系统账户口令管理
- 7-10 找最小的字符串 (15 分)
- git github配置
- C++中消息自动派发之一 About JSON
- layui 日期插件onchange事件失效的方法
- Linux：yum配置和使用
- read.table--R语言
- native2ascii的使用
- 为大众而写的程序员小说——从 简单易懂的现代魔法 说开去
- 钢铁侠c语言图片,揭秘！钢铁侠马克1型战衣原来使用了这个！
- 烟搭桥，酒开路？这届年轻人可能宁愿自断后路
- 网件路由器使用计算机mac,网件路由器怎么ip与mac绑定(2)
- 你的计算机由组织管理,某些设置由你的组织来管理
- 快速的绘制一幅可爱的柯基犬插图教程
- DisplayPort 端口
- react中副作用函数(useEffect)详解
- JVM进阶(一)：初识 JAVA 栈