Web前端：HTML+CSS基础知识

yk41000

已于 2024-09-29 14:01:19 修改

阅读量559

点赞数 13

文章标签：前端 html css

于 2024-09-29 13:53:52 首次发布

本文链接：https://blog.csdn.net/yk41000/article/details/142627692

版权

3.9：文本溢出 text-overflow

四、布局

4.1：静态布局

4.2：浮动布局 float

4.3: 使用float进行DIV+CSS布局

4.4:定位布局 position

一、HTML基本标签

在HTML中，为了区分代码文档中的不同内容，我们需要使用标签，以便处理。

根据书写形式，标签分为双标签和单标签：

<标签名></标签名>

<标签名/>

为了对标签进行描述，我们还需要了解属性

属性：用于描述标签特征，语法如下

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

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

1.1：标题标签h1-h6

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

水平对齐方式属性：align【属性值为left right center】

1.2：一些简单的描述性标签

换行

加粗

倾斜

下划线

删除线 </s>

文字

1.3：水平线标签 hr

<hr/>

属性：color 颜色

width 高度

size 粗细、高度

align 水平对齐方式【默认居中】

1.4：段落标签 p

段落有水平对齐方式属性 align【属性值为left right center】

由于网页中部分字符是不被识别的，需要使用转译字符。语法上以&开头，以；结尾

  一个英文空格

&ensp; 半个中文字空格=两个英文空格

&emsp 一个字空格

> 大于号 >

< 小于号 <

® 注册

1.5：图像标签 img

src 路径

alt 图片非正常加载时，显示提示文字

width 宽度

height 高度

border 边框

title 鼠标滑过时显示提示文字

1.6：列表标签 ul ol dl

1.6.1 无序列表ul

无序列表是一个整体，里面包含若干列表项

可使用type属性修改项目符号类型

属性值： disc默认实心圆

circle空心圆

square小方块

none无

1.6.2 有序列表 ol

有序列表是一个整体，里面包含若干列表项

可使用type属性修改项目符号类型

属性值：1（默认） a A i I

可使用start属性修改起始值

可使用reversed属性设置倒叙

1.6.3 自定义列表 dl

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

1.7：超链接 a

超链接（hyperlink）是Web页面中用于连接不同资源的一种机制。它允许用户点击文字或图片，从而跳转到另一个页面、文件、电子邮件地址或执行其他操作

链接源：文字、图片

链接目标：网页、网址、文件、邮箱、应用程序exe、锚点、空链接【#】等等等

属性： 1》href 路径

2》target 设置窗口打开方式 _self原窗口 _blank新窗口

锚点链接：【跳转到当前页面任意位置】

第一步：设置锚点 id属性设置属性名必须符合命名规范

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

1.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》删除掉被合并的单元格

1.9：表单标签 form

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

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

1.9.1 输入框 input

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

1》在radio单选框中，必须使用name设置同一组，才能实现单选

2》在单选框radio和复选框CheckBox中使用checked设置初始选中

3》在文本框密码框中使用 placeholder 设置模糊提示文字

4》有三种按钮形式reset重置 submit提交 button普通

1.9.2 下拉列表 select

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

1.9.3 文本域 textarea

cols 控制列数/宽度

rows 控制行数/高度

maxlength 控制最大长度/限制字数

1.10：HTML5新增语义化标签

eg:

time 【时间日期】

nav【导航】

header【头部】

footer【底部】

main【主体】

aside 【侧边栏】

二、CSS样式表

网页组成 = HTML + CSS + Js

HTML：超文本标记语言，控制网页的结构

CSS：层叠样式表，控制网页的外观

/* CSS语法格式：*/

选择器{

属性: 属性值;

}

1> CSS的注释是 /* */

2> 选择器——用于选择的工具

3> {}不能省略

4> 属性与属性值之间以:相邻，以;结尾【注意: ;都是英文的】

2.1 CSS基本选择器

全局选择器 *	*{color: red;} 选择所有标签
标签选择器标签名	p{color: red;} 选择所有p标签
class类选择器 .类名	.name1{color: red;} 选择所有class名为name1的标签
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{}

2.2 CSS的使用方式

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

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

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

2.3：文字样式【修改文字】

2.4：文本样式

2.5 列表样式

2.6 背景样式

三、CSS新增属性

3.1：元素显示/转换

标签有分类——单标签、双标签

元素有分类——块元素、行内元素、行内块元素

1》块元素：独占一行、设置宽高生效、默认宽度占父元素100%

display: block;

2》行内元素：在一行之内显示、设置宽高不生效、默认宽度是内容撑开的

display: inline;

3》行内块元素：既在一行之内显示、宽高还生效

display: inline-block;

3..2：圆角边框

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

3.3：背景色渐变

3.4：文字阴影

3.5：盒子阴影

3.6：过渡动画 transition

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

3.7：帧动画 animation

一帧一帧组成的，类似定格动画

3.8：溢出

3.9：文本溢出 text-overflow

四、布局

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

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

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

4.1：静态布局

从上往下逐一摆放

缺点：会造成空间浪费

4.2：浮动布局 float

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

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

4.3: 使用float进行DIV+CSS布局

页面的内容都有指定的标签 p h1-h6 img ……

使用div来表示块元素、也可称之为盒子

页面的所有元素都是盒子

盒模型有四部分、五属性

4.4:定位布局 position

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