前端基础篇1--html，css基础

最新推荐文章于 2024-09-12 18:02:32 发布

咖啡壶子

最新推荐文章于 2024-09-12 18:02:32 发布

阅读量198

点赞数 2

分类专栏：前端从入门到精通文章标签： html

本文链接：https://blog.csdn.net/TroyeSivanlp/article/details/119682179

版权

前端从入门到精通专栏收录该内容

64 篇文章 21 订阅

订阅专栏

以下几篇是前端html，css基础的学习。

1.html，css基础	https://blog.csdn.net/TroyeSivanlp/article/details/119682179
2.html5和css3新特性	https://blog.csdn.net/TroyeSivanlp/article/details/120079143
3. css高级技巧	https://blog.csdn.net/TroyeSivanlp/article/details/120113411
4.移动web总结	https://blog.csdn.net/TroyeSivanlp/article/details/120229593
5.案例：品优购demo	https://blog.csdn.net/TroyeSivanlp/article/details/120079465

HTML 概念

一.网页的相关概念

网站：网页的集合
网页：文字、图片等组成
html：超文本标记语言
网页的形成：浏览器打开html文件就看到我们的网页
额外的概念：文件和文件名

二.常用浏览器

常用的浏览器:chrome浏览器

三.web标准

制定者：w3c组织
构成: 结构（html）+ 表现/样式(css)+行为（javaScript）

HTML标签

一.DOCTYPE和lang以及字符集的作用

<!DOCTYPE html> 文档类型声明标签
<html lang=“en”> 告诉浏览器或者搜索引擎这是一个英文网站
<meta charset=“ UTF-8” /> 网页的编码，必须写

二.标签语义

<head>：网页的头部
<title>:网页的标题

三.标题标签

含义：表示标题；网页中体现重要的内容
特点：显示加粗；显示加粗
h1-h6： 6 个等级的网页标题
跟title的区别：title是网页标题，h1-h6是内容里的标题

四.段落标签和换行标签

p标签：① 含义：定义段落
②特点：文本根据段落自动换行；段落和段落之间保有空隙。
br标签：①含义：标签语义：强制换行。
②特点：<br /> 是个单标签。<br /> 标签没有垂直空隙。

五.文本格式化

语义：突出重要性, 比普通文字更重要
分类：
①加粗 <strong></strong> <b></b>
②倾斜 <em> <i>

六.img-图像标签

语义：网页中插入图像
写法：<img src=“图像URL” />
src 是必须属性，它用于指定图像文件的路径和文件名。
alt：替换文本属性
title：提示文本属性（chrome没显示）
样式属性：
①width:图像的宽度
②height:图像的高度
③border:图像的边框
图像标签注意点
① src属性是必须要写的
② alt与title的区别：
alt图片加载不出来时对图片的说明解释；
title是当鼠标移动到图片上时所显示对图片的阐述说明。

七.链接标签

