前端HTML5+CSS3

1. 网页的组成
主要由图片，文字，超链接，音频，视频等

前端的代码是通过浏览器解析/渲染成用户看到的界面
3. 常见的五大浏览器
IE浏览器谷歌浏览器欧朋浏览器 Safira浏览器火狐浏览器
4. 渲染引擎（内核）- 专门对代码进行解析和渲染的部分

浏览器	内核
IE浏览器	Trident
火狐浏览器	Gecko
Safira	Webkit
欧朋浏览器/谷歌浏览器	Blink(属于webkit的分支)

备注：由于渲染引擎的不同，导致解析相同代码时的速度，性能，效果也不同

5. web标准
让不同的浏览器按照想听的标准显示结果，让展示效果统一化

6. web标准的构成
结构 HTML
样式 CSS
行为 JavaScript

7. HTML标签

标签名称	代码	常见属性
标题标签	h1-h6	\
段落标签	`<p>前端开发是创建WEB页面或APP等前端界面呈现给用户的过程</p>`	\
换行标签	`<br>`	\
水平线标签	`<hr>`	\
文本格式化标签	`<b>加粗</b><i>倾斜</i><u>下划线</u><s>删除线</s><br><strong>加粗</strong><em>倾斜</em><ins>下划线</ins><del>删除线</del>`	\
图片标签	`<img src = "路径" alt = "替换文本">`	title表示提示文本-鼠标悬停时显示；width/height表示设置图片高度
音频标签	`<audio src = "路径" controls></audio>`	autoplay表示自动播放（部分浏览器不支持);loop表示循环播放【目前只支持三种格式（MP3，mav，agg）】
视频标签	`<video src="material/video.mp4" controls></video>`	autoplay表示自动播放（部分浏览器不支持);loop表示循环播放【目前只支持三种格式（MP4，webM，ogg）】
超链接标签	`<a href="https://www.baidu.com">点击进入百度</a>`	target[_blank表示打开新的网页;_self表示在当前窗口打开]

8. 列表标签

应用场景
新闻列表；排行榜；账单等场景【按照行的方式，整齐显示内容】
无序列表

<ul><li>榴莲</li><li>香蕉</li><li>苹果</li><li>哈密瓜</li><li>火龙果</li></ul>

有序列表

<ol><li>小姐姐：100分</li><li>小帅哥：80分</li><li>小可爱：60分</li></ol>

自定义列表

<dl><dt>帮助中心</dt><dd>账户管理</dd><dd>购物指南</dd><dd>订单操作</dd>
</dl>

9.表格标签

表格的基本标签

标签名称	说明
table	标签整体，可用于包裹多个tr
tr	表格的每行
td	表格的每列

表格的相关属性

属性名称	属性值	效果
tborder	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

表格标题和表头单元格标签

标签名称	说明
caption	表格整体大标题
th	数字

表格的结构标签

标签名称	说明
thead	表格头部
tbody	表格主体
tfoot	表格的底部

合并单元格
跨行合并 rowspan
跨列合并 colspan
注意：只有同一个结构标签才可以进行合并

<table border="1px" width="300px" height="300px"><caption><h2>学生成绩单</h2></caption><thead><tr><th>姓名</th><th>成绩</th><th>评语</th></tr></thead><tbody><tr><td>小哥哥</td><td rowspan="2">100分</td><td>小哥哥真帅气</td></tr><tr><td>小姐姐</td><td>小姐姐真漂亮</td></tr></tbody><tfoot><tr><td>总结</td><td colspan="2">郎才女貌</td></tr></tfoot></table>

10.表单标签

input系列标签（根据属性type的值不同，展示的效果也不同）

标签名称	type属性	说明	属性名
input	text	文本框	placeholder(占位符号，提示用户输入内容的文本)
input	password	密码框	placeholder(占位符号，提示用户输入内容的文本)
input	radio	表单选框	name(一组的名字需要相同);checked(默认选中)
input	checkbox	多选框	checked(默认选中)
input	file	文件选择	multiple(多文件选择)
input	submit	提交	\
input	reset	重置	\
input	button	普通按钮	\

select下拉菜单标签

<select><option>上海</option><option>北京</option><option selected>广州</option> <!-- selected表示默认选中 --><option>深圳</option>
</select>

textarea文本域标签

<textarea cols="30" rows="10"></textarea>

label标签（用于绑定内容与表单标签之间的关系）
使用方法：
使用label包裹内容
在表单签上加上id属性
在label的for属性上设置对应的id属性值
11.css的引入方式
内嵌式
CSS写在style标签中

<!-- 内嵌式 --><style>p {color: red;}</style>

外联式
写在单独的css样式表中，通过link标签引入

<link rel="stylesheet" href="css引入方式.css">

p {color: red;
}

行内式
css写在style属性中

<body><p style="color: red;">我是一个段落标签</p>
</body>

12.基础选择器

标签选择器（通过标签名称，找到这类标签）
类选择器（class属性，类名可以重复）

<style>.red {color: red;}</style>
</head><body><p class="red">我是小红</p>
</body>

ID选择器（唯一的）

#green {color: green;}

通配符选择器

结构：*{属性名：属性值}

