HTML+CSS笔记整理（嵌入式学习）-CSDN博客

本文链接：https://blog.csdn.net/m0_69965956/article/details/142627659

一、学习嵌入式开发有必要学习了解HTML吗？

相信这是我和很多网友想提出的问题。嵌入式开发学习过程中，无法避免接触到网页开发。特别是在进行嵌入式Web开发时，对像HTML、CSS、JS等前端技术的了解是必要的。因为嵌入式系统通常需要通过Web界面与用户进行交互的，一个好的用户界面，能够明显提升用户的使用体验。

虽然硬件和软件的交互是嵌入式开发的核心，但是了解HTML、CSS、JS等前端基本技术对以后的工作能力和岗位提升是很有用的。

二、静态页面和动态页面所需技术区别

静态页面：HTML+CSS

动态页面：HTML+CSS+JS

三、静态页面制作的两个工具

3.1 Sublime Text3

优点：高亮显示、tab键自动补全、分屏编辑等

快捷键可以网上搜索下，此外Notepad++ DW等也可进行页面编辑

使用方法：

1.双击图标打开

2.ctrl+n新建

3.命名XXX.html保存

4.编写代码

5.ctrl+s保存，鼠标右键在浏览器打开

3.2 ps软件

所需使用工具：测量工具、吸管颜色工具、切图工具

测量工具-->矩形选框工具，F8选取单位（像素）

吸管工具-->吸取颜色

颜色的三种基本表示方式：

1.英文单词：red green blue white black

2.rgb(255,0,0) rgb(0,255,0) rgb(0,0,255) rgb(255,255,255) rgb(0,0,0,)黑色

3.十六进制：组成是0~9 a~f

#ff0000 #00ff00 #0000ff #ffffff #000000黑色

切图工具---在不破环大图的基础上，扣出一张小图

1.工具栏第五个工具，鼠标右键，选择“切片工具”

2.选中你想要的区域

3.窗口栏文件-->保存为web所用格式

4.点击存储

5.选择路径，对保存的切片进行如下图设置

四、HTML基本标签

HTML中使用标签来区分代码中的不同内容

标签的语法：

单标签：<标签名/>

双标签：<标签名> </标签名>

4.1 标题标签 h1- h6

特点：自动加粗，依次减小。h1是最大标题 h6是最小标题

语法：

单标签：<标签名属性="属性值" 属性="属性值" />

双标签：<标签名属性="属性值" 属性="属性值" > </标签名>

水平对齐方式属性：align 属性值是left center right 左对齐居中对齐右对齐

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h1 align="center">标题1</h1>
	<h2 align="left">标题2</h2>
	<h3 align="right">标题3</h3>
	<h4>标题4</h4>
	<h5>标题5</h5>
	<h6>标题6</h6>
</body>
</html>

4.2 描述性简单标签

换行 br
加粗 b
倾斜 i
下划线 u
删除线 s
文字 font

4.3 水平线标签 hr

属性： color 颜色
       width 宽度
             size 粗细、高度
               align 水平对齐【默认居中对齐】

4.4 段落标签 p

网页中部分字符是不识别的，需要使用转义字符。语法上以&开头，以;结尾。
          一个英文空格
        &ensp; 半个字空格
        &emsp; 一个字空格
        > 大于号 >
        < 小于号 <
        © 版权
        ® 注册
段落有水平对齐方式属性 align 【属性值是left right center】

4.5 图像标签img

src 路径【绝对路径和相对路径】
title 鼠标滑过时显示提示文字
border 边框
height 高度
width 宽度
alt 图片非正常加载时，显示提示文字

4.6 列表标签 ul ol dl

4.6.1 无序列表ul

        无序列表是一个整体，里面包含若干个列表项
                快捷键： ul > li{写文字内容} * 10
        可以使用type属性修改项目符号类型
                属性值有：disc默认实心圆 circle空心圆 square小方块 none无

4.6.2 有序列表ol

        有序列表是一个整体，里面包含若干个列表项
                快捷键： ol > li{文字内容} * 10
        可以使用type属性修改默认符号类型
                属性值有：1 默认值 a A i I
        可以使用start属性修改起始值
        可以使用reversed属性设置倒序

4.6.3 自定义列表dl

自定义列表多用于图文混排，包含两部分内容：dt定义项 dd描述项

快捷键： dl > dt + dd

4.7 超链接 a

        超链接（hyperlink）是Web页面中用于连接不同资源的一种机制。它允许用户点击文字或图片，从而跳转到另一个页面、文件、电子邮件地址或执行其他操作
链接源：文字、图片
        链接目标：网页、网址、文件、邮箱、应用程序exe、锚点、空链接【#】等等等
属性： 1. href 路径
             2. target 设置窗口打开方式 _self原窗口 _blank新窗口