语法：<a href=“跳转目标” target=“目标窗口的弹出方式”> 文本或图像
分类：
①外部链接: 例如 < a href=“http:// www.baidu.com “> 百度。
②内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 < a href=“index.html”> 首页。
③空链接: 如果当时没有确定链接目标时，< a href=”#”> 首页。
④下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
⑤网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.
⑥锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.
(在链接文本的 href 属性中，设置属性值为 #名字的形式，如<a href="#two"> 第2集 </a> 找到目标位置标签，里面添加一个 id 属性 = 刚才的名字，如：<h3 id=“two”>第2集介绍</h3>)

八.注释标签和特殊字符

注释标签：ctrl+/
特殊字符：不方便使用的符号：
空格符号： 
小于号:<
大于号：>

### 九.表格标签

表格标签的基本使用

表格作用：展示数据
语法：三组标签（没有列的标签）

表头单元格

位于表格的第一行
标签:<th>

表格的属性

align：表格的对齐方式
border：表格单元格的边框
cellpadding：单元格与内容之间的空隙
cellspacing：单元格之间的空隙
width：表格的宽度

表格结构标签

头部区域：<thead>标签
主体区域：<tbody>标签

合并单元格

合并单元格方式
跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
目标单元格
跨行：最上侧单元格为目标单元格, 写合并代码
跨列：最左侧单元格为目标单元格, 写合并代码
合并单元格的步骤： ①先确定是跨行还是跨列合并。
②找到目标单元格. 写上合并方式 = 合并的单元格数量。比如：<td colspan=“2”></td>。③ 删除多余的单元格。

十.列表标签

作用

列表就是用来布局的

十一.表单

作用

收集用户信息

组成

表单域

含义:包含表单元素的区域
标签: 会把它范围内的表单元素信息提交给服务器.
属性:
①action:服务器url地址
②method：表单提交的方式（get/post）
③name：表单的名称

表单元素

1. input输入表单元素

语法：<input type=“属性值” />
注意点:<input /> 标签为单标签;type 属性设置不同的属性值用来指定不同的控件类型
type属性1:文本框：text;密码框:password;单选按钮：radio;复选框：checkbox
name和value属性:name表单元素的名字（可自定义），value:表单元素的值;对于单选按钮和复选框要有相同的name值
checked和maxlength属性:checked属性主要针对于单选按钮和复选框，给单选按钮和复选框给定默认值;maxlength 是用户可以在表单元素输入的最大字符数
type属性2
①提交按钮：submit（提交里的所有表单元素给服务器）
重置按钮:reset重置里的所有表单元素
普通按钮：button不提交数据的按钮
文件域：file上传文件用的
lable元素：
标注标签：<label for=“sex”>男
<input type=“radio” name=“sex” id=“sex” />（和input一起使用）

2. select下拉表单元素

注意点

<select> 中至少包含一对<option> 。
在<option> 中定义 selected =“ selected " 时，当前项即为默认选中项。

3. textarea 文本域表单元素

多行文本输入的控件
常见于留言板，评论

css简介

HTML 的局限性

html写出来的页面没有美感

CSS-网页美容师

让网页更漂亮

CSS 最大价值

结构和样式分离

CSS 语法规范

语法

两部分组成：选择器以及样式声明

h4 {
color: blue;
font-size: 100px;
}

CSS 代码风格

样式格式书写：推荐展开式
样式大小写：推荐小写
空格规范：选择器后面，保留一个空格；冒号后面，保留一个空格

基础选择器

标签选择器

语法
标签名{
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
…
}
作用：把某一类标签全部选择出来
优点：快速为页面中同类型的标签统一设置样式
缺点：不能为同类型标签设计差异化样式

类选择器

语法
.red {
color: red;
}
<div class=“red”></div>
场景:实现差异化
多类名
<div class=“red font20”>亚瑟</div>

使用场景
(1) 可以把一些标签元素相同的样式(共同的部分)放到一个类里面.
(2) 这些标签都可以调用这个公共的类,然后再调用自己独有的类.
(3) 从而节省CSS代码,统一修改也非常方便.

id 选择器

用法
#nav {
color:red;
}
<div id=“nav”></div>
和类选择器的区别:
类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。
id 选择器好比人的身份证号码，全中国是唯一的，不得重复。
id 选择器和类选择器最大的不同在于使用次数上。
类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。

通配符选择器

通配符选择器
{
margin: 0;
padding: 0;
}
作用:选择页面上的所有标签（元素）

字体属性

字体系列

语法: div {font-family: Arial,"Microsoft Yahei", "微软雅黑";} 不需要记住字体名

字体大小（字号）

p {
font-size: 20px;
}
注意点:
px（像素）大小是我们网页的最常用的单位
谷歌浏览器默认的文字大小为16px
我们尽量给一个明确值大小，不要默认大小
可以给 body 指定整个页面文字的大小

字体粗细

语法:
p {
font-weight: bold;
}
注意点:实际开发时，我们更喜欢用数字表示粗细（400-900）

字体样式

语法:
p {
font-style: normal;
}
注意点:平时我们很少给文字加斜体，反而要给斜体标签（em，i）改为不倾斜字体。

字体复合属性

语法:
body {
font: font-style font-weight font-size/line-height font-family; }
注意点
使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
必须保留 font-size 和 font-family 属性

总结

CSS font (字体)属性用于定义字体系列、大小、粗细、和文字样式（如斜体）

文本属性

文本颜色

语法
div {
color: red;
}
颜色值
预定义的(开发中不常用)：red，green
16进制：#FF0000
RGB：rgb(225,0,0)
常用的颜色
白色：#FFFFFF
黑色：#000000
红色：#FF0000

文本对齐

div { text-align: center; }

文本装饰

语法
div {
text-decoration：underline； }
重点：重点记住如何添加下划线 ? 如何删除下划线 ? 其余了解即可

文本缩进

语法
p {
text-indent: 2em;
}
em
em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小
段落开头我们缩进2个文字：text-indent：2em

行间距（行高）

p {
line-height: 26px;
}

css引入方式

内部样式表（嵌入式）练习时用的

在head标签中使用style标签，style标签里面写css样式

行内样式表（行内式）

元素的style属性里面写样式