13.字体和文本样式

字体样式

字体大小：font-size（谷歌浏览器默认是16px）
字体粗细：font-weight: 700;（正常normal-400；加粗bold-700）
字体样式：font-style: italic;（表示文字倾斜）默认正常normal
常见的字体系列：无衬线字体-sans-serif;衬线字体-serif;等宽字体-monospace
字体系列样式：font-family: ‘楷体’;
连写：style weight size family

文本样式

文本缩进：text-indent: 1em;
文本水平居中：text-align: center;（center表示水平居中； left表示左对齐； right表示右对齐）
文本修饰： text-decoration: underline;（underline下划线;line-through删除线;overline上划线;none无装饰线）

14.选择器进阶

后代选择器(选择父元素后代中满足条件的元素)
选择器1 选择器2{css}
子代选择器(选择父类元素中子代中满足条件的元素)
选择器1 > 选择器2{css}
并集选择器
选择器1，选择器2{css}
交集选择器
选择器1选择器2{css}
15.背景相关属性
背景颜色（background-color: rgba(234, 214, 98, .3);）
背景图片（background-image: url(…/案例/images/balanceCar.jpg);）
背景平铺（background-repeat: repeat-x;）
repeat-x 水平方向平铺 repeat-y 垂直方向平铺 no-repeat 不平铺
背景位置
background-position: 水平方向的位置垂直方向的位置;
背景相关属性连写
background: rgba(234, 214, 98, .3) url(…/案例/images/balanceCar.jpg) no-repeat center center;
16.盒子模型
盒子模型包括四个部分：
内容区域（content）内边距（padding）边框（border）外边距（margin）
16.清除浮动的方法
直接设置父元素高度
额外标签法
在父元素内容的最后添加一个块级元素并设置clear：both
单伪元素清除法
基本写法：

.clearfix::after {content: '';display: block;clear: both;
}

补充写法：

.clearfix::after {content: '';display: block;clear: both;/* 补充写法：在网页中看不到伪元素 */height: 0;visibility: hidden;
}

给父元素设置overflow：hidden

前端HTML5+CSS3相关推荐

尚硅谷新版Web前端HTML5+CSS3知识点集合篇【p1-p8】
尚硅谷新版Web前端HTML5+CSS3知识点集合笔记篇尚硅谷新版Web前端HTML5+CSS3全套基础教程完整版(初学者零基础入门) p1(22:55) 一.软件的分类: 1.系统软件 -wind ...
python 50 前端 html5 css3
1 # 前端 2 3 接下来我们进入前端知识的学习,前端的学习目的就是为我们开发的应用程序提供一个与用户进行交互的界面,前端分为HTML5.CSS3.JavaScript三大部分,我们学习内容共分 ...
前端HTML5+CSS3静态页面开发-京东首页
前端html5+css3静态页面开发-京东首页项目介绍 (1)京东首页项目由html + css 布局完成页面,对前端基础知识的入门及掌握有非常好的提升效果,本项目旨在教授HTML和CSS的基础知识 ...
前端HTML5+CSS3静态页面开发-博文尚美
前端html5+css3静态页面开发-博文尚美项目介绍博文尚美是一个设计网站, 此项目由html + css 布局完成页面,对前端基础知识的入门及掌握有非常好的提升效果,对html和css的使用及 ...
前端 html5 css3 框架,UI,分享,CSS3,HTML5,前端框架
随着HTML5和CSS3以及网页设计布局的全面翻新创新改革.让很多网页设计者和界面设计师都知道一个道理.就是去掌握一套对应的工具包.这不仅仅是未来提高工作的效率,还能更好的去处理网页整体视觉效果.界面 ...
前端HTML5+CSS3学习笔记
HTML5+CSS3学习笔记 ==CSS第一天== 一.css简介二.css语法规范三.css代码风格四.css选择器的作用五.css基础选择器 1.标签选择器: 2.类选择器 3.多类名选择 ...
Web前端html5+css3前端开发入门学习笔记
文章目录前言 HTML 认识HTML 1. 网页组成和本质 2.了解浏览器 3.web标准 4.HTML感知 5.HTML骨架 6.编译软件vscode的简介和使用 7.注释 8.标签组成和关系 9 ...
css3宽度变大动画_学所前端 | HTML5+CSS3
HTML5 &CSS3 2020/09/5 啥?!HTML5是什么? "HTML5"和"HTML"有什么区别? 新增的HTML5特性有多好用? HTML ...
最最详细的黑马前端HTML5+CSS3笔记，给大家整理好了
基于黑马前端视频学习的CSS3笔记,每一天的知识点都放在一起,方便学习查阅 ==CSS第一天== 一.css简介二.css语法规范三.css代码风格四.css选择器的作用五.css基础选择器 ...
web前端html5+css3学习笔记(3)——标签
目录一.排版标签 1.标题标签 2.段落标签二.语义标签三.块级元素和行内元素 1.块级元素 2.行内元素四.文本标签 1.常用文本标签 2.不常用文本标签五.图片标签六.相对路径与绝对路 ...

前端HTML5+CSS3

前端HTML5+CSS3相关推荐

最新文章

热门文章