web前端第一阶段学习

最新推荐文章于 2024-08-14 15:00:00 发布

小萌新上路啦

最新推荐文章于 2024-08-14 15:00:00 发布

阅读量103

点赞数 1

文章标签： web html css

本文链接：https://blog.csdn.net/m0_45076316/article/details/125994330

版权

HTML（超文本语言）

一基础框架:

1.<!DOCTYPE html> 是文档声明，声明当前网页版本，是html5的写法

2.<html lang="en"> 是默认语言为英文，但可以输出中文，只是会让你的浏览器提示你要不要翻译此页，改成zh就没有翻译选项（即变成了中文页面）

3.<head></head> 是头部的标签，帮助浏览器或搜索引擎来解析网页

用meta标签设置网页的元数据
charset用来设置网页的字符集，避免乱码问题
name 指定的数据的名称
content 指定的数据内容
<meta charset="UTF-8">选定字符集为UTF-8

二常用html标签

<h1></h1>	HTML 标题
<p></p>	HTML 段落
<a></a>	HTML 链接
<img>	HTML 图像
<table></table>	HTML 表格
<ul></ul> <ol></ol> <dl></dl>	HTML 有序列表 HTML 无序列表 HTML 自定义列表
<div></div>	定义文档中的分区或节（division/section）
<span></span>	定义 span，用来组合文档中的行内元素

三表单元素

包含有 input 元素、单选框、复选框、单选按钮、提交按钮等等。

<input>元素

<input> 是最重要的表单元素，根据不同的type属性有不同的形态

类型	描述
text	定义常规文本输入。
radio	定义单选按钮输入（选择多个选择之一）
submit	定义提交按钮（提交表单）
select	定义下拉列表
option	定义待选择的选项
textarea	定义文本域
button	定义按钮

<input type="text"> 定义用于文本输入的单行输入字段：
<form>
 First name:<br>
<input type="text" name="firstname">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form> 

<input type="select"> 定义下拉列表：

<select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
</select>

实现效果：

select

CSS(描述HTML文档样式的语言)

一、三种使用 CSS 的方法：

有三种插入样式表的方法：

外部 CSS
内部 CSS
行内 CSS

1.外部 CSS 样式在 HTML 页面 <head> 部分内的 <link> 元素中进行定义：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

2.内部 CSS 样式在 HTML 页面的 <head> 部分内的 <style> 元素中进行定义：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

3.行内 CSS 样式在相关元素的 "style" 属性中定义：

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

二、CSS选择器

我们可以将 CSS 选择器分为五类：

简单选择器（根据名称、id、类来选取元素）
组合选择器（根据它们之间的特定关系来选取元素）
伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
属性选择器（根据属性或属性值来选取元素）

三、常用的CSS属性

CSS背景：

background-color
background-image
background-repeat
background-attachment
background-position

1.background-color 属性指定元素的背景色

实例

页面的背景色设置如下：

body {
  background-color: lightblue;
}

2.background-image 属性指定用作元素背景的图像。

默认情况下，图像会重复，以覆盖整个元素。

实例

页面的背景色设置如下：

body {

background-image: url('tupian.png');

}

3.background-repeat 属性指定用作元素背景的图像是否重复和重复的方向。

水平方向重复 (background-repeat: repeat-x;)
垂直方向重复 (background-repeat: repeat-y;)
指定只显示一次背景图像 (background-repeat: no-repeat;)

实例

页面的背景色设置如下：

水平方向重复:

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

垂直方向重复:

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-y;
}

重复一次：

body {
  background-image: url("gradient_bg.png");
  background-repeat: no-repeat;
}

4.background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）：

实例

指定应该固定背景图像：

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

CSS边框

border-style 属性指定要显示的边框类型。

允许以下值：

dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
none - 定义无边框
hidden - 定义隐藏边框

border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

CSS 圆角边框

border-radius 属性用于向元素添加圆角边框：

p {
  border: 2px solid red;
  border-radius: 5px;
}

四、网页布局

（1）流动布局

(2)浮动布局：

（要求一浮全浮，否则当前浮动元素会影响后面的标准流） float：left/right

(3)定位：

相对定位：（以自己原来的位置为顶点，地面上的位置谁都不许占）

position：relative

left 500px（距离原来位置左边500像素）

top 10px（距离原来位置底部10像素）

绝对定位：从里到外找第一个有定位的的外层元素作为起点，没有就用浏览器原点
position:absolute;

left 500px（距离起点左边500像素）

top 10px（距离起点底部10像素）

固定定位：相对于浏览器可视窗口进行定位，起飞后在xoy面移动，固定定位会固定在浏览器的某个位置，不会随滚动条滚动（特殊的绝对定位）
position：fixed

---------------------------------------------------------------------------------------------------------------------------------

五、个人学习心得

1，学会取舍
全部前端内容比较多，所以在不断的学习过程中，知识会给你开一个更大更广的知识群，要冷静取舍，选择自己感兴趣的方向拓展而不是盲目全部接收。

2，学会独立
自己写出来的BUG自己慢慢专研，毕竟有时候没人愿意告诉你答案；同时，有时也要有不耻下问的谦逊，实在找不到解决方法就要问。一个合格的程序员要学会面对百度编程，不懂的不会的找不到的直接找度娘，它可以帮你解决90%的问题。

3，学会总结
不要一味地逼自己学，还是要了解自己到底什么方法适合自己，定期花一些时间冥想反思有助于提升学习效率。还有，人的忘性极大，不及时巩固一些知识点就跟白学一样，所以定期回顾知识，尽量总结知识架构。

六、个人学习方法

1、多看

去知乎，百度，CSDN，51CTO，博客园，简书，慕课MOOC等平台，看看其他程序员写的代码以及别人的学习方法等，前人玩留下的经验也总有适合你的。

2、多练

自己找一些小型复杂点的网站，尝试自己去独立完成，在编写过程中遇到的难点或者自己写的BUG解决后都可以记录下来，这就是经验。也可以在网络上百度前端学院中寻找合适的练习题目来进行练习，通过不断积累问题学习。

3、控制情绪
好的情绪也有助于学习效率，坏的情绪不利于学习。写代码遇到问题不要暴躁，冷静下来慢慢分析或者先晾它一会儿再来处理，你会发现BUG并不是那么难，学会管理情绪，也是你能安心学习的前提，不要开心就学一点不开心就扔开学习。

小萌新上路啦

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端第一阶段学习

前端基础知识点整理及个人心得体会
复制链接

扫一扫

web前端第一阶段学习

HTML（超文本语言）

一 基础框架:

二 常用html标签

三 表单元素

<input>元素

CSS(描述HTML文档样式的语言)

一、三种使用 CSS 的方法：

二、CSS选择器

三、常用的CSS属性

CSS背景：

实例

实例

实例

实例

CSS边框

CSS 圆角边框

四、网页布局

（1）流动布局

(2)浮动布局：

(3)定位：

五、个人学习心得

六、个人学习方法

一基础框架:

二常用html标签

三表单元素