记录前端学习

栋栋sama

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

阅读量127

点赞数

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

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

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

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客介绍了HTML作为网页标签语言的基础，包括行内元素、行内块元素和块元素的区分，强调了语义化标签的重要性。此外，还讲解了CSS样式表的作用，样式引入方式以及权重规则，探讨了前端工程师的工作内容和开发流程。

摘要由CSDN通过智能技术生成

一.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;
            /* 单词之间的间距 */
            word-spacing: 10px;
            /* 对齐方式，文字与图片的对齐方式 */
            vertical-align: top;

/* 引入外部字体或者使用字体图标 */
       @font-face{
           font-family: 'tiancai';
           src: url('zhua.eot');
       }
       span{
           font-family: 'tiancai';
       }

样式是可以被继承，父元素写的部分属性，子元素也会有这些属性

2、背景相关属性

/* 颜色的三种表示形式 */
           /* background-color: red;
           background-color: rgb(20, 25, 50);
           background-color: #00ff00; */
           /* 背景色  rgb(红绿蓝 光学三原色   ) 
                       rgba(红绿蓝 背景色透明度)
                          背景色透明度 从0~1  0完全透明  1完全不透明*/
           background-color:rgba(50, 100, 71,0.5);
           /* 背景图片默认会填满标签。如果图片小，则重复出现填满 ，如果图片大，则显示标签大小的那一部分 */
           background-image: url('mouse.png');
           /* 让背景图片不重复出现,填不满的部分不做处理 */
           background-repeat: no-repeat;
           /* 背景图片大小，可以写具体的值px，也可以写百分比，也可以写contain或者cover */
           /* background-size: 100px 100px; */
           /* background-size: 100% 100%; */
           /* contain和cover都是等比例 */
           /* contain 是将图片等比例缩放，直到图片宽和高自适应标签的宽高，都显示在标签元素里 */
            /* background-size: contain; */
           /* background-size: cover; */
           /* x轴正值是往右移动   y轴正值是往下移动 */
            /* background-position: 200px 200px; */
            /* background: url('logo-text.png') no-repeat 100px 50px; */

3、隐藏相关属性

1）、使用overflow:hidden 隐藏溢出的内容
overflow
{

scroll：显示滚动条

auto:自动，如果内容大于网页的高度显示滚动条，否则不显示

hidden:隐藏滚动条,隐藏溢出的内容 */

/* overflow: auto; */
}

2）、使用visibility，隐藏标签元素，并保留该元素占有的位置

 .d2{
          background-color: pink;
          height: 200px;
          visibility: hidden;
      }

      /* 悬停事件  让.d1被悬停的时候让.d2可见
      如果悬停在某个标签时，为其同级标签添加样式则需要使用+ */
      .d1:hover +.d2{
         visibility: visible;
      }

3)、使用display：none把标签隐藏，并且位置也不占用了，然后使用display：block重新显示块元素。

.d2{
          width: 200px;
          background-color: orange;
          /* 隐藏某个元素，并不保留之前的位置 */
          display: none;
      }
      p{
          margin-bottom: 30px;
      }
      .d1:hover +.d2{
        display:block;
      }

4、使用透明度：

 .d1{
           /* rgb 三种颜色取值0~255
           透明度取值 0完全透明  ~    1完全不透明
           背景色透明 */
           background-color: rgba(255, 0, 0, 1);
       }
       .d2{
           background-color: aqua;
           /* 透明度  让标签元素整体透明 */
           opacity: 0;
           height: 300px;
       }
       .d1:hover +.d2{
            opacity: 1;
       }

网页基本结构

<!DOCTYPE html>
<!-- Document 文档  type类型  html5 必须要有的东西，告诉浏览器怎么加载渲染我-->
<html lang="en">
<!-- 根标签 language语言  =  english   声明使用语言是英文
html标签是根元素标签，是最外层的一个标签
网页是分两部分的
   头部分：用来声明一些元数据，比如字符集、比如网页初始展示效果，比如网页标题
   身体部分：网页的内容体 -->
<head>
    <!-- 声明字符集、字符编码是utf-8  utf-8是国际标准的字符集，基本上可以编码世界上大多数语言   -->
    <meta charset="UTF-8">
    <!-- 声明网页视图的宽度是设备的宽度  网页的初始缩放比例是1倍 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 声明ie浏览器加载网页是使用最新的内核加载 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 网页标签页的标签 -->
    <title>华北水利水电大学新闻网</title>