快捷键：ul>li*10>a[#]{家用电器}*3
锚点链接：【跳转到当前页面任意位置】
        第一步：设置锚点 id属性设置属性名必须符合命名规范

第二步：跳转到锚点 #锚点名

4.8 表格标签table

        表格是一个整体，里面包含行tr 列 td 或者 th
        快捷键： table > tr*5 > td{内容}*4
        制作细线表格有这样几步：
                1. 给table设置width height bgcolor=red
                2. 给tr设置bgcolor=white 【tr的背景色覆盖掉 table的背景色】
                3. 给table设置 cellspacing = 1 【调整边框的粗细】
        部分属性：
                table【width height bgcolor background align border cellspacing cellpadding】
                tr【height bgcolor background align valign垂直对齐方式】
                td【width bgcolor background align valign colspan水平合并 rowspan垂直合并】
        colspan水平合并，--->
        rowspan垂直合并，↓
        合并的步骤：
        1.设置rowspan = 数字，合几为一，就等于几
        2.删除掉被合并的单元格

4.9 表单标签 form

表格：多行多列的参数，用于数据的展示。

表单：用于数据的手机，实现用户与服务器的交互。

表单是一个整体，里面包含若干项。

4.9.1 输入框 input

使用type属性，修改输入框的类型

        1.在radio单选框中，必须使用name设置同一组，才能实现单选
        2.在单选框radio和复选框CheckBox中使用checked设置初始选中
        3.在文本框密码框中使用 placeholder 设置模糊提示文字
        4.有三种按钮形式reset重置 submit提交 button普通

4.9.2 下拉列表 select

下拉列表select是一个整体，里面要包含选项option

4.9.3 文本域 textarea

        cols                  控制列数/宽度
        rows                 控制行数/高度
        maxlength 控制最大长度/限制字数

4.10 HTML5新增语义化标签

        eg:
                time 【时间日期】
                nav【导航】
                header【头部】
                footer【底部】
                main【主体】
                aside 【侧边栏】

五、CSS样式表

        网页组成 = HTML + CSS + JS
        HTML：超文本标记语言，控制网页的结构
        CSS：层叠样式表，控制网页的外观

/* CSS语法格式：*/
选择器{
    属性: 属性值;
    属性: 属性值;
}
1> CSS的注释是 /* */
2> 选择器——用于选择的工具
3> {}不能省略
4> 属性与属性值之间以:相邻，以;结尾【注意: ;都是英文的】

5.1 CSS基本选择器

全局选择器 *	*{color: red;} 选择所有标签，文字颜色为红色
标签选择器标签名	p{color: red;} 选择所有p标签，文字颜色为红色
class类选择器 .类名	.name_li{color: red;} 选择所有class名为name_li的标签，文字颜色为红色
id选择器 #id名	#tel{color:red;} 选择唯一的id名为tel的标签，文字颜色为红色
伪类选择器 :状态名	:link{} 初始状态 :visited{} 点击后的状态 :hover{} 鼠标悬停/滑过状态 :active{} 鼠标点击状态 :focus{} 获取光标状态
包含选择器以空格隔开	ul li{} 选择ul里面的li ol li{} 选择ol里面的li .nav .a2{} .nav a:hover{} ul li a:hover{}
群组选择器以,隔开	h1,h2,h3{}

5.2 CSS的使用方式

1.行内样式【优先级最高，不建议使用】

2.内部样式【只能修改一个页面，重用率低】

3.外部样式【可以修改任意页面，重用率高，推荐使用】

5.3 文字样式【修改文字】

5.4 文本样式

5.5 列表样式

5.6 背景样式

六、CSS3新增属性

6.1 元素显示/转换

        标签有分类——单标签、双标签
        元素有分类——块元素、行内元素、行内块元素
        1.块元素：独占一行、设置宽高生效、默认宽度占父元素100%
        display: block;
        2.行内元素：在一行之内显示、设置宽高不生效、默认宽度是内容撑开的
        display: inline;
        3.行内块元素：既在一行之内显示、宽高还生效
        display: inline-block;

6.2 圆角边框

可以设置1到4个属性值，遵循“顺指针、对角线”原则

6.3 背景色渐变

6.4 文字阴影

6.5 盒子阴影

6.6 过渡动画 transition

缺点：只能由一种状态过渡到另一种状态

6.7 帧动画 animation

一帧一帧组成的，类似于我们看到的小人书。

6.8 溢出

6.9 文本溢出 text-overflow

七、布局

布局——给页面画图纸，设计元素在指定的位置。

举个例子，实际生活中，盖房子的步骤是：①画图纸[审核]，②打地基垒框架，③装修。

在页面制作中，我们也需要三步走：布局、HTML结构、CSS样式、JS动画。

7.1 静态布局

从上往下逐一摆放
缺点：会造成空间浪费

7.2 浮动布局 float

float 原来是进行图文混排的处理的。

float 现在可以在页面中进行【分列】

7.3 使用float进行DIV+CSS布局

        页面的内容都有指定的标签 p h1-h6 img ……
        使用div来表示块元素、也可称之为盒子
        页面的所有元素都是盒子
        盒模型有四部分、五属性

7.4 定位布局 position

position:static;	静态定位，没有定位，默认值
position:relative;	相对定位，相对于自身进行定位【位移时，自身原位置不消失】
position:relative;	绝对定位，相对于body或者带有定位的父元素进行定位【位移时，自身原位置消失】
position:relative;	固定定位，相对于浏览器窗口进行定位【滚动时也是固定的】

        其中注意一点：因为相对定位自身位置不消失，所以一般不会使用相对定位进行位移。
        我们通常采用父相子绝来进行定位处理。
        transform:translate(X,Y)位移必须配合方向词：left right top bottom，单位有px em % 等，正负值都可以。
        使用定位时，盒子会产生层叠效果，可以通过z-index属性进行层叠顺序调整。
        z-index属性是不带单位的数字，正负都可以，值越大越显示在上方。