因为直接在元素上写样式，不需要写选择器了

外部样式表（链接式）

步骤：

新建一个 .css 的样式文件
在 HTML 页面中，使用标签引入这个文件：

Chrome调试工具

打开调试工具

按下 F12 键或者右击页面空白处检查。

使用调试工具

左边是 HTML 元素结构，右边是 CSS 样式

如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误

复合选择器

复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的

元素显示模式

含义

元素（标签）以什么方式进行显示

显示模式转换

转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块：display: inline-block;

css背景

背景颜色

background-color:颜色值

背景图片

background-image : url (url)

背景平铺

background-repeat: repeat | no-repeat | repeat-x | repeat-y

背景图片位置

用法：
background-position: x y;
值的分类
①方位词
如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致；
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
②精确单位：
如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标；
如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中
③混合单位
如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

背景图像固定

background-attachment : scroll | fixed

复合写法

background: transparent url(image.jpg) repeat-y fixed left top ;

背景色半透明

background: rgba(0, 0, 0, 0.3);

css特性

层叠性

样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
样式不冲突，不会层叠

继承性

子标签会继承父标签的某些样式
恰当地使用继承可以简化代码，降低 CSS 样式的复杂性
子元素可以继承父元素的样式（text-，font-，color属性，line-height属性，可以继承）
行高的继承

优先级（重点）

选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行
权重图
权重比较：!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承
继承的权重是0

盒子模型

引言

页面布局要学习三大核心：盒子模型, 浮动和定位

盒子模型的组成

border边框
border-width，border-style， border-color
①简写:border: 1px solid red
② 表格的细线边框（了解）:border-collapse:collapse;
③边框会影响盒子实际大小边框会额外增加盒子的实际大小
④不会撑开盒子大小的特例:子盒子不写width属性

padding内边距

边框与内容之间的距离

简写记得口诀：上右下左
padding影响了盒子实际大小。

外边距 margin

盒子和盒子之间的距离
块级盒子水平居中：
① 盒子必须指定了宽度（width）。
② 盒子左右的外边距都设置为 auto
行内元素和行内块元素居中对齐:text-align:center
外边距合并
分类
① 相邻块元素垂直外边距的合并
② 嵌套块元素垂直外边距的塌陷

清除内外边距

* {
 padding:0; /* 清除内边距 */
 margin:0; /* 清除外边距 */
 }

行内元素为了照顾兼容性，尽量只设置左右内外边距

圆角边框

语法

border-radius:length;

使用

参数值可以为数值或百分比的形式
如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%
该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius
和 border-bottom-left-radius
兼容性 ie9+ 浏览器支持, 但是不会影响页面布局,可以放心使用.

盒子阴影

用法

box-shadow: h-shadow v-shadow blur spread color inset;

注意点

默认的是外阴影(outset), 但是不可以写这个单词,否则造成阴影无效
盒子阴影不占用空间，不会影响其他盒子排列。

文字阴影（了解）

text-shadow: h-shadow v-shadow blur color;

浮动

传统网页的布局的方式

普通流（标准流）：标签按照规定好默认方式排列.
浮动
定位

为什么需要浮动

标准流无法实现块级元素横向排列

语法

选择器 { float: 属性值; }

特性

脱标（脱离标准流）：浮动的盒子不再保留原先的位置
一行内显示且顶端对齐
浮动元素会具有行内块元素特性

浮动的注意点

浮动和标准流的父盒子搭配
一个元素浮动了，理论上其余的兄弟元素也要浮动。
浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流

为什么要清除浮动（影响）

本质上：浮动元素脱标了，撑不起标准流的父盒子
影响：父元素盒子撑不起来，后面的标准流会顶上来
父盒子的高度为0，影响后面的标准流排版

6.清除浮动4种方法

本质：清除浮动元素造成的影响

选择器{clear:属性值;}

方法

①额外标签法（隔墙法）

定义：额外标签法会在浮动元素末尾添加一个空的标签。例如 <div style=”clear:both”></div>，或者其他标签（如<br />等）。
优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差
注意：要求这个新的空标签必须是块级元素。

②父级添加 overflow 属性

可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。子不教,父之过,注意是给父元素添加代码优点：代码简洁缺点：无法显示溢出的部分

③父级添加after伪元素

:after 方式是额外标签法的升级版。也是给父元素添加

.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6、7 专有 */
*zoom: 1;
}

优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
代表网站：百度、淘宝网、网易等

④ 父级添加双伪元素

也是给给父元素添加

.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}

优点：代码更简洁
缺点：照顾低版本浏览器
代表网站：小米、腾讯等