记录前端学习

VIP文章栋栋sama

已于 2022-07-07 22:26:58 修改

阅读量112

点赞数

分类专栏： html 文章标签：前端学习

于 2022-07-07 18:57:22 首次发布

本文链接：https://blog.csdn.net/erdongmudong/article/details/125629156

版权

一.html

html可以看做一个做网页的标签语言，是超文本标记语言。html通过不同的标签让浏览器渲染出不同的组件元素。标签是用<>包括起来的。有的标签是成对存在的。

语义化标签：标签有自己的含义，比如说p标签就是用来写段落的。比如h1~h6标签用来写标题的。

无语义标签：span，没有自己的含义。

语义标签的作用：
1、易读性，开发人员可以更清晰的看出网页的结构
2、在某些软件中会根据语义标签进行不同的发音等。
3、搜索引擎的权重排序

前端工程师的工作：做前端页面的开发工作，实现用户交互。掌握前后端分离。会调用后端的接口，并将返回的数据渲染到前端页面，微信小程序的开发、微信公众号的开发，钉钉小程序 vue uniapp

前端ui框架 layui 提高前端的开发速度

html – css — js(ajax\query\json) — 移动端开发、响应式开发、html5和css3的新特性 ---- node.js

----- vue.js（微信小程序、微信公账号） ---- react — 项目提升等

前端要了解一些开发流程：

甲方定需求 — 产品经理谈需求，给出方案(用墨刀做出效果图) ----- 技术研讨会，确定使用什么技术，分配任务 ---- 有些公司不仅要求后端写接口文档，前端也要写 ----- 开发代码 -------- 看后端的接口文档需要什么参数需要什么请求调用测试后端接口，将获得的数据渲染到前端网页（jinkens） ---- 改bug、改需求(禅道)

html常用标签:

标签根据显示形式的不同主要分为三类标签;

1.行内元素(标签):

span a img(是行内元素，但是有行内块的特点) br b i u
允许与其它非块元素标签在同一行显示，如果同一行没有位置才会放到下一行

一般情况下不能设置宽高，默认是内容撑开的宽高

行内元素是允许嵌套其它元素的 a标签不能嵌套a标签

2、行内块元素：

input button select

允许与其它非块元素标签在同一行显示，如果同一行没有位置才会放到下一行

可以设置宽高（行内块是允许嵌套其它元素的）

3、块元素

div (在做网页时经常用div划分区域一块块的去制作网页) hr h1~h6 p
独占一行，默认宽度是父元素的宽度，默认高度是0。
可以设置宽高，即使设置块元素的宽度不是父元素的宽度了也不允许其它元素放在同一行
可以嵌套其它元素
p标签不能嵌套div标签

标签里是可以写属性的
<开始标签属性名=“属性值”></结束标签>
style属性比较特殊，专门用来写样式的

二.样式（css）

css层叠样式表，决定html标签的大小、颜色、位置等的样子，浏览器内核去渲染出来的样式。

样式引入的不同方式

1、内部样式

<div style="heigth:100px;">

    </div>

2、内嵌样式

嵌套在style标签里，因为样式集中放到了style里，所以需要通过选择器来确定样式属性用来渲染哪个或者哪些标签

1)、id选择器：

<head>
	<style>
 		#my{
            height: 100px;
       		 }
    </style>
</head>
	<body>
  	  	<div id="my">
    	</div>
    </body>

2）、class选择器：

<head>
	<style>
	.box{
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="my" class="box">
    </div>
</body>

3）、标签选择器：

<head>
	<style>
	div{
            height: 100px;
        }
    </style>
</head>
<body>
   <div id="my" class="box">
    </div>
</body>

3、外部引入css文件

<link rel="stylesheet" href="css文件的地址,相对路径和绝对路径都可以">

4、使用@import

<style>
        /* 选择器 {样式属性:样式属性值} */
       @import url('css文件的地址,相对路径和绝对路径都可以');
    </style>

样式的权重

1、当有多个选择器同时控制了同一个标签的同一个属性时，权重大的那个选择器的给的属性值生效。

2、当多个选择器同时控制了同一个标签的同一个属性其权重也相同时，采用就近原则（最新原则），比如

最新的指令会去覆盖老的指令

div span{
          color: blue;
      }
      p span{
          color: red;
      }

其实这个地方也提现了css的层叠性

！important 覆盖任何的样式

内部样式 1000

id选择器 100

class选择器 10

标签选择器 1

通配符 0

三、样式的基本属性

1、字体属性

/* 字体大小 */
           font-size: 20px;
           /* 字体颜色 */
           color: red;
           /* 字体类型 */
           font-style: italic;
           /* 文字的宽度 400是正常宽度 */
           font-weight: 400;
           /* 字体类型 */
           font-family: '宋体';
           /* 文本对齐方式 */
           text-align:center;
           /* 文本修饰，可以添加下划线、管穿线等 */
           text-decoration: line-through;
           /* 行高,常用于文字居中 */
           line-height: 30px;
            /* 文字之间的间距，用于单词会让每个字母都有这个间距 */
            letter-spacing: 10px;