</head>
<!-- 网页的身体，网页的元素构成都是在这里写的 -->
<body>
    <!-- html里的注释符号 会将注释包括起来的东西不让浏览器加载
    让程序员看的，有利于团队开发  不同的语言中注释是不一样的
   html是超文本标记语言，标签语言， 每个标签都有自己含义，而网页中的所有元素就是有html的
不同标签组成。
   html的标签是由<>包括起来   大部分的标签是成对的  有开始标签和结束标签
                                                <标签名>     </标签名>
-->
<!-- 网页里是可以写文字的 在网页里写文字时添加的空格和换行都只会当成一个空格来处理  -->
计算机你好      哈哈，前边有几个空格啊你好世界
<!-- 图片标签
img是图片标签   属性为了描述修饰这个标签    <开始标签 属性="属性值"></结束标签>
src是img标签的一个属性，声明图片的地址
alt是当图片路径错误时图片加载出来出现的提示信息
title是当鼠标移动到图片上时出现的提示信息
width:控制图片的宽度，大多数html标签都有的属性
height: 控制图片的高度,
当图片只设置了高宽的其中一个属性，那么另外一个没有设置的属性也会等比例缩放
img可以引入网络资源图片，也可以引入本地资源图片
-->
<!-- 网页中的计量单位比较常用的是像素px -->
<!-- 引入图片资源、音乐资源、视频资源、外部css或者js或者html文件资源都有两种方式
1、绝对路径  从磁盘开始的路径，直到图片文件名的完整路径
2、相对路径  相对于当前这个文件，要引入的图片其所在的路径-->
<!-- 绝对路径 -->
  <!-- <img src="C:\Users\ASUS\Desktop\mouse.png"> -->
  <!-- 相对路径
../ 代表是跳到上一级（父级）目录 -->
  <img width="300px" height="100px" src="../mouse.png" alt="你的图片丢了" title="点击一下，了解更多">
  <!-- 文字相关的标签 -->
  <!-- b标签是加粗标签，让文字加粗
        u是下划线  i em斜体
  strong标签是着重语气，在一些朗读软件里用strong修饰的文字会有重音
  strong经常作为搜索用的语义标签 -->
  <b>你好世界</b>你好世界<strong>你好世界</strong>
  <i>哈喽</i>哈喽 <em>哈喽</em>
  <!-- 标签是可以嵌套使用的 -->
  <u><b>添加下划线</b></u>
  <img src="https://img0.baidu.com/it/u=3798217922,3880088897&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500" alt="">
  <!-- a标签是超链接
  href属性类似于img的src属性，都是用来填写资源路径 -->
  <a href="哈哈.html">哈哈网页</a>
<!-- span是一个无语义标签，但是常和样式结合使用 -->
  <!-- <span>我是一个span标签，但是我的直接功效作用是没有的</span> -->
  <!-- 换行标签 -->
 世界这么大，
<br>我想去看看
<br> 床前明月光，
<br>疑似地上霜。
<br>举头望明月，
<br>低头思故乡。
<!-- p标签是一个段落标签,用来放一段文字的，类似于小学语文中的自然段
独占一行，自带换行 常用于新闻、小说 -->
<p>昨夜雨疏风骤</p>晚睡男秀才酒
<!-- h1-h6 标题标签，常用于新闻标题或者文字章节名 将文字加粗放大
h系列的标签独占一行 -->
<h1>俄乌战争几时休</h1>
<h2>俄乌战争几时休</h2>
<h3>俄乌战争几时休</h3>
<h4>俄乌战争几时休</h4>
<h5>俄乌战争几时休</h5>
<h6>俄乌战争几时休</h6>
<!-- hr水平线标签 常用于将新闻标题和正文分开 -->
<hr>
<!-- audio 音频调用 -->
<!-- <audio src="1.mp3" ></audio>   没有controls 音频没有显示 -->
<!-- 属性等于属性名的时候可以不用写等号后后面的内容 -->
<!-- <audio src="1.mp3" controls="controls"></audio> -->
<!-- <audio src="1.mp3" controls></audio> -->
</body>
</html>