HTML + CSS3 基础入门与进阶
2024-05-23 03:14:48
HTML + CSS3 基础入门与进阶
- 简介
- 1、前端三层
- 2、IDE简介
- 3、网页实时热更新
- 4、项目开发流程
- 一、HTML 入门与进阶
- 1、HTML 语法与基础标签
- （1）HTML5基础入门
- （2）HTML5的基本标签
- 2、div 标签
- 3、列表标签
- （1）无序列表（<ul>）
- （2）列表嵌套
- （3）有序列表（<ol>）
- （3）定义列表（<dl>）
- 4、多媒体与语义化标签
- （1）图片标签
- （2）相对路径与绝对路径
- （3）超链接标签
- （4）音频和视频
- （5）大纲标签（HTML5 区块标签）
- （6）语义化标签（span标签）
- 5、表单标签
- （1）表单的创建
- （2）基本控件
- （3）HTML5中新增的表单控件
- 6、表格标签
- （1）表格标签（<table>、<tr>和<td>）
- （2）单元格合并
- 二、CSS 入门与进阶
- 1、CSS 基础入门
- （1）CSS3简介
- （2）CSS 的书写位置
- （3）CSS 的基本语法
- （4）CSS 书写顺序
- 2、CSS 选择器
- （1）标签选择器
- （2）id 选择器
- （3）class 选择器
- （4）复合选择器
- （5）伪类
- （6）元素关系选择器
- （7）序号选择器
- （8）属性选择器
- （9）CSS3 新增的伪类
- （10）伪元素
- （11）层叠性和选择器权重计算
- 3、文本与字体属性
- （1）常用文本样式属性
- （2）常用字体属性
- （3）段落和行相关属性
- （4）继承性
- 4、CSS 盒模型
- （1）认识盒模型
- （2）padding(内边距) 属性
- （3）边框(border)与圆角
- （4）margin(外边距) 属性
- （5）box-sizing 属性
- （6）display 属性
- （7）元素的隐藏
- 5、CSS 浮动与定位
- （1）浮动的基本概念
- （2）使用浮动实现布局的注意事项
- （3）BFC 规范和浏览器差异
- （4）清除浮动
- （5）相对定位
- （6）绝对定位
- （7）固定定位
- 6、flex 布局
- （1）flex 的基本概念
- （2）容器属性
- （3）项目属性
- 7、CSS 背景与渐变
- （1）background-color 属性
- （2）background-image 属性
- （3）background-repeat 属性
- （4）background-size 属性
- （5）background-clip 属性
- （6）background-attachment 属性
- （7）background-position 属性
- （8）CSS 精灵
- （9）线性渐变
- （10）径向渐变
- （11）浏览器私有前缀
- 8、2D 变形 与 3D 旋转
- 9、过渡与动画
- （1）过渡
- （2）动画
- 10、CSS 样式补充
- （1）超出文本框的样式替换
- （2）使用三个盒子制作向下小箭头
- （3）使用 border 制作倒三角形
- （4）首页轮播图
- （5）返回顶部
- （6）img 标签清除边框和底部边距
- （7）修改原生滚动条样式
- 总结
简介
1、前端三层
| 语言 | 功能 | |
|---|---|---|
| 结构层 | HTML | 搭建结构、放置部件、描述语义 |
| 样式层 | CSS | 美化页面、实现布局 |
| 行为层 | JavaScript | 实现交互效果、数据收发、表单验证等 |
2、IDE简介
- IDE（Integrated Development Environment，集成开发环境）是含代码编辑、关键字高亮、智能提示、智能纠错、格式美化等功能于一身的“高级代码编辑器”
- Visual Studio Code 简称 VS Code，来自微软公司
- 优点：内置功能非常丰富、插件全且安装简单、轻量、有MAC版本
- VS Code 下载：https://code.visualstudio.com/
- VS Code 中文配置：在插件中心搜索 Chinese，安装插件即可
- VS Code 颜色主题：在Code->首选项->颜色主题，将主题改为：浅色 + (默认浅色)
- VS Code 集成 Sublime 的快捷键：在插件中心搜索 Sublime，安装插件即可
- 多行编辑：按住鼠标滚轮，然后下拉，即可进行多行编辑
- VS Code 安装 Live Server 插件，这个插件可以让“实时热更新”网页，自动刷新网页
3、网页实时热更新
- VS Code 安装 Live Server 插件，这个插件可以让“实时热更新”网页，自动刷新网页
- 安装完插件后，在 html 文件中，按 command + shift + p 键，选择 “Open with Live Service”即可
- 使用这种方法必须注意：网页必须存放在文件夹中，并且 VSCode已经打开这个文件夹
4、项目开发流程
- 产品经理：提出需求，画出原型图
- 设计师（UI/UE）：制作出精确的设计图
- 前端开发工程师：根据设计图做出网页，渲染数据
- 后端开发工程师：实现业务逻辑
- 运维工程师：
- …
前端工程师：
- 曾经一段时间，前端工程师要 使用PS和FW对设计图进行测量
- 现在测量原型图，设计师使用 Axure 或者 Sketch 等软件，可以直接给我们 “直观标注”的原型图/设计图
一、HTML 入门与进阶
1、HTML 语法与基础标签
（1）HTML5基础入门
HTML 骨架的生成：
- 输入 !（英文状态下的感叹号），按 tab 键，即可自动生成 HTML5 的骨架
- 如果没有生成，说明没有将网页保存，或者网页保存的格式不是 .html 后缀
认识 HTML5 骨架：
- 文档类型声明DTD：HTML 文件第一行必须是 DTD（Document Type Definition，文档类型声明）；不写DTD会引发浏览器的一些兼容问题
- < html >标签对：lang属性表示网页的语言，zh表示中文，en表示英文
- < head >标签对：是网页的配置，不要认为是网页的头部
- < body >标签对：里面书写网页的内容，包括网页的头部、主要内容、页脚等各个部分
- < title > 标签：用来设置网页的标题，文字会显示在浏览器的标签栏上；title也是搜索引擎收录网站时显示的标题，为了吸引用户点击，合理设置title是必要的
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>hello world!<q>sssss</q>
</body>
</html>
字符集设置：
- 一般设置为 UTF-8 或者 GBK
<meta charset="UTF-8">
- 无论使用哪种字符集，一定要在编辑器中将文件页设置为相同字符集，否则会出现乱码，然后更改 meta 标签中 charset 属性的值，即编辑器和网页设置的字符集要一致
- Live Server 插件不支持 gbk 字符集，只支持 UTF-8 字符集
网页关键词和页面描述：
- 合理设置网页的关键词和页面描述，是SEO的重要手段
- SEO（Search Engine Optimization，搜索引擎优化）利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名，让网站在搜索引擎的结果内占据领先地位，获得品牌收益
- 使用 meta 标签设置网页关键词和描述，name 属性非常关键，用来设置 meta 的具体功能
- 页面描述也是搜索引擎显示的简介词语
<meta name="Keywords" content="HTML，CSS，前端">
<meta name="Description" content="HTML+CSS 基础入门与进阶是适用学习前端开发人员的入门与进阶文章，它可以让初学者学习并了解前端三大技术之中的两种，称为一名前端开发人员。"
转义字符：
| 转义字符 | 意义 |
|---|---|
| < | 小于号 < |
| > | 大于号 > |
| | 空格（不会被折叠） |
| © | 版权符号© |
HTML 注释：
- 可以在编辑器中使用 ctr + / 键输入
<!-- 注释的内容 -->
空白折叠现象：
- 文字和文字之间的多个空格、换行会被折叠成一个空格
- 标签“内壁”和文字之间的空格会被忽略
（2）HTML5的基本标签
- HTML 叫做“超文本标记语言”，超文本标记就是标签
- 标签通常是成对出现的。标签可以给文字设置不同的语义
<p>hello world</p>
- 并非所有的标签都是成对的，而是只有起始标签，称为单标签
- 在 HTML4 代，单标签必须写一个结尾的反斜杠，HTML5不书写也可以
<br/>
<meta charset="UTF-8">
标题标签：
- h 系列标签表示“标题”语义，h 是 headline 的意思
- 搜索引擎非常看重< h1 > 标签的内容，应该将重点内容放到 < h1 > </ h1 >中，比如网页的 logo等
- < h1 >标签一般只能放置一个，否则会被搜索引擎视为作弊
| 标签 | 语义 |
|---|---|
| h1 | 一级标题 |
| h2 | 二级标题 |
| h3 | 三级标题 |
| h4 | 四级标题 |
| h5 | 五级标题 |
| h6 | 六级标题 |
段落标签：
- < p >标签表示段落标签，p 是英语 paragraph 的意思
- 任何段落都要放到< p> </ p>标签中，因为HTML中即使代码换行了，页面显示效果也不会换行，每个段落必须写到自己的 p 标签中
- < p>标签不能嵌套 h 系列标签和其它 P 标签
2、div 标签
- div 是英语 division “分隔”的缩写，顾名思义，< div></ div>标签对 用来将相关的内容组合到一起，以和其它内容分隔，使文档结构更清晰
- < div></ div> 是最常见的 HTML 标签，因为它可以结合 CSS 使用，实现网页的布局，这种布局形式叫做“DIV + CSS”
- div 标签像是一个容器，什么都可以容纳，因此工程师也习惯称呼 < div> 标签为“盒子”
- < div>标签可以添加 class 属性表示“类名”，类名服务于 CSS
CSS 常见类名如下：
| 区域 | 类名 |
|---|---|
| 页面头部 | header |
| logo | logo |
| 导航条 | nav |
| 横幅 | banner |
| 内容区域 | content |
| 页脚 | footer |
3、列表标签
（1）无序列表（<ul>）
- 无序列表使用 <ul> </ul> 标签，每个列表项都是 <li> </li> 标签
- ul 取至 unordered list（无序列表）
- li 取至 list item（列表项）
- 无序列表是一个父（ul）子（li）组合标签，不能单独出现
- HTML 规定，<ul>的子标签只能是<li>，绝对不能出现其它任何标签
- <li> 标签不能单独使用，它必须放到<ul>或者<ol>中使用
- <li> 标签是容器，内部可以放任何标签
<ul><li>苹果</li><li>香蕉</li><li>梨
HTML + CSS3 基础入门与进阶相关推荐
- 视频教程-Kali Linux渗透测试基础入门到进阶实战全程课-渗透测试
Kali Linux渗透测试基础入门到进阶实战全程课 本人有多年的服务器高级运维与开发经验,擅长计算机与服务器攻防及网络攻防技术!对网络安全领域有持续的关注和研究! 林晓炜 ¥499.00 立即订阅 ...
- CSS3基础入门03
目录 CSS3 基础入门03 线性渐变 径向渐变 重复渐变 CSS3 过渡 CSS3 2D CSS3 3D CSS3 动画 animate 动画库 CSS3 基础入门03 线性渐变 在css3当中,通 ...
- Linux零基础入门到进阶
在IT圈子里一直流传着这么一句话:身为程序员,一定要学Linux.播妞发现,很多小伙伴都听说过Linux,但却一知半解...... Linux是什么?Linux有必要学吗?学Linux有什作用?今天就 ...
- WEB安全零基础入门到进阶教程
关注我们公众号的粉丝很多都是我的读者,或多或少看过<WEB安全攻防:渗透测试实战指南>一书. 如果你已经完成了该书的阅读.进行过书中实验的实操,相信WEB安全渗透与防御已经初窥门径. 如果 ...
- CSS3基础入门02
目录 CSS3 基础入门02 边框相关属性 border-radius border-image box-shadow CSS3 弹性盒子模型 什么是弹性盒子模型 新旧版本的弹性盒子 相关概念 弹性容 ...
- C#-WPF基础入门和进阶系列课程1 运算符封装和案例
创建控制台项目,主函数中定义创建如下: 任何复杂的业务,都是在此基础上面去增加扩展出来的! 根基基础扎实了,变化的业务输出也才会是水到渠成的事情: 否则您仍然会寸步难行: #region 运算符封装基 ...
- 摊牌了，我靠它们成功实现了AI零基础入门到进阶！
随着科技的高速发展,人工智能正成为引领科技创新和产业发展的核心力量,人工智能产品与服务正在持续地渗透到人们的日常工作.生活.学习和社交等领域,也推动了各区域.各类型的科技企业和传统产业企业纷纷向人工智 ...
- Qt基础入门到进阶实战资料大全（纯干货，超详细，随时更新）
文章目录 1.简介 2.Qt官网 3.Qt开源社区 1)国内社区 a)CSDN 社区 b)Qter社区 c)QTCN开发网 2)国外社区 a)QT software b)Qt Center c)Dev ...
- HTML5+CSS3基础入门
HTML5 入门知识点 *HTML语言 1.超文本标记语言 2.不区分大小写,但是建议小写 3.浏览器在运行HTML时候,会将所有标签,转换成小写 4.html的标记(标签): (1)单标签 例如:& ...
最新文章
- 一次性打开计算机任意程序的脚本（C语言）
- 【C++】46.宏定义##连接符和符#的使用
- 深度探索C++ 对象模型(7)-Data member的布局(多重继承)
- 阿姨帮悬赏通缉，紧急扩散！
- 图论--一般带花树匹配
- 求逆元的两种方法+求逆元的O(n)递推算法
- 保护我方小学生！腾讯游戏全面启用防沉迷规则，每月充值金额有上限
- HighCharts控制不显示“上下文菜单”
- STM32工作笔记0025---理解并联电阻分流
- Hdu-6253 2017CCPC-Final K.Knightmare 规律
- R语言将两个矩阵数据进行相乘
- Windows XP几个版本的区分
- rabbit原理及项目应用
- 科目二考试全流程详解
- [zt] dmt、lmt、mssm, assm (SEGMENT SPACE MANAGEMENT AUTO) 的一点总结
- flowable报错FlowableTaskAlreadyClaimedException问题
- 玩转Openwrt（二） — 配合Android手机打造无线音乐播放器
- Proteus电路图绘制与CubeMX生成框架下填充Keil 5代码的联调仿真
- String中与获取相关的几个方法
- 自制像素无缝纹理平铺绘画工具
热门文章
- python123用户登录c_写代码： 实现用户输入用户名和密码，当用户名为seven且密码为123时，显示登录成功，否则登录失败。...
- 北大青鸟消防控制器组网_北大青鸟JBF-61S20防火门监控报警主机使用说明书
- ios开发遇到的memory持续上涨导致页面crash解决思路总结
- 【web自动化测试Robotframework开发手册—特殊元素】
- 10天学会PHP之PHP快速入门
- lattice fpga ddr3 读写控制
- 没有人能够一味地淡定，没有人能够一味地忍受
- 三星ARM Cortex-A8 S5PV210(蜂鸟)简介
- 什么是工业AGV导航读码器？用在什么地方？
- 技术平台分层体系-应用开发者看待容器技术带来的变化